Connect Orders database table with Payments and Addresses, visualize it in the frontend

.gitignore

@@ -32,4 +32,5 @@ coverage
 build
 *.sqlite
 out/
-database.svg
+database.svg
+*.bkp

misc/database.drawio

@@ -1,61 +1,61 @@
 <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="1988" dy="473" 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="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">
       <root>
         <mxCell id="0" />
         <mxCell id="1" parent="0" />
         <mxCell id="-XxvrMC6G6SQ8Xm1xsTM-4" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;&lt;u&gt;id:&amp;nbsp;&lt;/u&gt;&lt;u style=&quot;background-color: initial;&quot;&gt;Number&lt;/u&gt;&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" parent="1" vertex="1">
-          <mxGeometry x="-200" y="310" width="160" height="30" as="geometry" />
+          <mxGeometry x="-200" y="420" width="160" height="30" as="geometry" />
         </mxCell>
         <mxCell id="-XxvrMC6G6SQ8Xm1xsTM-5" value="&lt;blockquote style=&quot;margin: 0px; border: none; padding: 0px;&quot;&gt;&lt;b&gt;&lt;u&gt;Products&lt;/u&gt;&lt;/b&gt;&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=center;fillColor=#008a00;strokeColor=default;fontColor=#ffffff;" parent="1" vertex="1">
-          <mxGeometry x="-200" y="280" width="160" height="30" as="geometry" />
+          <mxGeometry x="-200" y="390" width="160" height="30" as="geometry" />
         </mxCell>
         <mxCell id="-XxvrMC6G6SQ8Xm1xsTM-21" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;name: String&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" parent="1" vertex="1">
-          <mxGeometry x="-200" y="399" width="160" height="30" as="geometry" />
+          <mxGeometry x="-200" y="509" width="160" height="30" as="geometry" />
         </mxCell>
         <mxCell id="-XxvrMC6G6SQ8Xm1xsTM-22" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;price: Number&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" parent="1" vertex="1">
-          <mxGeometry x="-200" y="460" width="160" height="30" as="geometry" />
+          <mxGeometry x="-200" y="570" width="160" height="30" as="geometry" />
         </mxCell>
         <mxCell id="-XxvrMC6G6SQ8Xm1xsTM-23" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;&lt;i&gt;categoryId: Number&lt;/i&gt;&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" parent="1" vertex="1">
-          <mxGeometry x="-200" y="340" width="160" height="30" as="geometry" />
+          <mxGeometry x="-200" y="450" width="160" height="30" as="geometry" />
         </mxCell>
         <mxCell id="-XxvrMC6G6SQ8Xm1xsTM-24" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;discount: Number&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" parent="1" vertex="1">
-          <mxGeometry x="-200" y="490" width="160" height="30" as="geometry" />
+          <mxGeometry x="-200" y="600" width="160" height="30" as="geometry" />
         </mxCell>
         <mxCell id="xvubMpEdOjOFzFZ-NZdf-2" value="&lt;blockquote style=&quot;margin: 0px; border: none; padding: 0px;&quot;&gt;&lt;b&gt;&lt;u&gt;Accounts&lt;/u&gt;&lt;/b&gt;&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=center;fillColor=#1ba1e2;strokeColor=default;fontColor=#ffffff;" parent="1" vertex="1">
-          <mxGeometry x="-920" y="320" width="160" height="30" as="geometry" />
+          <mxGeometry x="-1160.15" y="390" width="160" height="30" as="geometry" />
         </mxCell>
         <mxCell id="xvubMpEdOjOFzFZ-NZdf-3" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;&lt;u&gt;id:&amp;nbsp;&lt;/u&gt;&lt;u style=&quot;background-color: initial;&quot;&gt;Number&lt;/u&gt;&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" parent="1" vertex="1">
-          <mxGeometry x="-920" y="350" width="160" height="30" as="geometry" />
+          <mxGeometry x="-1160.15" y="420" width="160" height="30" as="geometry" />
         </mxCell>
         <mxCell id="xvubMpEdOjOFzFZ-NZdf-4" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;username: String&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" parent="1" vertex="1">
-          <mxGeometry x="-920" y="380" width="160" height="30" as="geometry" />
+          <mxGeometry x="-1160.15" y="450" width="160" height="30" as="geometry" />
         </mxCell>
         <mxCell id="xvubMpEdOjOFzFZ-NZdf-5" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;password: String&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" parent="1" vertex="1">
-          <mxGeometry x="-920" y="410" width="160" height="30" as="geometry" />
+          <mxGeometry x="-1160.15" y="480" width="160" height="30" as="geometry" />
         </mxCell>
         <mxCell id="xvubMpEdOjOFzFZ-NZdf-6" value="&lt;blockquote style=&quot;margin: 0px; border: none; padding: 0px;&quot;&gt;&lt;b&gt;&lt;u&gt;OrderItems&lt;/u&gt;&lt;/b&gt;&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=center;fillColor=#a20025;strokeColor=default;fontColor=#ffffff;" parent="1" vertex="1">
-          <mxGeometry x="-439.99999999999994" y="360" width="160" height="30" as="geometry" />
+          <mxGeometry x="-439.99999999999994" y="330" width="160" height="30" as="geometry" />
         </mxCell>
         <mxCell id="xvubMpEdOjOFzFZ-NZdf-7" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;&lt;u&gt;id:&amp;nbsp;&lt;/u&gt;&lt;u style=&quot;background-color: initial;&quot;&gt;Number&lt;/u&gt;&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" parent="1" vertex="1">
-          <mxGeometry x="-439.99999999999994" y="390" width="160" height="30" as="geometry" />
+          <mxGeometry x="-439.99999999999994" y="360" width="160" height="30" as="geometry" />
         </mxCell>
         <mxCell id="xvubMpEdOjOFzFZ-NZdf-8" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;&lt;i&gt;accountId: Number&lt;/i&gt;&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" parent="1" vertex="1">
           <mxGeometry x="-680" y="420" width="160" height="30" as="geometry" />
         </mxCell>
         <mxCell id="xvubMpEdOjOFzFZ-NZdf-17" value="&lt;blockquote style=&quot;margin: 0px; border: none; padding: 0px;&quot;&gt;&lt;b&gt;&lt;u&gt;Categories&lt;/u&gt;&lt;/b&gt;&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=center;fillColor=#008a00;strokeColor=default;fontColor=#ffffff;" parent="1" vertex="1">
-          <mxGeometry x="39.960000000000036" y="310" width="160" height="30" as="geometry" />
+          <mxGeometry x="39.960000000000036" y="420" width="160" height="30" as="geometry" />
         </mxCell>
         <mxCell id="xvubMpEdOjOFzFZ-NZdf-18" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;&lt;u&gt;id:&amp;nbsp;&lt;/u&gt;&lt;u style=&quot;background-color: initial;&quot;&gt;Number&lt;/u&gt;&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" parent="1" vertex="1">
-          <mxGeometry x="39.960000000000036" y="340" width="160" height="30" as="geometry" />
+          <mxGeometry x="39.960000000000036" y="450" width="160" height="30" as="geometry" />
         </mxCell>
         <mxCell id="xvubMpEdOjOFzFZ-NZdf-19" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;name: String&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" parent="1" vertex="1">
-          <mxGeometry x="39.960000000000036" y="370" width="160" height="30" as="geometry" />
+          <mxGeometry x="39.960000000000036" y="480" width="160" height="30" as="geometry" />
         </mxCell>
         <mxCell id="xvubMpEdOjOFzFZ-NZdf-20" value="" style="endArrow=open;endSize=12;startArrow=diamondThin;startSize=14;startFill=0;edgeStyle=orthogonalEdgeStyle;entryX=-0.019;entryY=0.493;entryDx=0;entryDy=0;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryPerimeter=0;" parent="1" source="-XxvrMC6G6SQ8Xm1xsTM-23" target="xvubMpEdOjOFzFZ-NZdf-18" edge="1">
           <mxGeometry x="389.35999999999996" y="350" as="geometry">
-            <mxPoint x="120" y="469.9999999999998" as="sourcePoint" />
+            <mxPoint x="120" y="579.9999999999998" as="sourcePoint" />
-            <mxPoint y="589.9999999999998" as="targetPoint" />
+            <mxPoint y="699.9999999999998" as="targetPoint" />
             <Array as="points" />
           </mxGeometry>
         </mxCell>
@@ -70,7 +70,7 @@
           </mxGeometry>
         </mxCell>
         <mxCell id="xvubMpEdOjOFzFZ-NZdf-23" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;&lt;i&gt;productId:&amp;nbsp;&lt;/i&gt;&lt;i style=&quot;background-color: initial;&quot;&gt;Number&lt;/i&gt;&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" parent="1" vertex="1">
