Creating admin pages, new brand API endpoint

README.md

@@ -129,6 +129,20 @@ The application host it's data in a SQLite database. The access is managed by an
 > | `200` | `application/json` | `Array<Categories>` |
 </details>
 
+
+<details>
+<summary><code><span style="color:#70AFFD"><b>GET</b></span></code> <code><b>/brands</b></code> <code> (Get all Brands)</code>
+</summary>
+
+##### Parameters
+> None
+
+##### Responses
+> | http code | content-type | response |
+> | :---: | --- | --- |
+> | `200` | `application/json` | `Array<Brand>` |
+</details>
+
 ---
 
 #### Creating new

misc/database.drawio

@@ -1,6 +1,6 @@
 <mxfile host="Electron" agent="Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/24.7.8 Chrome/128.0.6613.36 Electron/32.0.1 Safari/537.36" version="24.7.8">
   <diagram name="Page-1" id="WevClHWmhzPAQ7FDN5po">
-    <mxGraphModel dx="3327" dy="570" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
+    <mxGraphModel dx="3073" dy="486" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
       <root>
         <mxCell id="0" />
         <mxCell id="1" parent="0" />
@@ -214,10 +214,10 @@
           </mxGeometry>
         </mxCell>
         <mxCell id="_UF3kFiP3G3Olu9frHUj-12" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;images: Array&amp;lt;String&amp;gt;&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" parent="1" vertex="1">
-          <mxGeometry x="-200" y="720" width="160" height="30" as="geometry" />
+          <mxGeometry x="-200" y="750" width="160" height="30" as="geometry" />
         </mxCell>
         <mxCell id="_UF3kFiP3G3Olu9frHUj-13" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;specs: Array&amp;lt;String&amp;gt;&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" parent="1" vertex="1">
-          <mxGeometry x="-200" y="690" width="160" height="30" as="geometry" />
+          <mxGeometry x="-200" y="720" width="160" height="30" as="geometry" />
         </mxCell>
         <mxCell id="_UF3kFiP3G3Olu9frHUj-14" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;inStock: Number&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" parent="1" vertex="1">
           <mxGeometry x="-200" y="660" width="160" height="30" as="geometry" />
@@ -350,30 +350,30 @@
         <mxCell id="_UF3kFiP3G3Olu9frHUj-68" value="" style="sketch=0;pointerEvents=1;shadow=0;dashed=0;html=1;strokeColor=none;labelPosition=center;verticalLabelPosition=bottom;verticalAlign=top;outlineConnect=0;align=center;shape=mxgraph.office.security.key_permissions;fillColor=#CCCCCC;" parent="1" vertex="1">
           <mxGeometry x="-60.04000000000002" y="455" width="9.43" height="20" as="geometry" />
         </mxCell>
-        <mxCell id="HkhJ3mx6TUrJ336WyDT4-1" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;paymentId: Number&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" vertex="1" parent="1">
+        <mxCell id="HkhJ3mx6TUrJ336WyDT4-1" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;paymentId: Number&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" parent="1" vertex="1">
           <mxGeometry x="-680" y="510" width="160" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="HkhJ3mx6TUrJ336WyDT4-2" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;addressId: Number&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" vertex="1" parent="1">
+        <mxCell id="HkhJ3mx6TUrJ336WyDT4-2" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;addressId: Number&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" parent="1" vertex="1">
           <mxGeometry x="-680" y="540" width="160" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="HkhJ3mx6TUrJ336WyDT4-3" value="" style="endArrow=open;endSize=12;startArrow=diamondThin;startSize=14;startFill=0;edgeStyle=orthogonalEdgeStyle;entryX=1;entryY=0.5;entryDx=0;entryDy=0;exitX=0;exitY=0.5;exitDx=0;exitDy=0;" edge="1" parent="1" source="HkhJ3mx6TUrJ336WyDT4-1" target="_UF3kFiP3G3Olu9frHUj-28">
+        <mxCell id="HkhJ3mx6TUrJ336WyDT4-3" value="" style="endArrow=open;endSize=12;startArrow=diamondThin;startSize=14;startFill=0;edgeStyle=orthogonalEdgeStyle;entryX=1;entryY=0.5;entryDx=0;entryDy=0;exitX=0;exitY=0.5;exitDx=0;exitDy=0;" parent="1" source="HkhJ3mx6TUrJ336WyDT4-1" target="_UF3kFiP3G3Olu9frHUj-28" edge="1">
           <mxGeometry x="389.35999999999996" y="350" as="geometry">
             <mxPoint x="-650" y="680" as="sourcePoint" />
             <mxPoint x="-770.96" y="570" as="targetPoint" />
             <Array as="points" />
           </mxGeometry>
         </mxCell>
