Index: frontend/src/Components/Resources/AddAvailability.js
===================================================================
--- frontend/src/Components/Resources/AddAvailability.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Resources/AddAvailability.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,54 @@
+import React from "react";
+import { Container, Row, Modal, Im } from "react-bootstrap";
+import { useState } from "react";
+import { AiOutlinePlusCircle } from "react-icons/ai"
+import AddHotelForm from "../Forms/AddHotelForm";
+import AddRoomForm from "../Forms/AddRoomForm";
+import AddRestaurantForm from "../Forms/AddRestaurantForm";
+import AddTransportForm from "../Forms/AddTransportForm";
+import AddItemMenuForm from "../Forms/AddItemMenuForm";
+import AddRoomAvailablityForm from "../Forms/AddRoomAvailablityForm";
+import AddTableAvailablityForm from "../Forms/AddTableAvailabilityForm";
+
+const AddAvailability = (props) => {
+
+    const [show, setShow] = useState(false);
+
+    const handleClose = () => setShow(false);
+    const handleShow = (e) => {
+      e.preventDefault();
+      setShow(true);
+
+    };
+
+
+    return(<>
+        <Container onClick={handleShow}>
+        <h5>Додади<br/>расположливост</h5>
+                  <div className="d-flex justify-content-center align-content-center"><AiOutlinePlusCircle size={50} color="#159895"></AiOutlinePlusCircle></div>
+                  
+        </Container>
+
+        <Modal show={show} onHide={handleClose}>
+        <Modal.Header closeButton>
+          <Modal.Title style={{ color: "#159895" }}>
+            {props.type === "hotel" && "Додавање на хотел"}
+            {props.type === "room" && "Додавање на расположливост за соба"} 
+            {props.type === "restaurant" && "Додавање на ресторант"}
+            {props.type === "transport" && "Додавање на транспорт"}
+            {props.type === "menu" && "Додавање на ставка во мени"}
+          </Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+            {props.type === "hotel" && <AddHotelForm/>}
+            {props.type === "room" && <AddRoomAvailablityForm hotelRoomId={props.hotelRoomId}/>}
+            {props.type === "table" && <AddTableAvailablityForm table={props.table}/>}
+            {props.type === "restaurant" && <AddRestaurantForm/>}
+            {props.type === "transport" && <AddTransportForm/>}
+            {props.type === "menu" && <AddItemMenuForm/>}
+        </Modal.Body>
+      </Modal>
+    </>)
+}
+
+export default AddAvailability;
Index: frontend/src/Components/Resources/AddImages.js
===================================================================
--- frontend/src/Components/Resources/AddImages.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Resources/AddImages.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,100 @@
+import React from "react";
+import {Container, Row, Modal, Image, FormGroup, FormLabel, FormControl, Button} from "react-bootstrap";
+import {useState} from "react";
+import {AiOutlinePlusCircle} from "react-icons/ai"
+import AddHotelForm from "../Forms/AddHotelForm";
+import AddRoomForm from "../Forms/AddRoomForm";
+import AddRestaurantForm from "../Forms/AddRestaurantForm";
+import AddTransportForm from "../Forms/AddTransportForm";
+import AddItemMenuForm from "../Forms/AddItemMenuForm";
+import AddRoomAvailablityForm from "../Forms/AddRoomAvailablityForm";
+import AddTableAvailablityForm from "../Forms/AddTableAvailabilityForm";
+import {FaImage} from "react-icons/fa";
+import useGet from "../Hooks/useGet";
+import useFileChange from "../Hooks/FilesUpload/useFileChange";
+
+
+const AddImages = (props) => {
+
+    const [show, setShow] = useState(false);
+    const {data, isLoading, getData, setData, setChanged} = useGet(`/${props.type}/${props.Id}/images`)
+    const { onFileChangeHandler } = useFileChange();
+    const [selectedFiles, setSelectedFiles] = useState([]);
+
+    console.log(props.Id)
+
+    const handleClose = () => setShow(false);
+    const handleShow = (e) => {
+        e.preventDefault();
+        setShow(true);
+
+    };
+
+    !isLoading && console.log(data)
+
+
+    return (<>
+        <Container onClick={handleShow}>
+            <h5>Слики</h5>
+            <div className="d-flex justify-content-center align-content-center"><FaImage size={50}
+                                                                                         color="#159895"></FaImage>
+            </div>
+
+        </Container>
+
+        {handleShow && <Modal size={'xl'} show={show} onHide={handleClose}>
+            <Modal.Header closeButton>
+                <Modal.Title style={{color: "#159895"}}>
+                    Слики за ресурс
+                </Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+                <Container>
+                    {!isLoading && data.map((image) => {
+                        let link = image.url;
+                        console.log("SLIKATAAA")
+                        console.log(image)
+                        if (image.url.includes('Desktop')) {
+                            link = 'http://localhost:8080/download?fileName=' + encodeURIComponent(image.url);
+                        }
+                        console.log(link)
+                        return (
+                            <Image src={link} thumbnail width={171} height={180}/>
+                        )
+                    })}
+                </Container>
+                <Container>
+                    <FormGroup className="mb-3">
+                        <FormLabel>Upload Images:</FormLabel>
+                        <FormControl
+                            type="file"
+                            multiple
+                            onChange={(e) => setSelectedFiles(Array.from(e.target.files))}
+                        />
+                    </FormGroup>
+                    <Button onClick={() => {
+                        // setChanged((prev) => ++prev)
+                        onFileChangeHandler(selectedFiles, props.type, props.Id, setChanged)
+                        // setChanged((prev) => ++prev)
+                    }}>
+                        Upload Files
+                    </Button>
+                    <Container>
+                        {selectedFiles.map((file, index) => (
+                            <Image
+                                key={index}
+                                onClick={() => {
+                                }}
+                                fluid
+                                src={URL.createObjectURL(file)}
+                                alt={`Uploaded Image ${index + 1}`}
+                            />
+                        ))}
+                    </Container>
+                </Container>
+            </Modal.Body>
+        </Modal>}
+    </>)
+}
+
+export default AddImages;
Index: frontend/src/Components/Resources/AddNew.js
===================================================================
--- frontend/src/Components/Resources/AddNew.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Resources/AddNew.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,70 @@
+import React from "react";
+import { Container, Row, Modal } from "react-bootstrap";
+import { useState } from "react";
+import { AiOutlinePlusCircle } from "react-icons/ai"
+import AddHotelForm from "../Forms/AddHotelForm";
+import AddRoomForm from "../Forms/AddRoomForm";
+import AddRestaurantForm from "../Forms/AddRestaurantForm";
+import AddTransportForm from "../Forms/AddTransportForm";
+import AddItemMenuForm from "../Forms/AddItemMenuForm";
+import AddTripForm from "../Forms/AddTripForm";
+import AddTableForm from "../Forms/AddTableForm";
+
+const AddNew = (props) => {
+
+    const [show, setShow] = useState(false || props.show);
+    const [size, setSize] = useState("md");
+    console.log(props.show)
+
+    const handleClose = () => {
+      setSize("md");
+      setShow(false);
+    }
+
+    const handleShow = (e) => {
+      e.preventDefault();
+      setShow(true);
+
+    };
+
+    const setSizeXl = () => {
+        setSize("xl")
+    }
+
+
+    return(<>
+        <Container onClick={handleShow}>
+            <Row>
+                <h1><AiOutlinePlusCircle size={80} color="#159895"></AiOutlinePlusCircle></h1>
+            </Row>
+            <Row>
+                <h3 style={{color: "#159895"}}>Додади нов</h3>
+            </Row>
+        </Container>
+
+        <Modal show={show} onHide={handleClose} size={size}>
+        <Modal.Header closeButton>
+          <Modal.Title style={{ color: "#159895" }}>
+            {props.type === "hotel" && "Додавање на хотел"}
+            {props.type === "room" && "Додавање на соба"} 
+            {props.type === "restaurant" && "Додавање на ресторант"}
+            {props.type === "transport" && "Додавање на транспорт"}
+            {props.type === "menu" && "Додавање на ставка во мени"}
+            {props.type === "route" && "Додавање на рута"}
+            {props.type === "table" && "Додавање на маси"}
+          </Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+            {props.type === "hotel" && <AddHotelForm closeModal={handleClose} refresh={props.refresh}/>}
+            {props.type === "room" && <AddRoomForm closeModal={handleClose} refresh={props.refresh} hotelId={props.Id}/>}
+            {props.type === "restaurant" && <AddRestaurantForm edit="false" closeModal={handleClose} refresh={props.refresh}/>}
+            {props.type === "transport" && <AddTransportForm closeModal={handleClose} refresh={props.refresh}/>}
+            {props.type === "menu" && <AddItemMenuForm Id={props.Id} refresh={props.refresh}/>}
+            {props.type === "route" && <AddTripForm transportId={props.transport.transportID} setSize={setSizeXl} refresh={props.refresh}/>}
+            {props.type === "table" && <AddTableForm restaurantId={props.Id} refresh={props.refresh}/>}
+        </Modal.Body>
+      </Modal>
+    </>)
+}
+
+export default AddNew;
Index: frontend/src/Components/Resources/EditModal.js
===================================================================
--- frontend/src/Components/Resources/EditModal.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Resources/EditModal.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,46 @@
+import React from "react";
+import { Container, Row, Modal } from "react-bootstrap";
+import { useState } from "react";
+import { AiOutlinePlusCircle } from "react-icons/ai"
+import AddHotelForm from "../Forms/AddHotelForm";
+import AddRoomForm from "../Forms/AddRoomForm";
+import AddRestaurantForm from "../Forms/AddRestaurantForm";
+import AddTransportForm from "../Forms/AddTransportForm";
+import AddItemMenuForm from "../Forms/AddItemMenuForm";
+import AddTripForm from "../Forms/AddTripForm";
+import EditTableForm from "../Forms/EditTableForm";
+import EditRoomForm from "../Forms/EditRoomForm";
+import EditMainRouteForm from "../Forms/EditMainRouteForm";
+
+const EditModal = (props) => {
+
+
+
+
+    return(<>
+        <Modal show={props.show} onHide={props.handleClose} size={'lg'}>
+        <Modal.Header closeButton>
+          <Modal.Title style={{ color: "#159895" }}>
+            {props.type === "hotel" && "Додавање на хотел"}
+            {props.type === "room" && "Додавање на соба"} 
+            {props.type === "restaurant" && "Додавање на ресторант"}
+            {props.type === "transport" && "Додавање на транспорт"}
+            {props.type === "menu" && "Додавање на ставка во мени"}
+            {props.type === "route" && "Додавање на рута"}
+            {props.type === "table" && "Промена на маса"}
+          </Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+            {props.type === "hotel" && <AddHotelForm refresh={props.refresh}/>}
+            {props.type === "room" && <EditRoomForm refresh={props.refresh} room={props.room}/>}
+            {props.type === "restaurant" && <AddRestaurantForm edit="false" refresh={props.refresh}/>}
+            {props.type === "transport" && <AddTransportForm/>}
+            {props.type === "menu" && <AddItemMenuForm Id={props.Id} refresh={props.refresh} menu={props.menu}/>}
+            {props.type === "route" && <EditMainRouteForm route={props.route} refresh={props.refresh}/>}
+            {props.type === "table" && <EditTableForm table={props.table}/>}
+        </Modal.Body>
+      </Modal>
+    </>)
+}
+
+export default EditModal;
Index: frontend/src/Components/Resources/ResourceListing.js
===================================================================
--- frontend/src/Components/Resources/ResourceListing.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Resources/ResourceListing.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,76 @@
+import React from "react";
+import {useState} from "react";
+import {Col, Container, Row, Image, Modal, Button} from "react-bootstrap";
+import LoginForm from "../Login/LoginForm";
+import ChangePasswordForm from "../Forms/ChangePasswordForm";
+import AddAvailability from "./AddAvailability";
+import AddImages from "./AddImages";
+
+const ResourceListing = (props) => {
+
+    const type = props.type == "hotel" ? "сместувањето" : props.type == "restaurant" ? "ресторанот" : "превозот";
+    const name = props.type == "hotel" ? props.data.hotelName : props.type == "restaurant" ? props.data.restaurantName : props.data.transportName
+    const id = props.type == "hotel" ? props.data.hotelId : props.type == "restaurant" ? props.data.restaurantID : props.data.transportID
+    console.log(props.data)
+    return (<>
+        <a  style={{textDecoration: "none", color: "black"}} href={`${props.type}/${id}`}>
+            <Container className="py-3 px-1 my-4"
+                       style={{
+                           border: "4px solid #159895",
+                           borderRadius: "1em",
+                           boxShadow: "0 3px 5px #159895",
+                           maxWidth: "90%",
+                       }}>
+                <Row>
+                    <Col className="d-flex justify-content-center">
+                        <Image
+                            src="https://www.imgacademy.com/sites/default/files/legacyhotel.jpg"
+                            style={{
+                                height: "8em",
+                                borderRadius: "1em",
+                                boxShadow: "0 4px 20px lightblue",
+                                maxWidth: "100%",
+                            }}
+                        ></Image>
+                    </Col>
+                    <Col>
+                        <h2 style={{textAlign: "left"}}>{name}</h2>
+                        {props.type === "hotel" && (<>
+                            <h5 style={{textAlign: "left"}}>{props.data.hotelLocation}</h5>
+                            <h5 style={{textAlign: "left"}}>{props.data.hotelEmail}</h5>
+                        </>)}
+                        {props.type === "restaurant" && (<>
+                            <h5 style={{textAlign: "left"}}>{props.data.restaurantLocation}</h5>
+                            <h5 style={{textAlign: "left"}}>{props.data.cousineType} кујна</h5>
+                        </>)}
+                        {props.type === "transport" && (<>
+                            <h5 style={{textAlign: "left"}}>{props.data.carBrand}</h5>
+                            <h5 style={{textAlign: "left"}}>{props.data.carPlate}</h5>
+                        </>)}
+                    </Col>
+
+                    <Col className="d-flex flex-column justify-content-center align-content-center">
+                        <AddImages type={props.type} Id={id} />
+                    </Col>
+                    <Col className="d-flex justify-content-center align-content-center">
+                  <span
+                      style={{
+                          backgroundColor: "#159895",
+                          padding: "0.75em",
+                          fontWeight: "bold",
+                          fontSize: "1.8rem",
+                          borderRadius: "0.75em",
+                          color: "white",
+                          margin: "auto"
+                      }}
+                  >
+                    9.1
+                  </span>
+                    </Col>
+                </Row>
+            </Container>
+        </a>
+    </>)
+}
+
+export default ResourceListing;
Index: frontend/src/Components/Resources/ResourcesTab.js
===================================================================
--- frontend/src/Components/Resources/ResourcesTab.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Resources/ResourcesTab.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,119 @@
+import React, {useTransition} from "react";
+import {Container, Col, Row, Image, Nav, Tab} from "react-bootstrap";
+import {useState} from "react";
+import {FaTaxi, FaHotel} from "react-icons/fa";
+import {MdRestaurant} from "react-icons/md";
+import AddNew from "./AddNew";
+import ResourceListing from "./ResourceListing";
+import {Link} from "react-router-dom";
+import useGet from "../Hooks/useGet";
+
+function ResourcesTab(props) {
+    const [activeTab, setActiveTab] = useState(props.tab);
+    const userId = JSON.parse(localStorage.getItem("user")).userId;
+    const {data, setData, isLoading, getData, setChanged} = useGet(`${props.tab}/user/${userId}`);
+
+    const handleSelect = (eventKey) => {
+        setActiveTab(eventKey);
+        props.refresh(eventKey);
+    };
+
+    return (
+        <Container className="rounded-5">
+            <Tab.Container
+                activeKey={activeTab}
+                onSelect={handleSelect}
+                className="bg-dark rounded-5"
+            >
+                <Nav
+                    fill
+                    variant="tabs"
+                    className="bg-body rounded-top-5"
+                    activeKey="/hotel"
+                    id="tab_item"
+                >
+                    <Nav.Item className="tab_item rounded-5">
+                        <Nav.Link href="/resources/hotel" className="text-left rounded-5">
+              <span className="ikona">
+                <FaHotel
+                    color="#159895"
+                    style={{lineHeight: "100em"}}
+                    size={"1.5em"}
+                    className="mx-3"
+                />
+              </span>
+                            <span className="ikona">Сместувања</span>
+                        </Nav.Link>
+                    </Nav.Item>
+                    <Nav.Item className="tab_item">
+                        <Nav.Link href="/resources/restaurant">
+              <span className="ikona">
+                <MdRestaurant color="#159895" size={"1.5em"} className="mx-3"/>
+              </span>
+                            <span className="ikona">Ресторани</span>
+                        </Nav.Link>
+                    </Nav.Item>
+                    <Nav.Item className="tab_item rounded-5">
+                        <Nav.Link
+                            href="/resources/transport"
+                            className="text-left rounded-5"
+                        >
+              <span className="ikona">
+                <FaTaxi color="#159895" size={"1.5em"} className="mx-3"/>
+              </span>
+                            <span className="ikona">Превоз</span>
+                        </Nav.Link>
+                    </Nav.Item>
+                </Nav>
+
+                <Tab.Content className="py-5 px-3 border rounded-bottom-5 bg-light">
+                    <Tab.Pane eventKey="/hotel" key="hotelPane">
+                        {props.tab == "/hotel" && !isLoading && data != null &&
+                            data.map((hotel) => {
+                                return (
+                                    //<Link style={{textDecoration: "none"}} key={hotel.hotelId} to={"/resources/hotel/" + hotel.hotelId}>
+                                    <ResourceListing
+                                        on
+                                        key={hotel.hotelId}
+                                        id={hotel.hotelId}
+                                        type="hotel"
+                                        data={hotel}
+                                    />
+                                    //</Link>
+                                );
+                            })}
+                        <AddNew type="hotel" refresh={setChanged}/>
+                    </Tab.Pane>
+                    <Tab.Pane eventKey="/restaurant" key="restaurantPane">
+                        {props.tab == "/restaurant" && !isLoading && data != null &&
+                            data.map((restaurant) => {
+                                return (
+                                    <ResourceListing
+                                        key={restaurant.restaurantID}
+                                        type="restaurant"
+                                        data={restaurant}
+                                    />);
+                            })}
+                        <AddNew type="restaurant" refresh={setChanged}/>
+                    </Tab.Pane>
+                    <Tab.Pane eventKey="/transport" key="transportPane">
+                        {props.tab == "/transport" && !isLoading && data.length > 0 &&
+                            data.map((transport) => {
+                                return (
+                                    <ResourceListing
+                                        key={transport.transportId}
+                                        id={transport.transportId}
+                                        type="transport"
+                                        data={transport}
+                                    />
+                                );
+                            })}
+                        <AddNew type="transport" refresh={setChanged}/>
+                    </Tab.Pane>
+                </Tab.Content>
+            </Tab.Container>
+        </Container>
+    );
+}
+
+export default ResourcesTab;