-          <mxGeometry x="-439.99999999999994" y="450" width="160" height="30" as="geometry" />
+          <mxGeometry x="-439.99999999999994" y="420" width="160" height="30" as="geometry" />
         </mxCell>
         <mxCell id="xvubMpEdOjOFzFZ-NZdf-24" value="" style="endArrow=open;endSize=12;startArrow=diamondThin;startSize=14;startFill=0;edgeStyle=orthogonalEdgeStyle;entryX=0;entryY=0.5;entryDx=0;entryDy=0;exitX=1;exitY=0.5;exitDx=0;exitDy=0;" parent="1" source="xvubMpEdOjOFzFZ-NZdf-23" target="-XxvrMC6G6SQ8Xm1xsTM-4" edge="1">
           <mxGeometry x="389.35999999999996" y="350" as="geometry">
@@ -89,10 +89,10 @@
           </mxGeometry>
         </mxCell>
         <mxCell id="xvubMpEdOjOFzFZ-NZdf-37" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;firstName: String&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" parent="1" vertex="1">
-          <mxGeometry x="-920" y="440" width="160" height="30" as="geometry" />
+          <mxGeometry x="-1160.15" y="540" width="160" height="30" as="geometry" />
         </mxCell>
         <mxCell id="xvubMpEdOjOFzFZ-NZdf-38" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;lastName: String&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" parent="1" vertex="1">
-          <mxGeometry x="-920" y="470" width="160" height="30" as="geometry" />
+          <mxGeometry x="-1160.15" y="570" width="160" height="30" as="geometry" />
         </mxCell>
         <mxCell id="xvubMpEdOjOFzFZ-NZdf-40" value="&lt;blockquote style=&quot;margin: 0px; border: none; padding: 0px;&quot;&gt;&lt;b&gt;&lt;u&gt;Orders&lt;/u&gt;&lt;/b&gt;&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=center;fillColor=#a20025;strokeColor=default;fontColor=#ffffff;" parent="1" vertex="1">
           <mxGeometry x="-680" y="360" width="160" height="30" as="geometry" />
@@ -101,276 +101,335 @@
           <mxGeometry x="-680" y="390" width="160" height="30" as="geometry" />
         </mxCell>
         <mxCell id="xvubMpEdOjOFzFZ-NZdf-42" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;&lt;i&gt;orderId:&amp;nbsp;&lt;/i&gt;&lt;i style=&quot;background-color: initial;&quot;&gt;Number&lt;/i&gt;&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" parent="1" vertex="1">
-          <mxGeometry x="-439.99999999999994" y="420" width="160" height="30" as="geometry" />
+          <mxGeometry x="-439.99999999999994" y="390" width="160" height="30" as="geometry" />
         </mxCell>
         <mxCell id="xvubMpEdOjOFzFZ-NZdf-47" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;quantity: Number&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" parent="1" vertex="1">
-          <mxGeometry x="-439.99999999999994" y="480" width="160" height="30" as="geometry" />
+          <mxGeometry x="-439.99999999999994" y="450" width="160" height="30" as="geometry" />
         </mxCell>
         <mxCell id="Mm1_BtgNgvV1z5cDQ8i7-1" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;icon: String&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" parent="1" vertex="1">
-          <mxGeometry x="39.960000000000036" y="400" width="160" height="30" as="geometry" />
+          <mxGeometry x="39.960000000000036" y="510" width="160" height="30" as="geometry" />
         </mxCell>
         <mxCell id="Mm1_BtgNgvV1z5cDQ8i7-2" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;&lt;i&gt;brandId: Number&lt;/i&gt;&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" parent="1" vertex="1">
-          <mxGeometry x="-200" y="370" width="160" height="30" as="geometry" />
+          <mxGeometry x="-200" y="480" width="160" height="30" as="geometry" />
         </mxCell>
         <mxCell id="Mm1_BtgNgvV1z5cDQ8i7-4" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;rating: Number&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" parent="1" vertex="1">
-          <mxGeometry x="-200" y="520" width="160" height="30" as="geometry" />
+          <mxGeometry x="-200" y="630" width="160" height="30" as="geometry" />
         </mxCell>
         <mxCell id="Mm1_BtgNgvV1z5cDQ8i7-6" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;description: String&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" parent="1" vertex="1">
-          <mxGeometry x="-200.00000000000003" y="430" width="160" height="30" as="geometry" />
+          <mxGeometry x="-200.00000000000003" y="540" width="160" height="30" as="geometry" />
         </mxCell>
         <mxCell id="Mm1_BtgNgvV1z5cDQ8i7-7" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;shippingProgress: Number&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" parent="1" vertex="1">
           <mxGeometry x="-680" y="480" width="160" height="30" as="geometry" />
         </mxCell>
         <mxCell id="Mm1_BtgNgvV1z5cDQ8i7-11" 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=#2072B8;" parent="1" vertex="1">
-          <mxGeometry x="-779.9100000000001" y="355" width="9.43" height="20" as="geometry" />
+          <mxGeometry x="-1020.0600000000001" y="425" width="9.43" height="20" as="geometry" />
         </mxCell>
         <mxCell id="Mm1_BtgNgvV1z5cDQ8i7-12" 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=#2072B8;" parent="1" vertex="1">
           <mxGeometry x="-539.9100000000001" y="395" width="9.43" height="20" as="geometry" />
         </mxCell>
         <mxCell id="Mm1_BtgNgvV1z5cDQ8i7-13" 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=#2072B8;" parent="1" vertex="1">
-          <mxGeometry x="-299.90999999999997" y="395" width="9.43" height="20" as="geometry" />
+          <mxGeometry x="-299.90999999999997" y="365" width="9.43" height="20" as="geometry" />
         </mxCell>
         <mxCell id="Mm1_BtgNgvV1z5cDQ8i7-14" 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=#2072B8;" parent="1" vertex="1">
-          <mxGeometry x="-60.04000000000002" y="315" width="9.43" height="20" as="geometry" />
+          <mxGeometry x="-60.04000000000002" y="425" width="9.43" height="20" as="geometry" />
         </mxCell>
         <mxCell id="Mm1_BtgNgvV1z5cDQ8i7-15" 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=#2072B8;" parent="1" vertex="1">
-          <mxGeometry x="179.92000000000002" y="345" width="9.43" height="20" as="geometry" />
+          <mxGeometry x="179.92000000000002" y="455" width="9.43" height="20" as="geometry" />
         </mxCell>
         <mxCell id="Mm1_BtgNgvV1z5cDQ8i7-16" 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="-785.2" y="385" width="20" height="20" as="geometry" />
+          <mxGeometry x="-1025.3500000000001" y="455" width="20" height="20" as="geometry" />
         </mxCell>
         <mxCell id="Mm1_BtgNgvV1z5cDQ8i7-17" 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="174.63000000000005" y="375" width="20" height="20" as="geometry" />
+          <mxGeometry x="174.63000000000005" y="485" width="20" height="20" as="geometry" />
         </mxCell>
         <mxCell id="Mm1_BtgNgvV1z5cDQ8i7-18" 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=#2072B8;" parent="1" vertex="1">
-          <mxGeometry x="-674.71" y="565" width="9.43" height="20" as="geometry" />
+          <mxGeometry x="-422.31000000000006" y="610" width="9.43" height="20" as="geometry" />
         </mxCell>
         <mxCell id="Mm1_BtgNgvV1z5cDQ8i7-19" value="Primary Key" style="text;strokeColor=none;align=left;fillColor=none;html=1;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
-          <mxGeometry x="-654.8" y="560" width="110" height="30" as="geometry" />
+          <mxGeometry x="-402.4" y="605" width="110" height="30" as="geometry" />
         </mxCell>
         <mxCell id="Mm1_BtgNgvV1z5cDQ8i7-20" 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="-680" y="635" width="20" height="20" as="geometry" />
+          <mxGeometry x="-427.6" y="680" width="20" height="20" as="geometry" />
         </mxCell>
         <mxCell id="Mm1_BtgNgvV1z5cDQ8i7-21" value="Unique" style="text;strokeColor=none;align=left;fillColor=none;html=1;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
-          <mxGeometry x="-654.8000000000001" y="630" width="110" height="30" as="geometry" />
+          <mxGeometry x="-402.4000000000001" y="675" width="110" height="30" as="geometry" />
         </mxCell>
         <mxCell id="Mm1_BtgNgvV1z5cDQ8i7-24" 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="-299.90999999999997" y="425" width="9.43" height="20" as="geometry" />
+          <mxGeometry x="-299.90999999999997" y="395" width="9.43" height="20" as="geometry" />
         </mxCell>
         <mxCell id="Mm1_BtgNgvV1z5cDQ8i7-25" 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="-299.90999999999997" y="455" width="9.43" height="20" as="geometry" />
+          <mxGeometry x="-299.90999999999997" y="425" width="9.43" height="20" as="geometry" />
         </mxCell>
         <mxCell id="Mm1_BtgNgvV1z5cDQ8i7-26" 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="425" width="9.43" height="20" as="geometry" />
         </mxCell>
         <mxCell id="Mm1_BtgNgvV1z5cDQ8i7-27" 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="375" width="9.43" height="20" as="geometry" />