-        <mxCell id="HkhJ3mx6TUrJ336WyDT4-4" value="0..n" style="resizable=0;align=left;verticalAlign=top;labelBackgroundColor=#ffffff;fontSize=10;strokeColor=#003366;shadow=1;fillColor=#D4E1F5;fontColor=#003366" connectable="0" vertex="1" parent="HkhJ3mx6TUrJ336WyDT4-3">
+        <mxCell id="HkhJ3mx6TUrJ336WyDT4-4" value="0..n" style="resizable=0;align=left;verticalAlign=top;labelBackgroundColor=#ffffff;fontSize=10;strokeColor=#003366;shadow=1;fillColor=#D4E1F5;fontColor=#003366" parent="HkhJ3mx6TUrJ336WyDT4-3" connectable="0" vertex="1">
           <mxGeometry x="-1" relative="1" as="geometry">
             <mxPoint x="-24" y="-30" as="offset" />
           </mxGeometry>
         </mxCell>
-        <mxCell id="HkhJ3mx6TUrJ336WyDT4-5" value="1" style="resizable=0;align=right;verticalAlign=top;labelBackgroundColor=#ffffff;fontSize=10;strokeColor=#003366;shadow=1;fillColor=#D4E1F5;fontColor=#003366" connectable="0" vertex="1" parent="HkhJ3mx6TUrJ336WyDT4-3">
+        <mxCell id="HkhJ3mx6TUrJ336WyDT4-5" value="1" style="resizable=0;align=right;verticalAlign=top;labelBackgroundColor=#ffffff;fontSize=10;strokeColor=#003366;shadow=1;fillColor=#D4E1F5;fontColor=#003366" parent="HkhJ3mx6TUrJ336WyDT4-3" connectable="0" vertex="1">
           <mxGeometry x="1" relative="1" as="geometry">
             <mxPoint x="11" y="-31" as="offset" />
           </mxGeometry>
         </mxCell>
-        <mxCell id="HkhJ3mx6TUrJ336WyDT4-6" value="" style="endArrow=open;endSize=12;startArrow=diamondThin;startSize=14;startFill=0;edgeStyle=orthogonalEdgeStyle;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="HkhJ3mx6TUrJ336WyDT4-2" target="_UF3kFiP3G3Olu9frHUj-21">
+        <mxCell id="HkhJ3mx6TUrJ336WyDT4-6" value="" style="endArrow=open;endSize=12;startArrow=diamondThin;startSize=14;startFill=0;edgeStyle=orthogonalEdgeStyle;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="HkhJ3mx6TUrJ336WyDT4-2" target="_UF3kFiP3G3Olu9frHUj-21" edge="1">
           <mxGeometry x="389.35999999999996" y="350" as="geometry">
             <mxPoint x="-935.44" y="680" as="sourcePoint" />
             <mxPoint x="-670" y="720" as="targetPoint" />
@@ -383,17 +383,17 @@
             </Array>
           </mxGeometry>
         </mxCell>
-        <mxCell id="HkhJ3mx6TUrJ336WyDT4-7" value="0..n" style="resizable=0;align=left;verticalAlign=top;labelBackgroundColor=#ffffff;fontSize=10;strokeColor=#003366;shadow=1;fillColor=#D4E1F5;fontColor=#003366" connectable="0" vertex="1" parent="HkhJ3mx6TUrJ336WyDT4-6">
+        <mxCell id="HkhJ3mx6TUrJ336WyDT4-7" value="0..n" style="resizable=0;align=left;verticalAlign=top;labelBackgroundColor=#ffffff;fontSize=10;strokeColor=#003366;shadow=1;fillColor=#D4E1F5;fontColor=#003366" parent="HkhJ3mx6TUrJ336WyDT4-6" connectable="0" vertex="1">
           <mxGeometry x="-1" relative="1" as="geometry">
             <mxPoint x="-23" y="-26" as="offset" />
           </mxGeometry>
         </mxCell>
-        <mxCell id="HkhJ3mx6TUrJ336WyDT4-8" value="1" style="resizable=0;align=right;verticalAlign=top;labelBackgroundColor=#ffffff;fontSize=10;strokeColor=#003366;shadow=1;fillColor=#D4E1F5;fontColor=#003366" connectable="0" vertex="1" parent="HkhJ3mx6TUrJ336WyDT4-6">
+        <mxCell id="HkhJ3mx6TUrJ336WyDT4-8" value="1" style="resizable=0;align=right;verticalAlign=top;labelBackgroundColor=#ffffff;fontSize=10;strokeColor=#003366;shadow=1;fillColor=#D4E1F5;fontColor=#003366" parent="HkhJ3mx6TUrJ336WyDT4-6" connectable="0" vertex="1">
           <mxGeometry x="1" relative="1" as="geometry">
             <mxPoint x="13" y="-30" as="offset" />
           </mxGeometry>
         </mxCell>
