Final

package.json

@@ -16,7 +16,9 @@
     "history": "^5.3.0",
     "json-server": "^0.17.3",
     "react": "^18.2.0",
+    "react-confirm-alert": "^3.0.6",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.8.0",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.10.0",
     "react-scripts": "^5.0.1",

server/server/src/modules/Cupons/routes.ts

@@ -6,8 +6,8 @@ import CupomValidation from "./validations";
 const cuponsRoutes = Router();
 
 
-cuponsRoutes.get("/cupons",Auth.verifyAdmin ,CupomController.getAll);
-cuponsRoutes.get("/cupons/:id",Auth.verifyUser,CupomValidation.getOne,CupomController.getOne);
+cuponsRoutes.get("/cupons" ,CupomController.getAll);
+cuponsRoutes.get("/cupons/:id",CupomValidation.getOne,CupomController.getOne);
 cuponsRoutes.post("/cupons", Auth.verifyAdmin,CupomValidation.create, CupomController.create);
 cuponsRoutes.put("/cupons/:id",Auth.verifyAdmin,CupomValidation.update,CupomController.update);
 cuponsRoutes.delete("/cupons/:id",Auth.verifyAdmin,CupomValidation.destroy,CupomController.delete);

server/server/src/modules/Usuarios/routes.ts

@@ -7,7 +7,7 @@ import Auth from "../../middlewares/authToken";
 const usuarioRoutes = Router();
 
 
-usuarioRoutes.get("/usuarios",Auth.verifyAdmin, UsuarioController.getAll);
+usuarioRoutes.get("/usuarios",Auth.verifyUser, UsuarioController.getAll);
 usuarioRoutes.get("/usuarios/:id",Auth.verifyUser,UsuarioValidation.getOne,UsuarioController.getOne);
 usuarioRoutes.post("/usuarios",UsuarioValidation.create, UsuarioController.create);
 usuarioRoutes.post("/usuariosadmin",Auth.verifyAdmin, UsuarioValidation.create, UsuarioController.createAdmin);

src/components/adminfetch/Category/get/index.tsx