+          <mxGeometry x="-60.04000000000002" y="485" width="9.43" height="20" as="geometry" />
         </mxCell>
         <mxCell id="Mm1_BtgNgvV1z5cDQ8i7-28" 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="-674.71" y="600" width="9.43" height="20" as="geometry" />
+          <mxGeometry x="-422.31000000000006" y="645" width="9.43" height="20" as="geometry" />
         </mxCell>
         <mxCell id="Mm1_BtgNgvV1z5cDQ8i7-29" value="Foreign Key" style="text;strokeColor=none;align=left;fillColor=none;html=1;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
-          <mxGeometry x="-654.8" y="595" width="110" height="30" as="geometry" />
+          <mxGeometry x="-402.4" y="640" width="110" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="_UF3kFiP3G3Olu9frHUj-1" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;bankName: String&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" vertex="1" parent="1">
+        <mxCell id="_UF3kFiP3G3Olu9frHUj-1" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;bankName: String&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" parent="1" vertex="1">
-          <mxGeometry x="-1160" y="540" width="160" height="30" as="geometry" />
+          <mxGeometry x="-919.32" y="570" width="160" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="_UF3kFiP3G3Olu9frHUj-2" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;iban: String&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" vertex="1" parent="1">
+        <mxCell id="_UF3kFiP3G3Olu9frHUj-2" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;iban: String&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" parent="1" vertex="1">
-          <mxGeometry x="-1160" y="570" width="160" height="30" as="geometry" />
+          <mxGeometry x="-919.32" y="600" width="160" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="_UF3kFiP3G3Olu9frHUj-3" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;orderedAt: String&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" vertex="1" parent="1">
+        <mxCell id="_UF3kFiP3G3Olu9frHUj-3" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;orderedAt: String&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" parent="1" vertex="1">
           <mxGeometry x="-680" y="450" width="160" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="_UF3kFiP3G3Olu9frHUj-4" value="&lt;blockquote style=&quot;margin: 0px; border: none; padding: 0px;&quot;&gt;&lt;b&gt;&lt;u&gt;Brands&lt;/u&gt;&lt;/b&gt;&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=center;fillColor=#008a00;strokeColor=default;fontColor=#ffffff;" vertex="1" parent="1">
+        <mxCell id="_UF3kFiP3G3Olu9frHUj-4" value="&lt;blockquote style=&quot;margin: 0px; border: none; padding: 0px;&quot;&gt;&lt;b&gt;&lt;u&gt;Brands&lt;/u&gt;&lt;/b&gt;&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=center;fillColor=#008a00;strokeColor=default;fontColor=#ffffff;" parent="1" vertex="1">
-          <mxGeometry x="39.960000000000036" y="470" width="160" height="30" as="geometry" />
+          <mxGeometry x="39.960000000000036" y="580" width="160" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="_UF3kFiP3G3Olu9frHUj-5" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;&lt;u&gt;id:&amp;nbsp;&lt;/u&gt;&lt;u style=&quot;background-color: initial;&quot;&gt;Number&lt;/u&gt;&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" vertex="1" parent="1">
+        <mxCell id="_UF3kFiP3G3Olu9frHUj-5" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;&lt;u&gt;id:&amp;nbsp;&lt;/u&gt;&lt;u style=&quot;background-color: initial;&quot;&gt;Number&lt;/u&gt;&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" parent="1" vertex="1">
-          <mxGeometry x="39.960000000000036" y="500" width="160" height="30" as="geometry" />
+          <mxGeometry x="39.960000000000036" y="610" width="160" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="_UF3kFiP3G3Olu9frHUj-6" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;name: String&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" vertex="1" parent="1">
+        <mxCell id="_UF3kFiP3G3Olu9frHUj-6" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;name: String&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" parent="1" vertex="1">
-          <mxGeometry x="39.960000000000036" y="530" width="160" height="30" as="geometry" />
+          <mxGeometry x="39.960000000000036" y="640" width="160" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="_UF3kFiP3G3Olu9frHUj-7" 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=#2072B8;" vertex="1" parent="1">
+        <mxCell id="_UF3kFiP3G3Olu9frHUj-7" 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=#2072B8;" parent="1" vertex="1">
-          <mxGeometry x="180.24999999999994" y="505" width="9.43" height="20" as="geometry" />
+          <mxGeometry x="180.24999999999994" y="615" width="9.43" height="20" as="geometry" />
         </mxCell>
-        <mxCell id="_UF3kFiP3G3Olu9frHUj-8" 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="_UF3kFiP3G3Olu9frHUj-8" 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="174.95999999999998" y="535" width="20" height="20" as="geometry" />
+          <mxGeometry x="174.95999999999998" y="645" width="20" height="20" as="geometry" />
         </mxCell>
-        <mxCell id="_UF3kFiP3G3Olu9frHUj-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=1;exitY=0.5;exitDx=0;exitDy=0;" edge="1" parent="1" source="Mm1_BtgNgvV1z5cDQ8i7-2" target="_UF3kFiP3G3Olu9frHUj-5">
+        <mxCell id="_UF3kFiP3G3Olu9frHUj-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=1;exitY=0.5;exitDx=0;exitDy=0;" parent="1" source="Mm1_BtgNgvV1z5cDQ8i7-2" target="_UF3kFiP3G3Olu9frHUj-5" edge="1">
           <mxGeometry x="389.35999999999996" y="350" as="geometry">
-            <mxPoint x="-445.04" y="510" as="sourcePoint" />
+            <mxPoint x="-445.04" y="620" as="sourcePoint" />
-            <mxPoint x="-315.04" y="510" as="targetPoint" />
+            <mxPoint x="-315.04" y="620" as="targetPoint" />
             <Array as="points" />
           </mxGeometry>
         </mxCell>
-        <mxCell id="_UF3kFiP3G3Olu9frHUj-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="_UF3kFiP3G3Olu9frHUj-9">
+        <mxCell id="_UF3kFiP3G3Olu9frHUj-10" value="0..n" style="resizable=0;align=left;verticalAlign=top;labelBackgroundColor=#ffffff;fontSize=10;strokeColor=#003366;shadow=1;fillColor=#D4E1F5;fontColor=#003366" parent="_UF3kFiP3G3Olu9frHUj-9" connectable="0" vertex="1">
           <mxGeometry x="-1" relative="1" as="geometry">
             <mxPoint x="3" y="-28" as="offset" />
           </mxGeometry>
         </mxCell>
-        <mxCell id="_UF3kFiP3G3Olu9frHUj-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="_UF3kFiP3G3Olu9frHUj-9">
+        <mxCell id="_UF3kFiP3G3Olu9frHUj-11" value="1" style="resizable=0;align=right;verticalAlign=top;labelBackgroundColor=#ffffff;fontSize=10;strokeColor=#003366;shadow=1;fillColor=#D4E1F5;fontColor=#003366" parent="_UF3kFiP3G3Olu9frHUj-9" connectable="0" vertex="1">
           <mxGeometry x="1" relative="1" as="geometry">
             <mxPoint x="-4" y="-30" as="offset" />
           </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;" vertex="1" parent="1">