-        <mxCell id="HkhJ3mx6TUrJ336WyDT4-9" value="" style="endArrow=open;endSize=12;startArrow=diamondThin;startSize=14;startFill=0;edgeStyle=orthogonalEdgeStyle;entryX=0;entryY=0.5;entryDx=0;entryDy=0;exitX=0;exitY=0.5;exitDx=0;exitDy=0;" edge="1" parent="1" source="_UF3kFiP3G3Olu9frHUj-38" target="_UF3kFiP3G3Olu9frHUj-41">
+        <mxCell id="HkhJ3mx6TUrJ336WyDT4-9" value="" style="endArrow=open;endSize=12;startArrow=diamondThin;startSize=14;startFill=0;edgeStyle=orthogonalEdgeStyle;entryX=0;entryY=0.5;entryDx=0;entryDy=0;exitX=0;exitY=0.5;exitDx=0;exitDy=0;" parent="1" source="_UF3kFiP3G3Olu9frHUj-38" target="_UF3kFiP3G3Olu9frHUj-41" edge="1">
           <mxGeometry x="389.35999999999996" y="350" as="geometry">
             <mxPoint x="-1130" y="865" as="sourcePoint" />
             <mxPoint x="-1230" y="425" as="targetPoint" />
@@ -403,34 +403,37 @@
             </Array>
           </mxGeometry>
         </mxCell>
-        <mxCell id="HkhJ3mx6TUrJ336WyDT4-10" value="0..n" style="resizable=0;align=left;verticalAlign=top;labelBackgroundColor=#ffffff;fontSize=10;strokeColor=#003366;shadow=1;fillColor=#D4E1F5;fontColor=#003366" connectable="0" vertex="1" parent="HkhJ3mx6TUrJ336WyDT4-9">
+        <mxCell id="HkhJ3mx6TUrJ336WyDT4-10" value="0..n" style="resizable=0;align=left;verticalAlign=top;labelBackgroundColor=#ffffff;fontSize=10;strokeColor=#003366;shadow=1;fillColor=#D4E1F5;fontColor=#003366" parent="HkhJ3mx6TUrJ336WyDT4-9" connectable="0" vertex="1">
           <mxGeometry x="-1" relative="1" as="geometry">
             <mxPoint x="-25" y="-31" as="offset" />
           </mxGeometry>
         </mxCell>
-        <mxCell id="HkhJ3mx6TUrJ336WyDT4-11" value="1" style="resizable=0;align=right;verticalAlign=top;labelBackgroundColor=#ffffff;fontSize=10;strokeColor=#003366;shadow=1;fillColor=#D4E1F5;fontColor=#003366" connectable="0" vertex="1" parent="HkhJ3mx6TUrJ336WyDT4-9">
+        <mxCell id="HkhJ3mx6TUrJ336WyDT4-11" value="1" style="resizable=0;align=right;verticalAlign=top;labelBackgroundColor=#ffffff;fontSize=10;strokeColor=#003366;shadow=1;fillColor=#D4E1F5;fontColor=#003366" parent="HkhJ3mx6TUrJ336WyDT4-9" connectable="0" vertex="1">
           <mxGeometry x="1" relative="1" as="geometry">
             <mxPoint x="-6" y="-30" as="offset" />
           </mxGeometry>
         </mxCell>
-        <mxCell id="HkhJ3mx6TUrJ336WyDT4-12" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;privilegeBuy: Bool&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" vertex="1" parent="1">
+        <mxCell id="HkhJ3mx6TUrJ336WyDT4-12" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;privilegeBuy: Bool&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" parent="1" vertex="1">
           <mxGeometry x="-1159.47" y="760" width="160" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="HkhJ3mx6TUrJ336WyDT4-13" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;privilegeAdminPanel: Bool&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" vertex="1" parent="1">
+        <mxCell id="HkhJ3mx6TUrJ336WyDT4-13" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;privilegeAdminPanel: Bool&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" parent="1" vertex="1">
           <mxGeometry x="-1159.47" y="790" width="160" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="HkhJ3mx6TUrJ336WyDT4-14" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;email: String&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" vertex="1" parent="1">
+        <mxCell id="HkhJ3mx6TUrJ336WyDT4-14" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;email: String&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" parent="1" vertex="1">
           <mxGeometry x="-1160.1499999999999" y="510" width="160" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="HkhJ3mx6TUrJ336WyDT4-15" value="1" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;rotation=0;gradientColor=#223548;strokeColor=none;gradientDirection=east;fillColor=#5b738b;rounded=0;pointerEvents=0;fontFamily=Helvetica;fontSize=16;fontColor=#FFFFFF;spacingTop=4;spacingBottom=4;spacingLeft=4;spacingRight=4;points=[];fontStyle=1" vertex="1" parent="1">
+        <mxCell id="HkhJ3mx6TUrJ336WyDT4-15" value="1" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;rotation=0;gradientColor=#223548;strokeColor=none;gradientDirection=east;fillColor=#5b738b;rounded=0;pointerEvents=0;fontFamily=Helvetica;fontSize=16;fontColor=#FFFFFF;spacingTop=4;spacingBottom=4;spacingLeft=4;spacingRight=4;points=[];fontStyle=1" parent="1" vertex="1">
           <mxGeometry x="-1025.3500000000001" y="515" width="20" height="20" as="geometry" />
         </mxCell>