@@ -63,7 +63,7 @@ function CategoryList() {
   return (
     <CategoriasTable>
       <div>
-        <h2>Categories</h2>
+
         <table>
           <thead>
             <tr>
@@ -86,8 +86,9 @@ function CategoryList() {
           </tbody>
         </table>
         <div>
+          <h2>Create Category</h2>
           <input type="text" value={newCategoryName} onChange={(event) => setNewCategoryName(event.target.value)} />
-          <button onClick={handleCreate}>Create Category</button>
+          <button onClick={handleCreate}>Create</button>
         </div>
       </div>
     </CategoriasTable>

src/components/adminfetch/orders/create/index.tsx

@@ -3,6 +3,8 @@ import { useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { api } from "../../../../services/api";
 import { useEffect } from "react";
+import { CreateOrderPage } from "./style";
+import { NavLink } from "react-router-dom";
 
 function CreateOrder() {
   const [productList, setProductList] = useState([
@@ -65,7 +67,7 @@ function CreateOrder() {
   };
 
   return (
-    <div>
+    <CreateOrderPage>
       <h2>Create Order</h2>
       {errorMessage && <p>{errorMessage}</p>}
       <form onSubmit={handleSubmit}>
@@ -114,7 +116,8 @@ function CreateOrder() {
         </div>
         <button type="submit">Create Order</button>
       </form>
-    </div>
+      <NavLink to="/admin" ><button>Painel de Controle</button></NavLink>
+    </CreateOrderPage>
   );
 }
 

src/components/adminfetch/orders/create/style.ts

@@ -0,0 +1,107 @@
+import styled from "styled-components";
+
+export const CreateOrderPage = styled.div`
+display: flex;
+flex-direction: column;
+font-family: 'roboto', sans-serif;
+background-color: #f7f7f7;
+margin: 0;
+align-items: center;
+align-content: center;
+margin: 20px;
+padding: 20px;
+
+
+div {
+display: flex;
+flex-direction: column;
+background-color: #fff;
+width: 70vw;
+
+border-radius: 5px;
+box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+align-items: center;
+h2{
+
+padding: 20px;
+font-size: 1.8rem;
+margin-bottom: 10px;
+}
+}
+
+button {
+background-color: #007bff;
+color: #fff;
+border: none;
+padding: 10px;
+border-radius: 5px;
+cursor: pointer;
+}
+
+
+
+form {
+display: flex;
+flex-direction: column;
+align-items: center;
+margin-top: 2rem;
+font-family: 'roboto', 'sans-serif';
+}
+label {
+    font-size: 1rem;
+    color: #222;
+    margin-top: 15px;
+    margin-bottom: 0.5rem;
+    padding-right: 220px;
+    color: black;
+    font-weight: 600;
+    
+   
+  }
+  
+  input {
+    padding: 0.5rem;
+    margin-bottom: 1rem;
+    border: 2px solid #ccc;
+    border-radius: 5px;
+    font-size: 1rem;
+    padding-left: 15px;
+    color: black;
+    font-weight: 500;
+    width: 300px;
+    
+    &:focus {
+      outline: none;
+      border-color: #0077FF;
+    }
+  }
+  
+
+  button {
+    padding: 0.5rem 2rem;
+    font-size: 1.5rem;
+    background-color: blue;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+    margin-right: 4rem;
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+
+    &:hover {
+        background-color: #0057C1;
+      }
+      
+      &:last-child {
+        margin-right: 0;
+      }
+    }   
+
+@media (max-width: 768px) {
+
+
+
+}
+`;

src/components/adminfetch/orders/get/style.ts

@@ -2,7 +2,60 @@ import styled from "styled-components";
 
 export const PedidosTable = styled.div`
 
-img {
- width: 50px
-}
+margin: 30px;
+
+table {
+            width: 90vw;
+            border-collapse: collapse;
+            margin-bottom: 1rem;
+            color: black;
+            background-color: grey;
+            
+            th, td {
+              border: 1px solid #ddd;
+              padding: 0.5rem;
+              text-align: center;
+              
+            }
+            
+            th {
+              background-color: grey;
+              color: #fff;
+              background-color: black;
+              position: sticky;
+              top: 0;
+            }
+            
+            tbody tr:nth-child(even) {
+              background-color: #f2f2f2;
+            }
+            
+            img {
+              max-width: 80px;
+              height: auto;
+            }
+            
+            table {
+              width: 100%;
+              margin-bottom: 0;
+              background-color: grey;
+              
+              th, td {
+                border: none;
+                padding: 10px;
+                text-align: center;
+              }
+              
+              th {
+                font-weight: bold;
+              }
+              
+              td {
+                img {
+                  max-width: 50px;
+                }
+              }
+            }
+          }
+  
 `

src/components/adminfetch/orders/update/index.tsx

@@ -2,6 +2,8 @@ import { useState, useEffect } from "react";
 import { useParams, useNavigate } from "react-router-dom";
 import { api } from "../../../../services/api";
 import { useSelector } from "react-redux";
+import { UpdateOrderPage } from "./style";
+import { NavLink } from "react-router-dom";
 
 function UpdateOrder() {
   const { id } = useParams();
@@ -53,8 +55,8 @@ function UpdateOrder() {
   };
 
   return (
-    <div>
-      <h2>Edit Pedido {id}</h2>
+    <UpdateOrderPage>
+      <h2>Edit Order {id}</h2>
       <form onSubmit={handleSubmit}>
         <label>
           Valor:
@@ -66,7 +68,8 @@ function UpdateOrder() {
         </label>
         <button type="submit">Submit</button>
       </form>
-    </div>
+      <NavLink to="/admin" ><button>Painel de Controle</button></NavLink>
+    </UpdateOrderPage>
   );
 }