+        <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="610" width="160" height="30" as="geometry" />
+          <mxGeometry x="-200" y="720" 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;" vertex="1" parent="1">
+        <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="580" width="160" height="30" as="geometry" />
+          <mxGeometry x="-200" y="690" 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;" vertex="1" parent="1">
+        <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="550" width="160" height="30" as="geometry" />
+          <mxGeometry x="-200" y="660" width="160" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="_UF3kFiP3G3Olu9frHUj-16" value="&lt;blockquote style=&quot;margin: 0px; border: none; padding: 0px;&quot;&gt;&lt;b&gt;&lt;u&gt;Addresses&lt;/u&gt;&lt;/b&gt;&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=center;fillColor=#1ba1e2;strokeColor=default;fontColor=#ffffff;" vertex="1" parent="1">
+        <mxCell id="_UF3kFiP3G3Olu9frHUj-16" value="&lt;blockquote style=&quot;margin: 0px; border: none; padding: 0px;&quot;&gt;&lt;b&gt;&lt;u&gt;Addresses&lt;/u&gt;&lt;/b&gt;&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=center;fillColor=#1ba1e2;strokeColor=default;fontColor=#ffffff;" parent="1" vertex="1">
-          <mxGeometry x="-1160" y="200" width="160" height="30" as="geometry" />
+          <mxGeometry x="-919.3199999999999" y="670" width="160" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="_UF3kFiP3G3Olu9frHUj-17" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;street: String&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" vertex="1" parent="1">
+        <mxCell id="_UF3kFiP3G3Olu9frHUj-17" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;street: String&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" parent="1" vertex="1">
-          <mxGeometry x="-1160" y="290" width="160" height="30" as="geometry" />
+          <mxGeometry x="-919.3199999999999" y="760" width="160" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="_UF3kFiP3G3Olu9frHUj-18" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;houseNumber: Number&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" vertex="1" parent="1">
+        <mxCell id="_UF3kFiP3G3Olu9frHUj-18" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;houseNumber: Number&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" parent="1" vertex="1">
-          <mxGeometry x="-1160" y="320" width="160" height="30" as="geometry" />
+          <mxGeometry x="-919.3199999999999" y="790" width="160" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="_UF3kFiP3G3Olu9frHUj-19" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;postalCode: Number&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" vertex="1" parent="1">
+        <mxCell id="_UF3kFiP3G3Olu9frHUj-19" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;postalCode: Number&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" parent="1" vertex="1">
-          <mxGeometry x="-1160" y="350" width="160" height="30" as="geometry" />
+          <mxGeometry x="-919.3199999999999" y="820" width="160" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="_UF3kFiP3G3Olu9frHUj-20" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;city: String&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" vertex="1" parent="1">
+        <mxCell id="_UF3kFiP3G3Olu9frHUj-20" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;city: String&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" parent="1" vertex="1">
-          <mxGeometry x="-1160" y="380" width="160" height="30" as="geometry" />
+          <mxGeometry x="-919.3199999999999" y="850" width="160" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="_UF3kFiP3G3Olu9frHUj-21" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;&lt;u&gt;id:&amp;nbsp;&lt;/u&gt;&lt;u style=&quot;background-color: initial;&quot;&gt;Number&lt;/u&gt;&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" vertex="1" parent="1">
+        <mxCell id="_UF3kFiP3G3Olu9frHUj-21" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;&lt;u&gt;id:&amp;nbsp;&lt;/u&gt;&lt;u style=&quot;background-color: initial;&quot;&gt;Number&lt;/u&gt;&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" parent="1" vertex="1">
-          <mxGeometry x="-1160" y="230" width="160" height="30" as="geometry" />
+          <mxGeometry x="-919.3199999999999" y="700" width="160" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="_UF3kFiP3G3Olu9frHUj-25" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;&lt;i&gt;accountId: Number&lt;/i&gt;&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" vertex="1" parent="1">
+        <mxCell id="_UF3kFiP3G3Olu9frHUj-25" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;&lt;i&gt;accountId: Number&lt;/i&gt;&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" parent="1" vertex="1">
-          <mxGeometry x="-1160" y="260" width="160" height="30" as="geometry" />
+          <mxGeometry x="-919.3199999999999" y="730" width="160" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="_UF3kFiP3G3Olu9frHUj-26" 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=#2072B8;" vertex="1" parent="1">
+        <mxCell id="_UF3kFiP3G3Olu9frHUj-26" 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=#2072B8;" parent="1" vertex="1">
-          <mxGeometry x="-1017" y="234" width="9.43" height="20" as="geometry" />
+          <mxGeometry x="-776.3199999999999" y="704" width="9.43" height="20" as="geometry" />
         </mxCell>
-        <mxCell id="_UF3kFiP3G3Olu9frHUj-27" value="&lt;blockquote style=&quot;margin: 0px; border: none; padding: 0px;&quot;&gt;&lt;b&gt;&lt;u&gt;Payments&lt;/u&gt;&lt;/b&gt;&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=center;fillColor=#1ba1e2;strokeColor=default;fontColor=#ffffff;" vertex="1" parent="1">
+        <mxCell id="_UF3kFiP3G3Olu9frHUj-27" value="&lt;blockquote style=&quot;margin: 0px; border: none; padding: 0px;&quot;&gt;&lt;b&gt;&lt;u&gt;Payments&lt;/u&gt;&lt;/b&gt;&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=center;fillColor=#1ba1e2;strokeColor=default;fontColor=#ffffff;" parent="1" vertex="1">
-          <mxGeometry x="-1160" y="450" width="160" height="30" as="geometry" />
+          <mxGeometry x="-919.32" y="480" width="160" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="_UF3kFiP3G3Olu9frHUj-28" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;&lt;u&gt;id:&amp;nbsp;&lt;/u&gt;&lt;u style=&quot;background-color: initial;&quot;&gt;Number&lt;/u&gt;&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" vertex="1" parent="1">
+        <mxCell id="_UF3kFiP3G3Olu9frHUj-28" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;&lt;u&gt;id:&amp;nbsp;&lt;/u&gt;&lt;u style=&quot;background-color: initial;&quot;&gt;Number&lt;/u&gt;&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" parent="1" vertex="1">
-          <mxGeometry x="-1160" y="480" width="160" height="30" as="geometry" />
+          <mxGeometry x="-919.32" y="510" width="160" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="_UF3kFiP3G3Olu9frHUj-29" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;&lt;i&gt;accountId: Number&lt;/i&gt;&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" vertex="1" parent="1">
+        <mxCell id="_UF3kFiP3G3Olu9frHUj-29" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;&lt;i&gt;accountId: Number&lt;/i&gt;&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" parent="1" vertex="1">
-          <mxGeometry x="-1160" y="510" width="160" height="30" as="geometry" />
+          <mxGeometry x="-919.32" y="540" width="160" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="_UF3kFiP3G3Olu9frHUj-33" 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=#2072B8;" vertex="1" parent="1">
+        <mxCell id="_UF3kFiP3G3Olu9frHUj-33" 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=#2072B8;" parent="1" vertex="1">
-          <mxGeometry x="-1017" y="485" width="9.43" height="20" as="geometry" />
+          <mxGeometry x="-776.32" y="515" width="9.43" height="20" as="geometry" />
         </mxCell>
-        <mxCell id="_UF3kFiP3G3Olu9frHUj-36" 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="_UF3kFiP3G3Olu9frHUj-36" 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="-1017" y="265" width="9.43" height="20" as="geometry" />
+          <mxGeometry x="-776.3199999999999" y="735" width="9.43" height="20" as="geometry" />
         </mxCell>
-        <mxCell id="_UF3kFiP3G3Olu9frHUj-37" 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="_UF3kFiP3G3Olu9frHUj-37" 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="-1017" y="515" width="9.43" height="20" as="geometry" />
+          <mxGeometry x="-776.32" y="545" width="9.43" height="20" as="geometry" />
         </mxCell>
-        <mxCell id="_UF3kFiP3G3Olu9frHUj-38" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;accountRoleId: Number&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" vertex="1" parent="1">
+        <mxCell id="_UF3kFiP3G3Olu9frHUj-38" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;accountRoleId: Number&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" parent="1" vertex="1">
-          <mxGeometry x="-920" y="500" width="160" height="30" as="geometry" />
+          <mxGeometry x="-1160.15" y="600" width="160" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="_UF3kFiP3G3Olu9frHUj-39" value="&lt;blockquote style=&quot;margin: 0px; border: none; padding: 0px;&quot;&gt;&lt;b&gt;&lt;u&gt;AccountRoles&lt;/u&gt;&lt;/b&gt;&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=center;fillColor=#1ba1e2;strokeColor=default;fontColor=#ffffff;" vertex="1" parent="1">
+        <mxCell id="_UF3kFiP3G3Olu9frHUj-39" value="&lt;blockquote style=&quot;margin: 0px; border: none; padding: 0px;&quot;&gt;&lt;b&gt;&lt;u&gt;AccountRoles&lt;/u&gt;&lt;/b&gt;&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=center;fillColor=#1ba1e2;strokeColor=default;fontColor=#ffffff;" parent="1" vertex="1">
-          <mxGeometry x="-1160" y="640" width="160" height="30" as="geometry" />
+          <mxGeometry x="-1159.47" y="670" width="160" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="_UF3kFiP3G3Olu9frHUj-40" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;name: String&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" vertex="1" parent="1">
+        <mxCell id="_UF3kFiP3G3Olu9frHUj-40" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;name: String&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" parent="1" vertex="1">
-          <mxGeometry x="-1160" y="700" width="160" height="30" as="geometry" />
+          <mxGeometry x="-1159.47" y="730" width="160" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="_UF3kFiP3G3Olu9frHUj-41" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;&lt;u&gt;id:&amp;nbsp;&lt;/u&gt;&lt;u style=&quot;background-color: initial;&quot;&gt;Number&lt;/u&gt;&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" vertex="1" parent="1">
+        <mxCell id="_UF3kFiP3G3Olu9frHUj-41" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;&lt;u&gt;id:&amp;nbsp;&lt;/u&gt;&lt;u style=&quot;background-color: initial;&quot;&gt;Number&lt;/u&gt;&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" parent="1" vertex="1">
-          <mxGeometry x="-1160" y="670" width="160" height="30" as="geometry" />
+          <mxGeometry x="-1159.47" y="700" width="160" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="_UF3kFiP3G3Olu9frHUj-44" 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="_UF3kFiP3G3Olu9frHUj-44" 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="-779.9100000000001" y="505" width="9.43" height="20" as="geometry" />
+          <mxGeometry x="-1016.47" y="605" width="9.43" height="20" as="geometry" />
         </mxCell>