-        <mxCell id="HkhJ3mx6TUrJ336WyDT4-16" value="" style="sketch=0;pointerEvents=1;shadow=0;dashed=0;html=1;strokeColor=none;labelPosition=center;verticalLabelPosition=bottom;verticalAlign=top;outlineConnect=0;align=center;shape=mxgraph.office.security.key_permissions;fillColor=#CCCCCC;" vertex="1" parent="1">
+        <mxCell id="HkhJ3mx6TUrJ336WyDT4-16" value="" style="sketch=0;pointerEvents=1;shadow=0;dashed=0;html=1;strokeColor=none;labelPosition=center;verticalLabelPosition=bottom;verticalAlign=top;outlineConnect=0;align=center;shape=mxgraph.office.security.key_permissions;fillColor=#CCCCCC;" parent="1" vertex="1">
           <mxGeometry x="-539.9100000000001" y="515" width="9.43" height="20" as="geometry" />
         </mxCell>
-        <mxCell id="HkhJ3mx6TUrJ336WyDT4-17" value="" style="sketch=0;pointerEvents=1;shadow=0;dashed=0;html=1;strokeColor=none;labelPosition=center;verticalLabelPosition=bottom;verticalAlign=top;outlineConnect=0;align=center;shape=mxgraph.office.security.key_permissions;fillColor=#CCCCCC;" vertex="1" parent="1">
+        <mxCell id="HkhJ3mx6TUrJ336WyDT4-17" value="" style="sketch=0;pointerEvents=1;shadow=0;dashed=0;html=1;strokeColor=none;labelPosition=center;verticalLabelPosition=bottom;verticalAlign=top;outlineConnect=0;align=center;shape=mxgraph.office.security.key_permissions;fillColor=#CCCCCC;" parent="1" vertex="1">
           <mxGeometry x="-539.9100000000001" y="545" width="9.43" height="20" as="geometry" />
         </mxCell>
+        <mxCell id="kvoVpLwNqEyf5DUQliMr-1" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;offered: bool&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" vertex="1" parent="1">
+          <mxGeometry x="-200" y="690" width="160" height="30" as="geometry" />
+        </mxCell>
       </root>
     </mxGraphModel>
   </diagram>

software/backend/data/accounts.json

@@ -122,7 +122,7 @@
           "iban": "DE41500105172184936679"
         }
       ],
-      "accountRoleId": 1
+      "accountRoleId": 2
     },
     {
       "id": 4,

software/backend/data/products.json

@@ -27,7 +27,8 @@
         "thinkpad-t14s-6.avif",
         "thinkpad-t14s-7.avif"
       ],
-      "inStock": 5
+      "inStock": 5,
+      "offered": true
     },
     {
       "id": 1,
@@ -52,7 +53,8 @@
         "puma-t-shirt-men-4.jpg",
         "puma-t-shirt-men-5.jpg"
       ],
-      "inStock": 30
+      "inStock": 30,
+      "offered": true
     },
     {
       "id": 2,
@@ -78,7 +80,8 @@
         "puma-t-shirt-woman-5.jpg",
         "puma-t-shirt-woman-6.jpg"
       ],
-      "inStock": 30
+      "inStock": 30,
+      "offered": true
     },
     {
       "id": 3,
@@ -108,7 +111,8 @@
         "1984-2.webp",
         "1984-3.webp"
       ],
-      "inStock": 30
+      "inStock": 30,
+      "offered": true
     },
     {
       "id": 4,
@@ -135,7 +139,8 @@
         "brave-new-world-1.jpg",
         "brave-new-world-2.jpg"
       ],
-      "inStock": 30
+      "inStock": 30,
+      "offered": true
     },
     {
       "id": 5,
@@ -160,7 +165,8 @@
         "dell-xps-desktop-5.jpg",
         "dell-xps-desktop-6.jpg"
       ],
-      "inStock": 10
+      "inStock": 10,
+      "offered": true
     },
     {
       "id": 6,
@@ -198,7 +204,8 @@
         "fender-player-ii-jazz-bass-rw-3ts-4.jpg",
         "fender-player-ii-jazz-bass-rw-3ts-5.jpg"
       ],
-      "inStock": 15
+      "inStock": 15,
+      "offered": true
     },
     {
       "id": 7,
@@ -239,7 +246,8 @@
         "esp-lts-iron-cross-sw-5.jpg",
         "esp-lts-iron-cross-sw-6.jpg"
       ],
-      "inStock": 0
+      "inStock": 0,
+      "offered": true
     },
     {
       "id": 8,
@@ -273,7 +281,8 @@
         "pearl-decade-maple-standard-black-5.jpg",
         "pearl-decade-maple-standard-black-6.jpg"
       ],
-      "inStock": 4
+      "inStock": 4,
+      "offered": true
     },
     {
       "id": 9,
@@ -299,7 +308,8 @@
         "macbook-air-4.avif",
         "macbook-air-5.avif"
       ],