-        <mxCell id="_UF3kFiP3G3Olu9frHUj-49" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;orderPrice: Number&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" vertex="1" parent="1">
+        <mxCell id="_UF3kFiP3G3Olu9frHUj-49" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;orderPrice: Number&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" parent="1" vertex="1">
-          <mxGeometry x="-439.99999999999994" y="510" width="160" height="30" as="geometry" />
+          <mxGeometry x="-439.99999999999994" y="480" width="160" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="_UF3kFiP3G3Olu9frHUj-52" value="" style="endArrow=open;endSize=12;startArrow=diamondThin;startSize=14;startFill=0;edgeStyle=orthogonalEdgeStyle;entryX=0;entryY=0.5;entryDx=0;entryDy=0;exitX=1;exitY=0.5;exitDx=0;exitDy=0;" edge="1" parent="1" source="_UF3kFiP3G3Olu9frHUj-25" target="xvubMpEdOjOFzFZ-NZdf-3">
+        <mxCell id="_UF3kFiP3G3Olu9frHUj-52" 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="_UF3kFiP3G3Olu9frHUj-25" target="xvubMpEdOjOFzFZ-NZdf-3" edge="1">
           <mxGeometry x="389.35999999999996" y="350" as="geometry">
             <mxPoint x="-890.0000000000001" y="179.99999999999994" as="sourcePoint" />
             <mxPoint x="-790.0000000000001" y="179.99999999999994" as="targetPoint" />
-          </mxGeometry>
-        </mxCell>
-        <mxCell id="_UF3kFiP3G3Olu9frHUj-53" 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="_UF3kFiP3G3Olu9frHUj-52">
-          <mxGeometry x="-1" relative="1" as="geometry">
-            <mxPoint x="10" y="-25" as="offset" />
-          </mxGeometry>
-        </mxCell>
-        <mxCell id="_UF3kFiP3G3Olu9frHUj-54" 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="_UF3kFiP3G3Olu9frHUj-52">
-          <mxGeometry x="1" relative="1" as="geometry">
-            <mxPoint x="-9" y="-25" as="offset" />
-          </mxGeometry>
-        </mxCell>
-        <mxCell id="_UF3kFiP3G3Olu9frHUj-55" value="" style="endArrow=open;endSize=12;startArrow=diamondThin;startSize=14;startFill=0;edgeStyle=orthogonalEdgeStyle;entryX=0;entryY=0.5;entryDx=0;entryDy=0;exitX=1;exitY=0.5;exitDx=0;exitDy=0;" edge="1" parent="1" source="_UF3kFiP3G3Olu9frHUj-29" target="xvubMpEdOjOFzFZ-NZdf-3">
-          <mxGeometry x="389.35999999999996" y="350" as="geometry">
-            <mxPoint x="-950.0000000000001" y="674.55" as="sourcePoint" />
-            <mxPoint x="-850.0000000000001" y="674.55" as="targetPoint" />
-          </mxGeometry>
-        </mxCell>
-        <mxCell id="_UF3kFiP3G3Olu9frHUj-56" 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="_UF3kFiP3G3Olu9frHUj-55">
-          <mxGeometry x="-1" relative="1" as="geometry">
-            <mxPoint x="10" y="-25" as="offset" />
-          </mxGeometry>
-        </mxCell>
-        <mxCell id="_UF3kFiP3G3Olu9frHUj-57" 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="_UF3kFiP3G3Olu9frHUj-55">
-          <mxGeometry x="1" relative="1" as="geometry">
-            <mxPoint x="-9" y="-25" as="offset" />
-          </mxGeometry>
-        </mxCell>
-        <mxCell id="_UF3kFiP3G3Olu9frHUj-58" 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=#2072B8;" vertex="1" parent="1">
-          <mxGeometry x="-1017" y="675" width="9.43" height="20" as="geometry" />
-        </mxCell>
-        <mxCell id="_UF3kFiP3G3Olu9frHUj-59" 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="_UF3kFiP3G3Olu9frHUj-38" target="_UF3kFiP3G3Olu9frHUj-41">
-          <mxGeometry x="389.35999999999996" y="350" as="geometry">
-            <mxPoint x="-940.0000000000001" y="650" as="sourcePoint" />
-            <mxPoint x="-840.0000000000001" y="650" as="targetPoint" />
             <Array as="points">
-              <mxPoint x="-950" y="515" />
+              <mxPoint x="-960" y="745" />
-              <mxPoint x="-950" y="685" />
+              <mxPoint x="-960" y="435" />
             </Array>
           </mxGeometry>
         </mxCell>
-        <mxCell id="_UF3kFiP3G3Olu9frHUj-60" 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="_UF3kFiP3G3Olu9frHUj-59">
+        <mxCell id="_UF3kFiP3G3Olu9frHUj-53" value="0..n" style="resizable=0;align=left;verticalAlign=top;labelBackgroundColor=#ffffff;fontSize=10;strokeColor=#003366;shadow=1;fillColor=#D4E1F5;fontColor=#003366" parent="_UF3kFiP3G3Olu9frHUj-52" connectable="0" vertex="1">
           <mxGeometry x="-1" relative="1" as="geometry">
-            <mxPoint x="-24" y="-28" as="offset" />
+            <mxPoint x="-27" y="-30" as="offset" />
           </mxGeometry>
         </mxCell>
-        <mxCell id="_UF3kFiP3G3Olu9frHUj-61" 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="_UF3kFiP3G3Olu9frHUj-59">
+        <mxCell id="_UF3kFiP3G3Olu9frHUj-55" 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="_UF3kFiP3G3Olu9frHUj-29" target="xvubMpEdOjOFzFZ-NZdf-3" edge="1">
-          <mxGeometry x="1" relative="1" as="geometry">
+          <mxGeometry x="389.35999999999996" y="350" as="geometry">
-            <mxPoint x="15" y="-29" as="offset" />
+            <mxPoint x="-950.0000000000001" y="674.55" as="sourcePoint" />
+            <mxPoint x="-850.0000000000001" y="674.55" as="targetPoint" />
+            <Array as="points">
+              <mxPoint x="-960" y="555" />
+              <mxPoint x="-960" y="435" />
+            </Array>
           </mxGeometry>
         </mxCell>
-        <mxCell id="_UF3kFiP3G3Olu9frHUj-62" 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="xvubMpEdOjOFzFZ-NZdf-8" target="xvubMpEdOjOFzFZ-NZdf-3">
+        <mxCell id="_UF3kFiP3G3Olu9frHUj-56" value="0..n" style="resizable=0;align=left;verticalAlign=top;labelBackgroundColor=#ffffff;fontSize=10;strokeColor=#003366;shadow=1;fillColor=#D4E1F5;fontColor=#003366" parent="_UF3kFiP3G3Olu9frHUj-55" connectable="0" vertex="1">
+          <mxGeometry x="-1" relative="1" as="geometry">
+            <mxPoint x="-25" y="-29" as="offset" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="_UF3kFiP3G3Olu9frHUj-58" 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=#2072B8;" parent="1" vertex="1">
+          <mxGeometry x="-1016.47" y="705" width="9.43" height="20" as="geometry" />
+        </mxCell>
+        <mxCell id="_UF3kFiP3G3Olu9frHUj-62" 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="xvubMpEdOjOFzFZ-NZdf-8" target="xvubMpEdOjOFzFZ-NZdf-3" edge="1">
           <mxGeometry x="389.35999999999996" y="350" as="geometry">
             <mxPoint x="-779.9100000000001" y="604.4399999999999" as="sourcePoint" />
             <mxPoint x="-679.9100000000001" y="604.4399999999999" as="targetPoint" />
           </mxGeometry>
         </mxCell>
-        <mxCell id="_UF3kFiP3G3Olu9frHUj-63" 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="_UF3kFiP3G3Olu9frHUj-62">
+        <mxCell id="_UF3kFiP3G3Olu9frHUj-63" value="0..n" style="resizable=0;align=left;verticalAlign=top;labelBackgroundColor=#ffffff;fontSize=10;strokeColor=#003366;shadow=1;fillColor=#D4E1F5;fontColor=#003366" parent="_UF3kFiP3G3Olu9frHUj-62" connectable="0" vertex="1">
           <mxGeometry x="-1" relative="1" as="geometry">
             <mxPoint x="-22" y="-27" as="offset" />
           </mxGeometry>
         </mxCell>
-        <mxCell id="_UF3kFiP3G3Olu9frHUj-64" 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="_UF3kFiP3G3Olu9frHUj-62">
+        <mxCell id="_UF3kFiP3G3Olu9frHUj-64" value="1" style="resizable=0;align=right;verticalAlign=top;labelBackgroundColor=#ffffff;fontSize=10;strokeColor=#003366;shadow=1;fillColor=#D4E1F5;fontColor=#003366" parent="_UF3kFiP3G3Olu9frHUj-62" connectable="0" vertex="1">
           <mxGeometry x="1" relative="1" as="geometry">
             <mxPoint x="13" y="-32" as="offset" />
           </mxGeometry>
         </mxCell>
-        <mxCell id="_UF3kFiP3G3Olu9frHUj-65" 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="xvubMpEdOjOFzFZ-NZdf-42" target="xvubMpEdOjOFzFZ-NZdf-41">
+        <mxCell id="_UF3kFiP3G3Olu9frHUj-65" 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="xvubMpEdOjOFzFZ-NZdf-42" target="xvubMpEdOjOFzFZ-NZdf-41" edge="1">
           <mxGeometry x="389.35999999999996" y="350" as="geometry">
             <mxPoint x="-620.0000000000001" y="594.64" as="sourcePoint" />
             <mxPoint x="-520.0000000000001" y="594.64" as="targetPoint" />
           </mxGeometry>
         </mxCell>
-        <mxCell id="_UF3kFiP3G3Olu9frHUj-66" 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="_UF3kFiP3G3Olu9frHUj-65">
+        <mxCell id="_UF3kFiP3G3Olu9frHUj-66" value="0..n" style="resizable=0;align=left;verticalAlign=top;labelBackgroundColor=#ffffff;fontSize=10;strokeColor=#003366;shadow=1;fillColor=#D4E1F5;fontColor=#003366" parent="_UF3kFiP3G3Olu9frHUj-65" connectable="0" vertex="1">
           <mxGeometry x="-1" relative="1" as="geometry">
             <mxPoint x="-22" y="-28" as="offset" />
           </mxGeometry>
         </mxCell>
-        <mxCell id="_UF3kFiP3G3Olu9frHUj-67" 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="_UF3kFiP3G3Olu9frHUj-65">
+        <mxCell id="_UF3kFiP3G3Olu9frHUj-67" value="1" style="resizable=0;align=right;verticalAlign=top;labelBackgroundColor=#ffffff;fontSize=10;strokeColor=#003366;shadow=1;fillColor=#D4E1F5;fontColor=#003366" parent="_UF3kFiP3G3Olu9frHUj-65" connectable="0" vertex="1">
           <mxGeometry x="1" relative="1" as="geometry">
             <mxPoint x="14" y="-29" as="offset" />
           </mxGeometry>
         </mxCell>
-        <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;" vertex="1" parent="1">
+        <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="345" width="9.43" height="20" as="geometry" />
+          <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">
+          <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">
+          <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">
+          <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">
+          <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">
+          <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">
+          <mxGeometry x="389.35999999999996" y="350" as="geometry">
+            <mxPoint x="-935.44" y="680" as="sourcePoint" />
+            <mxPoint x="-670" y="720" as="targetPoint" />
+            <Array as="points">
+              <mxPoint x="-720" y="555" />
+              <mxPoint x="-720" y="715" />
+            </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">
+          <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">
+          <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">
+          <mxGeometry x="389.35999999999996" y="350" as="geometry">
+            <mxPoint x="-1130" y="865" as="sourcePoint" />
+            <mxPoint x="-1230" y="425" as="targetPoint" />
+            <Array as="points">
+              <mxPoint x="-1200" y="615" />
+              <mxPoint x="-1200" y="715" />
+            </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">
+          <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">
+          <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">
+          <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">
+          <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">
+          <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">
+          <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">
+          <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">
+          <mxGeometry x="-539.9100000000001" y="545" width="9.43" height="20" as="geometry" />
         </mxCell>
       </root>
     </mxGraphModel>

software/backend/data/accounts.json