-      "inStock": 18
+      "inStock": 18,
+      "offered": false
     }
   ]
 }

software/backend/models/product.model.ts

@@ -31,6 +31,9 @@ export class Product extends Model {
   @Column
   inStock: number
 
+  @Column
+  offered: boolean
+
   @Column({
     type: DataType.STRING,
     get(): Array<string> {

software/backend/routes/brand.routes.ts

@@ -0,0 +1,12 @@
+import { Brand } from "../models/brand.model"
+import { Request, Router, Response } from "express"
+
+export const brand = Router()
+
+// Get all brands
+brand.get("/", (req: Request, res: Response) => {
+  Brand.findAll()
+    .then(brands => {
+      res.status(200).json(brands)
+    })
+})

software/backend/server.ts

@@ -7,6 +7,7 @@ import { category } from './routes/category.routes'
 import { product } from './routes/product.routes'
 import { order } from './routes/order.routes'
 import { account } from './routes/account.routes'
+import { brand } from './routes/brand.routes'
 
 const app = express()
 const port = 3000
@@ -35,6 +36,7 @@ app.use("/categories", category)
 app.use("/products", product)
 app.use("/orders", order)
 app.use("/accounts", account)
+app.use("/brands", brand)
 
 
 // Start server

software/src/App.vue

@@ -5,13 +5,11 @@ import { ref, watch } from 'vue';
 import vuetify from './plugins/vuetify';
 import navigationItems from './components/navigationItems.vue';
 import { useProductStore } from './data/stores/productStore';
-import { useCategoryStore } from './data/stores/categoryStore';
 import { usePreferencesStore } from './data/stores/preferencesStore';
 import { useFeedbackStore } from './data/stores/feedbackStore';
 
 const preferencesStore = usePreferencesStore()
 const productStore = useProductStore()
-const categoryStore = useCategoryStore()
 const feedbackStore = useFeedbackStore()
 const theme = useTheme()
 const navRail = ref(vuetify.display.mobile)
@@ -19,7 +17,8 @@ const navRail = ref(vuetify.display.mobile)
 theme.global.name.value = preferencesStore.theme
 
 productStore.fetchAllProducts()
-categoryStore.fetchAllCategories()
+productStore.fetchAllCategories()
+productStore.fetchAllBrands()
 
 // Global watcher
 watch(() => preferencesStore.language, () => {

software/src/components/navigationItems.vue

@@ -61,5 +61,21 @@ const navRail = defineModel("navRail", { type: Boolean })
     <v-list-item :title="$t('menu.helpInstructions')" prepend-icon="mdi-chat-question" to="/help" link />
     <v-list-item :title="$t('menu.scoreBoard')" prepend-icon="mdi-podium-gold" to="/scoreBoard" link />
     <v-list-item :title="$t('menu.preferences')" prepend-icon="mdi-cog" to="/preferences" link />
+
+
+    <div v-if="accountStore.userAccount.accountRole.privilegeAdminPanel">
+      <v-divider />
+
+      <v-list-subheader>
+        <div v-if="!navRail">{{ $t('menu.admin.admin') }}</div>
+        <div v-else></div>
+      </v-list-subheader>
+
+      <v-list-item :title="$t('menu.admin.dashboard')" prepend-icon="mdi-view-dashboard" to="/admin/dashboard" link />
+      <v-list-item :title="$t('menu.admin.categories')" prepend-icon="mdi-label" to="/admin/categories" link />
+      <v-list-item :title="$t('menu.admin.products')" prepend-icon="mdi-store-cog" to="/admin/products" link />
+      <v-list-item :title="$t('menu.admin.accounts')" prepend-icon="mdi-account-multiple" to="/admin/accounts" link />
+    </div>
+    
   </v-list>
 </template>

software/src/data/api/brandApi.ts

@@ -0,0 +1,7 @@
+import axios from "axios";
+
+let BASE_URL = "http://localhost:3000/brands"
+
+export async function getAllBrands() {
+  return await axios.get(BASE_URL)
+}

software/src/data/models/productModel.ts

@@ -10,7 +10,8 @@ export class ProductModel {
   price: number = 0
   discount: number = 0
   rating: number = 1
-  inStock: number
+  inStock: number = 0
+  offered: boolean = true
   specs: Array<string> = []
   images: Array<string> = [""]
 }

software/src/data/stores/categoryStore.ts

@@ -1,25 +0,0 @@
-import { useLocalStorage } from "@vueuse/core";
-import { defineStore } from "pinia";
-import { CategoryModel } from "../models/categoryModel";
-import { getAllCategories } from "../api/categoryApi";
-
-export const useCategoryStore = defineStore("categoryStore", {
-  state: () => ({
-    categories: useLocalStorage<Array<CategoryModel>>("hackmycart/categoryStore/categories", [])
-  }),
-
-  actions: {
-    async fetchAllCategories() {
-      await getAllCategories()
-        .then(categories => {
-          this.categories = categories.data
-        })
-    },
-
-    getProductById(id: number): CategoryModel {
-      return this.categories.find(category => 
-        category.id === id
-      )
-    }
-  }
-})

software/src/data/stores/productStore.ts

@@ -4,6 +4,9 @@ import { getAllProducts } from "../api/productApi";
 import { SortOrder } from "../enums/sortOrderEnum";
 import { CategoryModel } from "../models/categoryModel";
 import { ProductModel } from "../models/productModel";
+import { BrandModel } from "../models/brandModel";
+import { getAllCategories } from "../api/categoryApi";
+import { getAllBrands } from "../api/brandApi";
 
 
 export const useProductStore = defineStore("productStore", {
@@ -12,7 +15,9 @@ export const useProductStore = defineStore("productStore", {
     filteredProducts: useLocalStorage<Array<ProductModel>>("hackmycart/productStore/filteredProducts", []),
     sortOrder: useLocalStorage<SortOrder>("hackmycart/productStore/sortOrder", SortOrder.NAMEATOZ),
     filteredCategory: useLocalStorage<CategoryModel>("hackmycart/productStore/filteredCategory", new CategoryModel()),
-    onlyDiscounts: useLocalStorage<Boolean>("hackmycart/productStore/onlyDiscounts", false)
+    onlyDiscounts: useLocalStorage<Boolean>("hackmycart/productStore/onlyDiscounts", false),
+    brands: useLocalStorage<Array<BrandModel>>("hackmycart/productStore/brands", []),
+    categories: useLocalStorage<Array<CategoryModel>>("hackmycart/productStore/categories", [])
   }),
 
   actions: {
@@ -24,6 +29,20 @@ export const useProductStore = defineStore("productStore", {
         })
     },
 
+    async fetchAllCategories() {
+      await getAllCategories()
+        .then(categories => {
+          this.categories = categories.data
+        })
+    },
+
+    async fetchAllBrands() {
+      await getAllBrands()
+        .then(brands => {
+          this.brands = brands.data
+        })
+    },
+
     async filterProducts() {
       if (this.filteredCategory.id == -1 || this.filteredCategory.id == 0) {
         this.filteredProducts = this.products

software/src/locales/de.json

@@ -10,7 +10,14 @@
     "helpInstructions": "Hilfestellung",
     "preferences": "Einstellungen",
     "logout": "Ausloggen",
-    "scoreBoard": "Score Board"
+    "scoreBoard": "Score Board",
+    "admin": {
+      "admin": "Administration",
+      "dashboard": "Dashboard",
+      "categories": "Kategorien",
+      "products": "Produkte",
+      "accounts": "Accounts"
+    }
   },
   "preferences": {
     "pageSetup": "Seiteneinstellungen",
@@ -29,10 +36,12 @@
     "category": "Kategorie",
     "description": "Beschreibung",
     "storedItemsAvailable": "{0} verfügbar",
-    "soldOut": "Ausverkauft"
+    "soldOut": "Ausverkauft",
+    "discount": "Rabatt",
+    "inStock": "Warenbestand"
   },
   "offers": "Angebote",
-  "categories": "Kategorien",
+  "category": "Kategorie | Kategorien",
   "sortBy": "Sortieren nach",
   "quantity": "Anzahl",
   "addToBasket": "Zum Warenkorb hinzufügen",
@@ -133,5 +142,8 @@
   "emailRequired": "E-Mail-Adresse benötigt",
   "tooMuchChars": "Zu lang",
   "digitsAtStartNeeded": "Muss mit einer Zahl beginnen",
-  "wrongIban": "Falsches IBAN Format, nur deutsche IBAN-Nummern erlaubt!"
+  "wrongIban": "Falsches IBAN Format, nur deutsche IBAN-Nummern erlaubt!",
+  "save": "Speichern",
+  "editProduct": "Produkt bearbeiten",
+  "brand": "Marke | Marken"
 }

software/src/locales/en.json

@@ -10,7 +10,14 @@
     "helpInstructions": "Help instructions",
     "preferences": "Preferences",
     "logout": "Logout",
-    "scoreBoard": "Score Board"
+    "scoreBoard": "Score Board",
+    "admin": {
+      "admin": "Administration",
+      "dashboard": "Dashboard",
+      "categories": "Categories",
+      "products": "Products",
+      "accounts": "Accounts"
+    }
   },
   "preferences": {
     "pageSetup": "Page setup",
@@ -29,10 +36,12 @@
     "category": "Category",
     "description": "Description",
     "storedItemsAvailable": "{0} items available",
-    "soldOut": "Sold Out"
+    "soldOut": "Sold Out",
+    "discount": "Discount",
+    "inStock": "In Stock"
   },
   "offers": "Offers",
-  "categories": "Categories",
+  "category": "Category | Categories",
   "sortBy": "Sort by",
   "quantity": "Quantity",
   "addToBasket": "Add to basket",
@@ -133,5 +142,8 @@
   "emailRequired": "E-Mail is required",
   "tooMuchChars": "Too long",
   "digitsAtStartNeeded": "Has to beginn with a number",
-  "wrongIban": "Wrong IBAN format, only German IBANs are allowed!"
+  "wrongIban": "Wrong IBAN format, only German IBANs are allowed!",
+  "save": "Save",
+  "editProduct": "Edit product",
+  "brand": "Brand | Brands"
 }

software/src/pages/accountPage/addressesCard.vue

@@ -12,7 +12,7 @@ const accountStore = useAccountStore()
 <template>
   <card-view 
     icon="mdi-home"
-    :title="$t('account.addresses')"
+    :title="$t('account.address')"
   >
     <v-expansion-panels v-if="accountStore.userAccount.addresses.length > 0">
       <v-expansion-panel

software/src/pages/accountPage/paymentsCard.vue

@@ -12,7 +12,7 @@ const accountStore = useAccountStore()
 <template>
   <card-view 
     icon="mdi-currency-usd"
-    :title="$t('account.payments')"
+    :title="$t('account.payment')"
   >
     <v-expansion-panels
       v-if="accountStore.userAccount.payments.length > 0"

software/src/pages/admin/accountsPage/index.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  Accounts Page
+</template>

software/src/pages/admin/categoriesPage/index.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  Categories Page
+</template>

software/src/pages/admin/dashboardPage/index.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  Admin Dashboard Page
+</template>

software/src/pages/admin/productsPage/index.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import cardView from '@/components/cardView.vue';
+import { ProductModel } from '@/data/models/productModel';
+import { useProductStore } from '@/data/stores/productStore';
+import productEditDialog from './productEditDialog.vue';
+import { ref } from 'vue';
+
+const productStore = useProductStore()
+const editProduct = ref(new ProductModel())
+const showEditProductDialog = ref(false)
+
+const headers = [
+  { title: "Category", value: "category.name" },
+  { title: "Brand", value: "brand.name" },
+  { title: "Name", value: "name" },
+  { title: "Price", value: "price" },
+  { title: "Discount", value: "discount" },
+  { title: "Rating", value: "rating" },
+  { title: "In stock", value: "inStock" },
+  { title: "Edit", value: "edit" },
+]
+
+function openEditProductDialog(product: ProductModel) {
+  editProduct.value = product
+  showEditProductDialog.value = true
+}
+</script>
+
+<template>
+  <v-container>
+    <v-row>
+      <v-col>
+        <card-view 
+          :title="$t('product.product', 2)"
+          :subtitle="productStore.products.length + ' ' + $t('product.product', productStore.products.length)"
+          icon="mdi-store"
+        >
+          <v-data-table
+            :headers="headers"
+            :items="productStore.products"
+          >
+            <template v-slot:item.price="{ item }">
+              {{ item.price }} €
+            </template>
+
+            <template v-slot:item.discount="{ item }">
+              <div v-if="item.discount > 0">
+                {{ item.discount }} %
+              </div>
+            </template>
+
+            <template v-slot:item.inStock="{ item }">
+              <div v-if="item.inStock > 5" class="text-green-lighten-1">
+                <v-icon icon="mdi-check" />
+                {{ $t("product.storedItemsAvailable", [item.inStock]) }}
+              </div>
+              <div v-else-if="item.inStock > 0" class="text-orange-lighten-1">
+                <v-icon icon="mdi-alert" />
+                {{ $t("product.storedItemsAvailable", [item.inStock]) }}
+              </div>
+              <div v-else class="text-red">
+                <v-icon icon="mdi-alert-circle" />
+                {{ $t("product.soldOut") }}
+              </div>
+            </template>
+
+            <template v-slot:item.edit="{ item }">
+              <v-btn
+                icon="mdi-pencil"
+                color="orange"
+                variant="text"
+                @click="openEditProductDialog(item)"
+              />
+
+              <v-btn
+                icon="mdi-store-off"
+                color="red"
+                variant="text"
+                v-if="item.offered"
+              />
+
+              <v-btn
+                icon="mdi-store"
+                color="green"
+                variant="text"
+                v-if="!item.offered"
+              />
+            </template>
+          </v-data-table>
+        </card-view>
+      </v-col>
+    </v-row>
+  </v-container>
+
+  <product-edit-dialog
+    v-model="showEditProductDialog"
+    :edit-product="editProduct" />
+</template>

software/src/pages/admin/productsPage/productEditDialog.vue

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import actionDialog from '@/components/actionDialog.vue';
+import { ProductModel } from '@/data/models/productModel';
+import outlinedButton from '@/components/outlinedButton.vue';
+import { useProductStore } from '@/data/stores/productStore';
+import { ModelRef } from 'vue';
+
+const showDialog: ModelRef<boolean> = defineModel()
+const editProduct = defineModel("editProduct", { type: ProductModel, required: true})
+const productStore = useProductStore()
+
+function saveProduct() {
+  // todo
+  showDialog.value = false
+}
+</script>
+
+<template>
+  <action-dialog
+    :title="$t('editProduct')"
+    icon="mdi-store-edit"
+    v-model="showDialog"
+  >
+    <v-row>
+      <v-col>
+        <v-select
+          :items="productStore.categories"
+          v-model="editProduct.category"
+          :label="$t('category')"
+        >
+          <template v-slot:item="{ props, item }">
+            <v-list-item v-bind="props" :prepend-icon="item.raw.icon" :title="item.raw.name" />
+          </template>
+
+          <template v-slot:selection="{ item }">
+            <v-list-item :prepend-icon="item.raw.icon" :title="item.raw.name" />
+          </template>
+        </v-select>
+      </v-col>
+
+      <v-col>
+        <v-select
+          :items="productStore.brands"
+          v-model="editProduct.brand"
+          :label="$t('brand')"
+        >
+          <template v-slot:item="{ props, item }">
+            <v-list-item v-bind="props" :title="item.raw.name" />
+          </template>
+
+          <template v-slot:selection="{ item }">
+            <v-list-item :title="item.raw.name" />
+          </template>
+        </v-select>
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        <v-text-field
+          v-model="editProduct.name"
+          :label="$t('product.productName')"
+        />
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        <v-textarea
+          v-model="editProduct.description"
+          :label="$t('product.description')"
+        />
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        <v-text-field
+          v-model="editProduct.price"
+          :label="$t('product.productPrice')"
+          suffix="€"
+        />
+      </v-col>
+
+      <v-col>
+        <v-text-field
+          v-model="editProduct.discount"
+          :label="$t('product.discount')"
+        />
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        <v-text-field
+          v-model="editProduct.inStock"
+          :label="$t('product.inStock')"
+        />
+      </v-col>
+    </v-row>
+
+    <!-- todo -->
+    {{ editProduct.images }}
+    {{ editProduct.specs }}
+
+    <template #actions>
+      <outlined-button
+        color="green"
+        prepend-icon="mdi-content-save"
+        @click="saveProduct"
+      >
+        {{ $t('save') }}
+      </outlined-button>
+    </template>
+  </action-dialog>  
+</template>

software/src/pages/basketPage/orderingDialog.vue

@@ -91,6 +91,7 @@ async function doOrder() {
         @click="showDialog = false"
         prepend-icon="mdi-close"
         color="orange"
+        :disabled="orderingInProgress"
       >
         {{ $t('dialog.cancel') }}
       </outlined-button>

software/src/pages/productsPage/filterNavDrawer.vue

@@ -1,10 +1,8 @@
 <script setup lang="ts">
 import { SortOrder } from '@/data/enums/sortOrderEnum';
-import { useCategoryStore } from '@/data/stores/categoryStore';
 import { useProductStore } from '@/data/stores/productStore';
 
 const productStore = useProductStore()
-const categoryStore = useCategoryStore()
 const sortOrderItems = Object.values(SortOrder)
 </script>
 
@@ -19,8 +17,8 @@ const sortOrderItems = Object.values(SortOrder)
 
       <v-list-item>
         <v-select
-          :items="categoryStore.categories"
+          :items="productStore.categories"
-          :label="$t('categories')"
+          :label="$t('category', 2)"
           v-model="productStore.filteredCategory"
         >
           <template v-slot:item="{ props, item }">

software/src/router/admin.routes.ts

@@ -0,0 +1,23 @@
+import DashboardPage from "@/pages/admin/dashboardPage/index.vue"
+import CategoriesPage from "@/pages/admin/categoriesPage/index.vue"
+import AccountsPage from "@/pages/admin/accountsPage/index.vue"
+import ProductsPage from "@/pages/admin/productsPage/index.vue"
+
+export default [
+  {
+    path: '/admin/dashboard',
+    component: DashboardPage
+  },
+  {
+    path: '/admin/categories',
+    component: CategoriesPage
+  },
+  {
+    path: '/admin/accounts',
+    component: AccountsPage
+  },
+  {
+    path: '/admin/products',
+    component: ProductsPage
+  }
+]

software/src/router/routes.ts

@@ -6,6 +6,7 @@ import LoginPage from "@/pages/loginPage/index.vue"
 import BasketPage from "@/pages/basketPage/index.vue"
 import HelpPage from "@/pages/helpPage/index.vue"
 import ScoreBoardPage from "@/pages/scoreBoardPage/index.vue"
+import adminRoutes from "./admin.routes";
 
 const routes = [
   { path: '/', component: ProductsPage },
@@ -15,7 +16,8 @@ const routes = [
   { path: '/login', component: LoginPage },
   { path: '/basket', component: BasketPage },
   { path: '/scoreboard', component: ScoreBoardPage },
-  { path: '/help', component: HelpPage }
+  { path: '/help', component: HelpPage },
+  ...adminRoutes
 ]
 
 export default routes