@@ -9,6 +9,7 @@
       "lastName": "Hagemeister",
       "addresses": [
         {
+          "id": 0,
           "accountId": 0,
           "street": "Laportestraße",
           "houseNumber": 22,
@@ -18,6 +19,7 @@
       ],
       "payments": [
         {
+          "id": 0,
           "accountId": 0,
           "bankName": "Deutsche Bank",
           "iban": "DE92500105175721645777"
@@ -34,6 +36,7 @@
       "lastName": "Stoiber",
       "addresses": [
         {
+          "id": 1,
           "accountId": 1,
           "street": "Gustav-Adolf-Straße",
           "houseNumber": 30,
@@ -43,6 +46,7 @@
       ],
       "payments": [
         {
+          "id": 1,
           "accountId": 1,
           "bankName": "DZ Bank",
           "iban": "DE12500105179557939114"
@@ -59,6 +63,7 @@
       "lastName": "Oeter",
       "addresses": [
         {
+          "id": 2,
           "accountId": 2,
           "street": "Eckermannstraße",
           "houseNumber": 1,
@@ -66,6 +71,7 @@
           "city": "Hannover"
         },
         {
+          "id": 3,
           "accountId": 2,
           "street": "Gehrdener Straße",
           "houseNumber": 14,
@@ -75,6 +81,7 @@
       ],
       "payments": [
         {
+          "id": 2,
           "accountId": 2,
           "bankName": "Commerzbank",
           "iban": "DE31500105175417833272"
@@ -91,6 +98,7 @@
       "lastName": "Durand",
       "addresses": [
         {
+          "id": 4,
           "accountId": 3,
           "street": "Schlägerstraße",
           "houseNumber": 36,
@@ -98,6 +106,7 @@
           "city": "Hannover"
         },
         {
+          "id": 5,
           "accountId": 3,
           "street": "Else-Ury-Weg",
           "houseNumber": 20,
@@ -107,6 +116,7 @@
       ],
       "payments": [
         {
+          "id": 3,
           "accountId": 3,
           "bankName": "ING",
           "iban": "DE41500105172184936679"
@@ -123,6 +133,7 @@
       "lastName": "Furtwängler",
       "addresses": [
         {
+          "id": 6,
           "accountId": 4,
           "street": "Steinmetzstraße",
           "houseNumber": 12,
@@ -132,6 +143,7 @@
       ],
       "payments": [
         {
+          "id": 4,
           "accountId": 4,
           "bankName": "Sparkasse Hannover",
           "iban": "DE85500105172283979774"
@@ -148,6 +160,7 @@
       "lastName": "Herbst",
       "addresses": [
         {
+          "id": 7,
           "accountId": 5,
           "street": "Allerweg",
           "houseNumber": 33,
@@ -157,6 +170,7 @@
       ],
       "payments": [
         {
+          "id": 5,
           "accountId": 5,
           "bankName": "Postbank",
           "iban": "DE45500105178862417577"
@@ -173,6 +187,7 @@
       "lastName": "Seibert",
       "addresses": [
         {
+          "id": 8,
           "accountId": 6,
           "street": "Marktstraße",
           "houseNumber": 26,
@@ -180,6 +195,7 @@
           "city": "Laatzen"
         },
         {
+          "id": 9,
           "accountId": 6,
           "street": "Kleiner Hillen",
           "houseNumber": 24,
@@ -189,6 +205,7 @@
       ],
       "payments": [
         {
+          "id": 6,
           "accountId": 6,
           "bankName": "Sparkasse Hannover",
           "iban": "DE51500105177526222196"

software/backend/data/orders.json

@@ -3,17 +3,23 @@
     {
       "id": 0,
       "accountId": 0,
-      "shippingProgress": 4
+      "shippingProgress": 4,
+      "addressId": 0,
+      "paymentId": 0
     },
     {
       "id": 1,
       "accountId": 3,
-      "shippingProgress": 5
+      "shippingProgress": 5,
+      "addressId": 4,
+      "paymentId": 3
     },
     {
       "id": 2,
       "accountId": 3,
-      "shippingProgress": 2
+      "shippingProgress": 2,
+      "addressId": 5,
+      "paymentId": 3
     }
   ]
 }

software/backend/models/address.model.ts

@@ -1,5 +1,6 @@
-import { BelongsTo, Column, ForeignKey, Model, Table } from "sequelize-typescript";
+import { BelongsTo, Column, ForeignKey, HasMany, Model, Table } from "sequelize-typescript";
 import { Account } from "./account.model";
+import { Order } from "./order.model";
 
 @Table({ timestamps: false })
 export class Address extends Model {
@@ -24,4 +25,7 @@ export class Address extends Model {
   
   @BelongsTo(() => Account)
   account: Account
+
+  @HasMany(() => Order)
+  orders: Order[]
 }

software/backend/models/order.model.ts

@@ -1,6 +1,8 @@
 import { Table, Column, Model, BelongsTo, ForeignKey, HasMany, BelongsToMany, Default } from 'sequelize-typescript';
 import { Account } from './account.model';
 import { OrderItem } from './orderItem.model';
+import { Address } from './address.model';
+import { Payment } from './payment.model';
 
 @Table({
   updatedAt: false,
@@ -18,11 +20,26 @@ export class Order extends Model {
   @Column
   shippingProgress: number
 
+  @ForeignKey(() => Address)
+  @Column
+  addressId: number
+
+  @ForeignKey(() => Payment)
+  @Column
+  paymentId: number
+
 
   // Relations
+
   @BelongsTo(() => Account)
   account: Account
 
+  @BelongsTo(() => Address)
+  address: Address
+
+  @BelongsTo(() => Payment)
+  payment: Payment
+
   @HasMany(() => OrderItem)
   orderItems: OrderItem[]
 }

software/backend/models/payment.model.ts

@@ -1,5 +1,6 @@
-import { BelongsTo, Column, ForeignKey, Model, Table } from "sequelize-typescript";
+import { BelongsTo, Column, ForeignKey, HasMany, Model, Table } from "sequelize-typescript";
 import { Account } from "./account.model";
+import { Order } from "./order.model";
 
 @Table({ timestamps: false })
 export class Payment extends Model {
@@ -15,6 +16,10 @@ export class Payment extends Model {
 
 
   // Relations
+  
   @BelongsTo(() => Account)
   account: Account
+
+  @HasMany(() => Order)
+  orders: Order[]
 }

software/backend/routes/order.routes.ts

@@ -4,7 +4,8 @@ import { Product } from "../models/product.model";
 import { OrderItem } from "../models/orderItem.model";
 import { Brand } from "../models/brand.model";
 import { Category } from "../models/category.model";
-import { Sequelize } from "sequelize-typescript";
+import { Payment } from "../models/payment.model";
+import { Address } from "../models/address.model";
 
 export const order = Router()
 
@@ -27,7 +28,9 @@ order.get("/:id", (req: Request, res: Response) => {
             }
           },
         ]
-      }
+      },
+      Payment,
+      Address
     ]
   })
     .then(orders => {
@@ -49,7 +52,10 @@ order.post("/", (req: Request, res: Response) => {
 
         Product.decrement(
           "inStock", 
-          { where: { id: orderItem.productId } }
+          {
+            by: orderItem.quantity,
+            where: { id: orderItem.productId } 
+          }
         )
       }
 

software/src/components/confirmDialog.vue

@@ -32,13 +32,15 @@ function confirmPressed() {
     <template #actions>
       <outlined-button
         @click="showDialog = false" 
-        color="green"
+        prepend-icon="mdi-close"
+        color="orange"
       >
         {{ $t("dialog.cancel") }}
       </outlined-button>
 
       <outlined-button
         @click="confirmPressed"
+        prepend-icon="mdi-check"
         color="red"
       >
         {{ $t("dialog.confirm") }}

software/src/data/api/orderApi.ts

@@ -9,7 +9,12 @@ export async function getUserOrders(userId: number) {
   return axios.get(BASE_URL + "/" + userId)
 }
 
-export async function addOrder(accountId: number, basketItems: Array<BasketItemModel>) {
+export async function addOrder(
+  accountId: number, 
+  basketItems: Array<BasketItemModel>,
+  paymentId: number,
+  addressId: number
+) {
   let orderItems = []
 
   for (let basketItem of basketItems) {
@@ -22,6 +27,8 @@ export async function addOrder(accountId: number, basketItems: Array<BasketItemM
 
   return axios.post(BASE_URL, {
     accountId: accountId,
-    orderItems: orderItems
+    orderItems: orderItems,
+    paymentId: paymentId,
+    addressId: addressId
   })
 }

software/src/data/models/orderModel.ts

@@ -1,4 +1,6 @@
+import { AddressModel } from "./addressModel"
 import { OrderItemModel } from "./orderItemModel"
+import { PaymentModel } from "./paymentModel"
 
 export class OrderModel {
   id: number
@@ -6,4 +8,6 @@ export class OrderModel {
   shippingProgress: number
   orderItems: Array<OrderItemModel>
   orderedAt: string
+  payment: PaymentModel
+  address: AddressModel
 }

software/src/data/stores/basketStore.ts

@@ -8,10 +8,14 @@ import { addOrder } from "../api/orderApi";
 import { useAccountStore } from "./accountStore";
 import { ProductModel } from "../models/productModel";
 import { useProductStore } from "./productStore";
+import { AddressModel } from "../models/addressModel";
+import { PaymentModel } from "../models/paymentModel";
 
 export const useBasketStore = defineStore('basketStore', {
   state: () => ({
-    itemsInBasket: useLocalStorage<Array<BasketItemModel>>("hackmycart/basketStore/productsInBasket", [])
+    itemsInBasket: useLocalStorage<Array<BasketItemModel>>("hackmycart/basketStore/productsInBasket", []),
+    usedAddress: useLocalStorage("hackmycart/basketStore/usedAddress", new AddressModel()),
+    usedPayment: useLocalStorage("hackmycart/basketStore/usedPayment", new PaymentModel())
   }),
 
   getters: {
@@ -73,12 +77,20 @@ export const useBasketStore = defineStore('basketStore', {
     async takeOrder() {
       const accountStore = useAccountStore()
       const productStore = useProductStore()
+      const feedbackStore = useFeedbackStore()
 
-      await addOrder(accountStore.userAccount.id, this.itemsInBasket)
+      await addOrder(accountStore.userAccount.id, this.itemsInBasket, this.usedPayment.id, this.usedAddress.id)
-      this.itemsInBasket = []
+        .then(async result => {
+          if (result.status == 201) {
+            await accountStore.refreshOrders()
+            await productStore.fetchAllProducts()
 
-      await accountStore.refreshOrders()
+            this.itemsInBasket = []
-      await productStore.fetchAllProducts()
+            feedbackStore.changeBanner(BannerStateEnum.ORDERPLACESUCCESSFUL)
+          } else {
+            feedbackStore.changeBanner(BannerStateEnum.ERROR)
+          }
+        })
     }
   }
 })

software/src/data/stores/feedbackStore.ts

@@ -20,6 +20,7 @@ export const useFeedbackStore = defineStore("feedbackStore", {
 
   actions: {
     changeBanner(bannerState: BannerStateEnum) {
+      // Banner message
       switch (bannerState) {
         ////////// System feedback //////////
 
@@ -107,6 +108,8 @@ export const useFeedbackStore = defineStore("feedbackStore", {
         }
       }
 
+      // Banner color
+
       switch (bannerState) {
         case BannerStateEnum.ERROR:
         case BannerStateEnum.ACCOUNTLOGINERROR:
@@ -118,9 +121,9 @@ export const useFeedbackStore = defineStore("feedbackStore", {
         case BannerStateEnum.PRODUCTDELETESUCCESSFUL:
         case BannerStateEnum.PRODUCTDELETEERROR:
           this.color = "red"
-          this.icon = "mdi-alert-circle"
           break;
         
+        case BannerStateEnum.BASKETPRODUCTADDED:
         case BannerStateEnum.DATABASERESETSUCCESSFUL:
         case BannerStateEnum.ACCOUNTLOGINSUCCESSFUL:
         case BannerStateEnum.ACCOUNTREGISTERSUCCESSFUL:
@@ -132,10 +135,74 @@ export const useFeedbackStore = defineStore("feedbackStore", {
         case BannerStateEnum.PRODUCTCREATESUCCESSFUL:
         case BannerStateEnum.PRODUCTCREATEERROR:
           this.color = "green"
-          this.icon = "mdi-check-circle"
+          break;
-          break
+
+        case BannerStateEnum.BASKETPRODUCTREMOVED:
+          this.color = "blue"
       }
 
+
+      // Banner icon
+
+      switch (bannerState) {
+        case BannerStateEnum.ERROR:
+          this.icon = "mdi-alert-circle"
+          break;
+
+        case BannerStateEnum.ACCOUNTLOGINERROR:
+        case BannerStateEnum.ACCOUNTLOGINWRONGLOGIN:
+        case BannerStateEnum.ACCOUNTREGISTERERROR:
+        case BannerStateEnum.ACCOUNTREGISTERUSERNAMEINUSE:
+          this.icon = "mdi-account"
+          break;
+
+        case BannerStateEnum.CATEGORYCREATEERROR:
+        case BannerStateEnum.CATEGORYDELETEERROR:
+        case BannerStateEnum.CATEGORYCREATESUCCESSFUL:
+        case BannerStateEnum.CATEGORYDELETESUCESSFUL:
+          this.icon = "mdi-label"
+          break;
+
+        case BannerStateEnum.PRODUCTDELETESUCCESSFUL:
+        case BannerStateEnum.PRODUCTDELETEERROR:
+        case BannerStateEnum.PRODUCTCREATESUCCESSFUL:
+        case BannerStateEnum.PRODUCTCREATEERROR:
+          this.icon = "mdi-store"
+          break;
+        
+        case BannerStateEnum.DATABASERESETSUCCESSFUL:
+          this.icon = "mdi-database-refresh"
+          break;
+        
+        case BannerStateEnum.BASKETPRODUCTADDED:
+        case BannerStateEnum.BASKETPRODUCTREMOVED:
+          this.icon = "mdi-basket"
+          break;
+
+        case BannerStateEnum.ORDERPLACESUCCESSFUL:
+          this.icon = "mdi-basket-check"
+          break;
+
+        case BannerStateEnum.ACCOUNTLOGOUTSUCCESSFUL:
+          this.icon = "mdi-logout"
+          break;
+
+        case BannerStateEnum.ACCOUNTLOGINSUCCESSFUL:
+          this.icon = "mdi-login"
+          break;
+
+        case BannerStateEnum.ACCOUNTREGISTERSUCCESSFUL:
+          this.icon = "mdi-account-plus"
+          break;
+        
+        case BannerStateEnum.ACCOUNTUPDATESUCCESSFUL:
+          this.icon = "mdi-account-reactivate"
+          break;
+      }
+
+      
+      
+
       this.showBanner = true
     }
   }

software/src/locales/de.json

@@ -66,8 +66,8 @@
     "backToLogin": "Zurück zum Login",
     "delete": "Account löschen",
     "managingAccount": "Account verwalten",
-    "addresses": "Adressen",
+    "address": "Adresse | Addressen",
-    "payments": "Bezahlarten",
+    "payment": "Bezahlart | Bezahlarten",
     "masterData": "Stammdaten",
     "noAddresses": "Keine Adressen gefunden",
     "noPayments": "Keine Bezahlarten gefunden",

software/src/locales/en.json

@@ -66,8 +66,8 @@
     "register": "Create Account",
     "delete": "Delete Account",
     "managingAccount": "Managing Account",
-    "addresses": "Addresses",
+    "address": "Address | Addresses",
-    "payments": "Payments",
+    "payment": "Payment | Payments",
     "masterData": "Master data",
     "noAddresses": "No Addresses found",
     "noPayments": "No payments found",

software/src/pages/basketPage/orderingDialog.vue

@@ -9,12 +9,28 @@ const basketStore = useBasketStore()
 const accountStore = useAccountStore()
 const showDialog: ModelRef<boolean> = defineModel()
 const orderingInProgress = ref(false)
+const addressError = ref(false)
+const paymentError = ref(false)
 
 async function doOrder() {
   orderingInProgress.value = true
-  await basketStore.takeOrder()
+  addressError.value = false
+  paymentError.value = false
+
+  if (basketStore.usedAddress == null) {
+    addressError.value = true
+  }
+
+  if (basketStore.usedPayment == null){
+    paymentError.value = true
+  }
+
+  if (basketStore.usedAddress != null && basketStore.usedPayment != null) {
+    
+    await basketStore.takeOrder()
+    showDialog.value = false
+  }
   
-  showDialog.value = false
   orderingInProgress.value = false
 }
 </script>
@@ -25,29 +41,65 @@ async function doOrder() {
     icon="mdi-basket-check"
     v-model="showDialog"
     max-width="800"
+    persistent
   >
     <v-row>
       <v-col>
-        Address
+        {{ $t('account.address', accountStore.userAccount.addresses.length) }}
       </v-col>
     </v-row>
     
     <v-row>
       <v-col>
-        <v-radio-group>
+        <v-radio-group
+          v-model="basketStore.usedAddress"
+          :error="addressError"
+        >
           <v-radio
             v-for="address in accountStore.userAccount.addresses"
             :value="address"
             :label="address.street + ' ' + address.houseNumber + ', ' + address.postalCode + ' ' + address.city"
+            
+          />
+        </v-radio-group>
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        {{ $t('account.payment', accountStore.userAccount.payments.length) }}
+      </v-col>
+    </v-row>
+    
+    <v-row>
+      <v-col>
+        <v-radio-group
+          v-model="basketStore.usedPayment"
+        >
+          <v-radio
+            v-for="payment in accountStore.userAccount.payments"
+            :value="payment"
+            :label="payment.bankName + ': ' + payment.iban"
+            :error="paymentError"
           />
         </v-radio-group>
       </v-col>
     </v-row>
 
     <template #actions>
+      <outlined-button 
+        @click="showDialog = false"
+        prepend-icon="mdi-close"
+        color="orange"
+      >
+        {{ $t('dialog.cancel') }}
+      </outlined-button>
+
       <outlined-button
         @click="doOrder"
         :loading="orderingInProgress"
+        prepend-icon="mdi-send"
+        color="green"
       >
         {{ $t('ordering.takeOrder') }}
       </outlined-button>

software/src/pages/ordersPage/ordersCard.vue

@@ -36,46 +36,81 @@ function formatDateTimeString(string: string) {
     :subtitle="$t('totalPrice') + ': ' + accountStore.getOrderTotalPrice(order.id) + ' €'"
   >
     <template #withoutContainer>
-      <v-timeline direction="horizontal" side="start" size="x-large">
+      <v-row>
-        <v-timeline-item :dot-color="getDotColor(order, 1)" icon="mdi-basket-check">
+        <v-col>
-          {{ $t('orders.ordered') }}
+          <v-timeline direction="horizontal" side="start" size="x-large">
-        </v-timeline-item>
+            <v-timeline-item :dot-color="getDotColor(order, 1)" icon="mdi-basket-check">
+              {{ $t('orders.ordered') }}
+            </v-timeline-item>
 
-        <v-timeline-item :dot-color="getDotColor(order, 2)" icon="mdi-package-variant">
+            <v-timeline-item :dot-color="getDotColor(order, 2)" icon="mdi-package-variant">
-          {{ $t('orders.preparingForShipping') }}
+              {{ $t('orders.preparingForShipping') }}
-        </v-timeline-item>
+            </v-timeline-item>
 
-        <v-timeline-item :dot-color="getDotColor(order, 3)" icon="mdi-send">
+            <v-timeline-item :dot-color="getDotColor(order, 3)" icon="mdi-send">
-          {{ $t('orders.shipped') }}
+              {{ $t('orders.shipped') }}
-        </v-timeline-item>
+            </v-timeline-item>
 
-        <v-timeline-item :dot-color="getDotColor(order, 4)" icon="mdi-truck-fast">
+            <v-timeline-item :dot-color="getDotColor(order, 4)" icon="mdi-truck-fast">
-          {{ $t('orders.inDelivery') }}
+              {{ $t('orders.inDelivery') }}
-        </v-timeline-item>
+            </v-timeline-item>
 
-        <v-timeline-item :dot-color="getDotColor(order, 5)" icon="mdi-package-check">
+            <v-timeline-item :dot-color="getDotColor(order, 5)" icon="mdi-package-check">
-          {{ $t('orders.delivered') }}
+              {{ $t('orders.delivered') }}
-        </v-timeline-item>
+            </v-timeline-item>
-      </v-timeline>
+          </v-timeline>
+        </v-col>
+      </v-row>
 
-      <v-table class="bg-surface-light">
+      <v-row>
-        <thead>
+        <v-col>
-          <tr>
+          <v-card variant="outlined" class="ml-5 pa-3">
-            <th>{{ $t('quantity') }}</th>
+            <div class="text-h6">
-            <th>{{ $t('product.brand') }}</th>
+              <v-icon icon="mdi-home" />
-            <th>{{ $t('product.productName') }}</th>
+              {{ $t('account.address', 1) }}
-            <th>{{ $t('product.productPrice') }}</th>
+            </div>
-          </tr>
+
-        </thead>
+            <div class="pl-9">{{ order.address.street }} {{ order.address.houseNumber }}</div>
-        <tbody>
+            <div class="pl-9">{{ order.address.postalCode }} {{ order.address.city }}</div>
-          <tr v-for="orderItem in order.orderItems">
+          </v-card>
-            <td>{{ orderItem.quantity }}x</td>
+        </v-col>
-            <td>{{ orderItem.product.brand.name }}</td>
+
-            <td>{{ orderItem.product.name }}</td>
+        <v-col>
-            <td>{{ orderItem.product.price }} €</td>
+          <v-card variant="outlined" class="mr-5 pa-3">
-          </tr>
+            <div class="text-h6">
-        </tbody>
+              <v-icon icon="mdi-currency-usd" />
-      </v-table>
+              {{ $t('account.payment', 1) }}
+            </div>
+            <div class="pl-9">{{ order.payment.bankName }}</div>
+            <div class="pl-9">{{ order.payment.iban }}</div>
+          </v-card>
+        </v-col>
+
+        
+      </v-row>
+
+      <v-row>
+        <v-col>
+          <v-table class="bg-surface-light">
+            <thead>
+              <tr>
+                <th>{{ $t('quantity') }}</th>
+                <th>{{ $t('product.brand') }}</th>
+                <th>{{ $t('product.productName') }}</th>
+                <th>{{ $t('product.productPrice') }}</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="orderItem in order.orderItems">
+                <td>{{ orderItem.quantity }}x</td>
+                <td>{{ orderItem.product.brand.name }}</td>
+                <td>{{ orderItem.product.name }}</td>
+                <td>{{ orderItem.product.price }} €</td>
+              </tr>
+            </tbody>
+          </v-table>
+        </v-col>
+      </v-row>
     </template>
   </card-view>
 </template>

software/src/pages/productsPage/productDetailsDialog.vue

@@ -142,7 +142,7 @@ watch(() => props.product.images, () => {
         v-model="nrOfArticles"
         variant="outlined"
         :min="1"
-        :max="10"
+        :max="product.inStock"
         density="comfortable"
         :hide-details="true"
         :disabled="product.inStock == 0"