diff --git a/src/assets/icons/credit-card.svg b/src/assets/icons/credit-card.svg
new file mode 100644
index 0000000000000000000000000000000000000000..af1c97e2b29970b7ab6c9dc5fae1c50d36e64db7
--- /dev/null
+++ b/src/assets/icons/credit-card.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+ viewBox="0 0 512 512" xml:space="preserve">
+<g>
+ <g>
+ <g>
+ <path d="M76.8,358.4h153.6c4.71,0,8.533-3.823,8.533-8.533s-3.823-8.533-8.533-8.533H76.8c-4.71,0-8.533,3.823-8.533,8.533
+ S72.09,358.4,76.8,358.4z"/>
+ <path d="M503.467,221.867h-460.8c-4.71,0-8.533,3.823-8.533,8.533c0,4.71,3.823,8.533,8.533,8.533h452.267v162.133
+ c0,14.114-11.486,25.6-25.6,25.6H42.667c-11.87,0-25.6-8.755-25.6-25.6V213.333c0-4.71-3.823-8.533-8.533-8.533
+ S0,208.623,0,213.333v187.733c0,20.506,16.614,42.667,42.667,42.667h426.667c23.526,0,42.667-19.14,42.667-42.667V230.4
+ C512,225.69,508.177,221.867,503.467,221.867z"/>
+ <path d="M469.333,68.267H42.667C19.14,68.267,0,87.407,0,110.933v51.2c0,4.71,3.823,8.533,8.533,8.533h460.8
+ c4.71,0,8.533-3.823,8.533-8.533c0-4.71-3.823-8.533-8.533-8.533H17.067v-42.667c0-14.114,11.486-25.6,25.6-25.6h426.667
+ c14.114,0,25.6,11.486,25.6,25.6v85.333c0,4.71,3.823,8.533,8.533,8.533s8.533-3.823,8.533-8.533v-85.333
+ C512,87.407,492.86,68.267,469.333,68.267z"/>
+ <path d="M298.667,324.267c4.71,0,8.533-3.823,8.533-8.533s-3.823-8.533-8.533-8.533H230.4c-4.71,0-8.533,3.823-8.533,8.533
+ s3.823,8.533,8.533,8.533H298.667z"/>
+ <path d="M76.8,324.267h119.467c4.71,0,8.533-3.823,8.533-8.533s-3.823-8.533-8.533-8.533H76.8c-4.71,0-8.533,3.823-8.533,8.533
+ S72.09,324.267,76.8,324.267z"/>
+ </g>
+ </g>
+</g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/edit-button.svg b/src/assets/icons/edit-button.svg
new file mode 100644
index 0000000000000000000000000000000000000000..877f06fa63241e2343a3f38b3c7572c389b21648
--- /dev/null
+++ b/src/assets/icons/edit-button.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg fill="#FFFFFF" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="20px" height="20px" viewBox="0 0 494.936 494.936"
+ xml:space="preserve">
+<g>
+ <g>
+ <path d="M389.844,182.85c-6.743,0-12.21,5.467-12.21,12.21v222.968c0,23.562-19.174,42.735-42.736,42.735H67.157
+ c-23.562,0-42.736-19.174-42.736-42.735V150.285c0-23.562,19.174-42.735,42.736-42.735h267.741c6.743,0,12.21-5.467,12.21-12.21
+ s-5.467-12.21-12.21-12.21H67.157C30.126,83.13,0,113.255,0,150.285v267.743c0,37.029,30.126,67.155,67.157,67.155h267.741
+ c37.03,0,67.156-30.126,67.156-67.155V195.061C402.054,188.318,396.587,182.85,389.844,182.85z"/>
+ <path d="M483.876,20.791c-14.72-14.72-38.669-14.714-53.377,0L221.352,229.944c-0.28,0.28-3.434,3.559-4.251,5.396l-28.963,65.069
+ c-2.057,4.619-1.056,10.027,2.521,13.6c2.337,2.336,5.461,3.576,8.639,3.576c1.675,0,3.362-0.346,4.96-1.057l65.07-28.963
+ c1.83-0.815,5.114-3.97,5.396-4.25L483.876,74.169c7.131-7.131,11.06-16.61,11.06-26.692
+ C494.936,37.396,491.007,27.915,483.876,20.791z M466.61,56.897L257.457,266.05c-0.035,0.036-0.055,0.078-0.089,0.107
+ l-33.989,15.131L238.51,247.3c0.03-0.036,0.071-0.055,0.107-0.09L447.765,38.058c5.038-5.039,13.819-5.033,18.846,0.005
+ c2.518,2.51,3.905,5.855,3.905,9.414C470.516,51.036,469.127,54.38,466.61,56.897z"/>
+ </g>
+</g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/import.svg b/src/assets/icons/import.svg
new file mode 100644
index 0000000000000000000000000000000000000000..e832f47a76ed58d701ffe52126dc5245b3f3a877
--- /dev/null
+++ b/src/assets/icons/import.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#FFF" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+ viewBox="0 0 512 512" xml:space="preserve">
+<g>
+ <g>
+ <path d="M435.2,153.6H320v25.6h102.4v307.2H89.6V179.2H192v-25.6H76.8c-7.066,0-12.8,5.734-12.8,12.8v332.8
+ c0,7.066,5.734,12.8,12.8,12.8h358.4c7.066,0,12.8-5.734,12.8-12.8V166.4C448,159.334,442.266,153.6,435.2,153.6z"/>
+ </g>
+</g>
+<g>
+ <g>
+ <path d="M341.956,234.249c-4.941-5.052-13.056-5.146-18.099-0.205L268.8,287.898V12.8C268.8,5.734,263.066,0,256,0
+ c-7.066,0-12.8,5.734-12.791,12.8v275.089l-55.057-53.854c-5.043-4.941-13.158-4.847-18.099,0.205
+ c-4.941,5.06-4.855,13.158,0.205,18.099l76.8,75.128c5.043,4.949,13.158,4.855,18.099-0.188l76.595-74.931
+ C346.803,247.407,346.897,239.309,341.956,234.249z"/>
+ </g>
+</g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/money.svg b/src/assets/icons/money.svg
new file mode 100644
index 0000000000000000000000000000000000000000..05171388e0748405562a53b57dfc7b099a46de52
--- /dev/null
+++ b/src/assets/icons/money.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+ viewBox="0 0 487.4 487.4" xml:space="preserve">
+<g>
+ <path d="M103.4,196.55c13.4,0,24.3,10.9,24.3,24.3c0,13.4-10.9,24.3-24.3,24.3s-24.3-10.9-24.3-24.3
+ C79.1,207.45,90,196.55,103.4,196.55z M463.4,329.25H350.9c-5.2,0-9.5,4.2-9.5,9.5v15.2c0,5.2,4.2,9.5,9.5,9.5h112.5
+ c5.2,0,9.5-4.2,9.5-9.5v-15.2C472.9,333.55,468.6,329.25,463.4,329.25z M447.3,375.75H334.8c-5.2,0-9.5,4.2-9.5,9.5v15.2
+ c0,5.2,4.2,9.5,9.5,9.5h112.5c5.2,0,9.5-4.2,9.5-9.5v-15.2C456.7,379.95,452.5,375.75,447.3,375.75z M477.9,236.35H365.4
+ c-5.2,0-9.5,4.2-9.5,9.5v15.2c0,5.2,4.2,9.5,9.5,9.5h112.5c5.2,0,9.5-4.2,9.5-9.5v-15.2C487.4,240.65,483.1,236.35,477.9,236.35z
+ M325.3,292.25v15.2c0,5.2,4.2,9.5,9.5,9.5h112.5c5.2,0,9.5-4.2,9.5-9.5v-15.2c0-5.2-4.2-9.5-9.5-9.5H334.8
+ C329.6,282.85,325.3,287.05,325.3,292.25z M469.2,224.05c5.2,0,9.5-4.2,9.5-9.5v-15.2c0-5.2-4.2-9.5-9.5-9.5H356.8
+ c-5.2,0-9.5,4.2-9.5,9.5v15.2c0,5.2,4.2,9.5,9.5,9.5H469.2z M330.5,355.75v-18.8c0-4.2-3.4-7.7-7.7-7.7h-45.7h-196
+ c1.1-6,1-12.5-1.1-19.2c-3.3-10.7-11.2-19.5-21.2-24.5c-8.7-4.4-17-5-24.6-3.6v-122.9c9.1,1.6,19.2,0.5,29.8-6.7
+ c6.4-4.3,11.6-10.4,14.6-17.6c3.4-8.1,3.8-15.9,2.5-23.1h297.2c-1.5,6-1.7,12.5-0.1,19.2c3.5,15,15.6,26.9,30.7,30.2
+ c6.6,1.4,12.9,1.2,18.7-0.3v9.5c0,4.3,3.5,7.8,7.8,7.8H454c4.3,0,7.8-3.5,7.8-7.8v-52.8c0-22.1-17.9-40-40-40H40
+ c-22.1,0-40,17.9-40,40v205.8c0,22.1,17.9,40,40,40h237.1h45.7l0,0C327.1,363.45,330.5,360.05,330.5,355.75z M230.8,132.95
+ c48.3,0,87.6,39.3,87.6,87.6s-39.3,87.6-87.6,87.6s-87.6-39.3-87.6-87.6S182.5,132.95,230.8,132.95z M258.7,183.95l-39.2,39
+ l-16.4-16.5l-17.1,17l16.4,16.5l17,17.1l17.1-17l39.2-39L258.7,183.95z"/>
+</g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/money2.svg b/src/assets/icons/money2.svg
new file mode 100644
index 0000000000000000000000000000000000000000..1c856f799672d7c4e7dab518d1ff2030243e6ac1
--- /dev/null
+++ b/src/assets/icons/money2.svg
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+ viewBox="0 0 492.308 492.308" xml:space="preserve">
+<g>
+ <g>
+ <path d="M459.649,85.072H32.659C14.649,85.072,0,99.716,0,117.726v256.846c0,18.01,14.649,32.663,32.659,32.663h426.99
+ c18.01,0,32.659-14.654,32.659-32.663V117.726C492.308,99.716,477.659,85.072,459.649,85.072z M472.615,374.572
+ c0,7.154-5.817,12.971-12.966,12.971H32.659c-7.149,0-12.966-5.817-12.966-12.971V117.726c0-7.144,5.817-12.962,12.966-12.962
+ h426.99c7.149,0,12.966,5.817,12.966,12.962V374.572z"/>
+ </g>
+</g>
+<g>
+ <g>
+ <path d="M413.538,186.649c-12.577,0-22.813-10.231-22.813-22.808v-9.846H101.582v9.846c0,12.577-10.236,22.808-22.813,22.808
+ h-9.846v119h9.846c12.577,0,22.813,10.24,22.813,22.817v9.846h289.144v-9.846c0-12.577,10.236-22.817,22.813-22.817h9.846v-119
+ H413.538z M403.692,287.111c-15.543,3.702-27.808,15.962-31.51,31.51H120.125c-3.702-15.548-15.966-27.808-31.51-31.51v-81.923
+ c15.543-3.702,27.808-15.962,31.51-31.5h252.058c3.702,15.539,15.966,27.798,31.51,31.5V287.111z"/>
+ </g>
+</g>
+<g>
+ <g>
+ <path d="M246.154,204.341c-23.053,0-41.808,18.76-41.808,41.808c0,23.048,18.755,41.808,41.808,41.808
+ c23.053,0,41.808-18.76,41.808-41.808C287.962,223.101,269.207,204.341,246.154,204.341z M246.154,268.264
+ c-12.192,0-22.115-9.923-22.115-22.115c0-12.192,9.923-22.115,22.115-22.115s22.115,9.923,22.115,22.115
+ C268.269,258.341,258.346,268.264,246.154,268.264z"/>
+ </g>
+</g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/scale.svg b/src/assets/icons/scale.svg
new file mode 100644
index 0000000000000000000000000000000000000000..6e38442f3117cfa626f44a9a9350f97b1934bee3
--- /dev/null
+++ b/src/assets/icons/scale.svg
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+ viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
+<path id="Scales_2_" d="M63.8251495,32.9945984c-0.1864853-0.2723999-0.4950981-0.4354973-0.8251991-0.4354973h-1.8331985
+ L52.4423523,16.8237c-0.0451012-0.0813007-0.1013031-0.1539993-0.1653023-0.2182007
+ c-0.0056-0.0056-0.0128975-0.0091-0.0187988-0.0146999c-0.0770988-0.0739994-0.1661987-0.1308002-0.2619019-0.1766987
+ c-0.0278969-0.0132999-0.0550003-0.0247002-0.0842972-0.0354004c-0.1096001-0.0408001-0.224102-0.0696011-0.3446999-0.0696011
+ h-0.0049019h-18.5625v-4.9833994c0-0.5528002-0.4472008-1-1-1c-0.5526981,0-1,0.4471998-1,1v4.9833994H12.4335518
+ c-0.0018892,0-0.0028887,0-0.0048885,0c-0.1191111,0.0006008-0.232111,0.0293007-0.3405113,0.0696011
+ c-0.0300999,0.0110989-0.0573997,0.0231991-0.0857,0.0370998c-0.0906,0.0436993-0.1743002,0.0981998-0.2483006,0.1672001
+ c-0.0102997,0.0095997-0.0226994,0.0160999-0.0326996,0.0261002c-0.0651999,0.0662003-0.1223001,0.1406994-0.1677885,0.2243996
+ L3.043452,32.5591011H0.9999521c-0.33,0-0.6386,0.1630974-0.8252,0.4354973c-0.1865,0.2725029-0.2265,0.6192017-0.1064,0.9267998
+ c1.2704999,3.2685013,6.3554997,5.5508003,12.3652,5.5508003c6.0077991,0,11.0928001-2.282299,12.3633003-5.5508003
+ c0.1201-0.3075981,0.0800991-0.6542969-0.1064014-0.9267998c-0.1865997-0.2723999-0.4951992-0.4354973-0.8251991-0.4354973
+ h-1.8337994l-7.8999004-14.2500019h16.8683987v29.3094997h-5.9628983c-0.1767006,0-0.3505001,0.0469017-0.5029011,0.1357994
+ l-6.9638996,4.0557022c-0.3905888,0.2275009-0.5799999,0.6884003-0.4627991,1.125
+ c0.1180992,0.4365005,0.5135994,0.7392006,0.9657993,0.7392006h27.8514996c0.452198,0,0.8476982-0.3027,0.9659119-0.7392006
+ c0.1170883-0.4365997-0.0723114-0.8974991-0.4629135-1.125l-6.9618988-4.0557022
+ c-0.152401-0.0888977-0.3261871-0.1357994-0.5029984-0.1357994h-5.9629021V18.3090992h16.8889999l-7.7117004,14.2500019h-2.0424995
+ c-0.3300858,0-0.6386986,0.1630974-0.8251991,0.4354973c-0.1865005,0.2725029-0.2266006,0.6192017-0.1063995,0.9267998
+ c1.2705116,3.2685013,6.3554001,5.5508003,12.3642006,5.5508003s11.0937996-2.282299,12.3643112-5.5508003
+ C64.0517502,33.6138,64.0117493,33.2671013,63.8251495,32.9945984z M12.4335518,37.4721985
+ c-4.0448885,0-7.7528892-1.184597-9.5478001-2.9130974h19.0937004
+ C20.1845512,36.2876015,16.4775524,37.4721985,12.4335518,37.4721985z M5.318152,32.5591011l7.1262002-13.1690006
+ l7.3003111,13.1690006H5.318152z M42.2216644,51.6743011h-20.444313l3.5293121-2.0557022h13.3856888L42.2216644,51.6743011z
+ M51.5781517,19.3901005l7.3005104,13.1690006H44.4518509L51.5781517,19.3901005z M51.5673523,37.4721985
+ c-4.0449028,0-7.7518997-1.184597-9.5469017-2.9130974h19.0937996
+ C59.3193512,36.2876015,55.6122513,37.4721985,51.5673523,37.4721985z"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/trash-can.svg b/src/assets/icons/trash-can.svg
new file mode 100644
index 0000000000000000000000000000000000000000..2206f7cf70ee47cb883112fa37d704a09df1463a
--- /dev/null
+++ b/src/assets/icons/trash-can.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg fill="#FFFFFF" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="20px" height="20px" viewBox="0 0 408.483 408.483"
+ xml:space="preserve">
+<g>
+ <g>
+ <path d="M87.748,388.784c0.461,11.01,9.521,19.699,20.539,19.699h191.911c11.018,0,20.078-8.689,20.539-19.699l13.705-289.316
+ H74.043L87.748,388.784z M247.655,171.329c0-4.61,3.738-8.349,8.35-8.349h13.355c4.609,0,8.35,3.738,8.35,8.349v165.293
+ c0,4.611-3.738,8.349-8.35,8.349h-13.355c-4.61,0-8.35-3.736-8.35-8.349V171.329z M189.216,171.329
+ c0-4.61,3.738-8.349,8.349-8.349h13.355c4.609,0,8.349,3.738,8.349,8.349v165.293c0,4.611-3.737,8.349-8.349,8.349h-13.355
+ c-4.61,0-8.349-3.736-8.349-8.349V171.329L189.216,171.329z M130.775,171.329c0-4.61,3.738-8.349,8.349-8.349h13.356
+ c4.61,0,8.349,3.738,8.349,8.349v165.293c0,4.611-3.738,8.349-8.349,8.349h-13.356c-4.61,0-8.349-3.736-8.349-8.349V171.329z"/>
+ <path d="M343.567,21.043h-88.535V4.305c0-2.377-1.927-4.305-4.305-4.305h-92.971c-2.377,0-4.304,1.928-4.304,4.305v16.737H64.916
+ c-7.125,0-12.9,5.776-12.9,12.901V74.47h304.451V33.944C356.467,26.819,350.692,21.043,343.567,21.043z"/>
+ </g>
+</g>
+</svg>
\ No newline at end of file
diff --git a/src/components/BaseComponents/Menu.vue b/src/components/BaseComponents/Menu.vue
index c98a41c225e89cb0df4ddc69d378d9c74b75c197..a44cedcafc8e80e96e3c8cf8deea826889f8d58a 100644
--- a/src/components/BaseComponents/Menu.vue
+++ b/src/components/BaseComponents/Menu.vue
@@ -36,6 +36,8 @@
<ul class="dropdown-menu dropdown-username-content">
<li><a class="dropdown-item text-white dropdown-username-link" href="#"
@click="toUserProfile"><img src="@/assets/icons/person.svg">User Profile</a></li>
+ <li><a class="dropdown-item text-white dropdown-username-link" href="#"
+ @click="toBudget">Budget</a></li>
<li><a class="dropdown-item text-white dropdown-username-link" href="#"
@click="toFriends"><img src="@/assets/icons/friends.svg">Friends</a></li>
<li><a class="dropdown-item text-white dropdown-username-link" href="#"
@@ -68,6 +70,10 @@ function toHome() {
router.push('/')
}
+function toBudget() {
+ router.push('/budget-overview')
+}
+
function toSavingGoals() {
router.push('/roadmap')
}
@@ -92,9 +98,6 @@ function toFeedback() {
router.push('/feedback')
}
-function toFriends() {
- router.push('/friends')
-}
function toUserProfile() {
router.push('/profile')
diff --git a/src/components/Budget/BudgetBox.vue b/src/components/Budget/BudgetBox.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bf75574c9f70d67475b2ca3410c5a73661a9a600
--- /dev/null
+++ b/src/components/Budget/BudgetBox.vue
@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter();
+
+const props = defineProps({
+ title: {
+ type: String,
+ default: ''
+ },
+ budget: {
+ type: Number,
+ default: 0
+ },
+ expenses: {
+ type: Number,
+ default: 0
+ }
+})
+
+let balance = props.budget - props.expenses
+
+const iRef = ref(null)
+
+onMounted(() => {
+ if (balance >= 0) {
+ iRef.value.style.backgroundColor = 'rgba(34, 231, 50, 0.43)';
+ }
+})
+
+const onBudgetContainerPressed = () => {
+ router.push('/budget')
+}
+
+</script>
+
+<template>
+ <div class="container-fluid row" @click="onBudgetContainerPressed">
+ <div class="col-12">
+ <div class="title-container">
+ <h2>{{title}}</h2>
+ </div>
+ </div>
+
+ <div class="col-4 budget">
+ <i>
+ <img src="../../assets/icons/money2.svg" width="48px" height="48px">
+ </i>
+ <div class="budget-container">
+ <h5>{{budget}} kr</h5>
+ <p>Budget</p>
+ </div>
+ </div>
+
+ <div class="col-4 expenses">
+ <i>
+ <img src="../../assets/icons/credit-card.svg" width="48px" height="48px">
+ </i>
+ <div class="expenses-container">
+ <h5>{{expenses}} kr</h5>
+ <p>Expenses</p>
+ </div>
+ </div>
+
+ <div class="col-4 balance">
+ <i ref="iRef">
+ <img src="../../assets/icons/scale.svg" width="48px" height="48px">
+ </i>
+ <div class="balance-container">
+ <h5>{{balance}} kr</h5>
+ <p>Balance</p>
+ </div>
+ </div>
+ </div>
+</template>
+
+<style scoped>
+
+.title-container, .budget-container, .expenses-container, .balance-container {
+ display: grid;
+ align-self: center;
+}
+
+.container-fluid {
+ border: 4px solid #5959ea;
+ min-height: 90px;
+ border-radius: 15px;
+ transition: transform 150ms ease-in-out, border 200ms ease-in-out;
+ cursor: pointer;
+}
+
+.container-fluid:hover {
+ border: 4px solid #0000f1;
+ transform: scale(1.03);
+}
+
+h2, h5, p {
+ color: black;
+ align-self: center;
+}
+
+i {
+ display: grid;
+ justify-content: center;
+ align-content: center;
+ margin: 5px;
+ border-radius: 7px;
+}
+
+
+.budget i {
+ background-color: rgba(78, 107, 239, 0.43);
+}
+
+.expenses i {
+ background-color: rgba(238, 191, 43, 0.43);
+}
+
+.balance i {
+ background-color: rgba(232, 14, 14, 0.43);
+}
+
+div.col-4 {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ border-radius: 10px;
+ margin: 10px 0;
+}
+
+
+</style>
\ No newline at end of file
diff --git a/src/components/Budget/ExpenseBox.vue b/src/components/Budget/ExpenseBox.vue
new file mode 100644
index 0000000000000000000000000000000000000000..858d61179d6931f063859b0ca7e7f0a2664ffaa6
--- /dev/null
+++ b/src/components/Budget/ExpenseBox.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+
+import Button1 from '@/components/Buttons/Button1.vue'
+import { type CreateAppFunction, ref } from 'vue'
+
+const emit = defineEmits(['deleteEvent', 'editEvent']);
+const props = defineProps({
+ index: {
+ type: Number,
+ default: 0
+ },
+ description: {
+ type: String,
+ default: ''
+ },
+ amount: {
+ type: Number,
+ default: 0
+ }
+})
+
+let editDescription = ref('')
+let editAmount = ref('')
+
+const emitDeleteEvent = () => {
+ emit('deleteEvent', props.index)
+}
+
+const emitEditEvent = () => {
+ emit('editEvent', props.index, editDescription.value, editAmount.value)
+}
+</script>
+
+<template>
+ <div class="expense-container">
+ <p>{{index + 1}}</p>
+ <p>{{description}}</p>
+ <p>{{amount}} kr</p>
+ <button class="btn btn-success" data-bs-toggle="collapse" :data-bs-target="'#' + index" aria-expanded="false" aria-controls="editBudgetCollapse">
+ <img src="../../assets/icons/edit-button.svg" alt="Edit" height="18" width="18">
+ Edit
+ </button>
+ <button class="btn btn-danger" @click="emitDeleteEvent">
+ <img src="../../assets/icons/trash-can.svg" alt="Edit" height="18" width="18">
+ Delete
+ </button>
+ </div>
+
+ <div class="collapse" :id="index">
+ <div class="container collapse-container">
+ <form @submit.prevent="emitEditEvent">
+ <div class="input-group">
+ <span class="input-group-text">Edit expense #{{ index+1 }}: </span>
+ <input type="text" class="form-control" placeholder="Expense description" required v-model="editDescription">
+ <input type="number" min="0" class="form-control" placeholder="Amount (kr)" required v-model="editAmount">
+ <button type="submit" class="btn btn-primary" data-bs-toggle="collapse" :data-bs-target="'#' + index">Confirm</button>
+ </div>
+ </form>
+ </div>
+ </div>
+</template>
+
+<style scoped>
+.expense-container {
+ padding: 0 10px;
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr .6fr .6fr;
+ border-radius: 10px;
+ background-color: #2a2a34;
+ align-content: center;
+ justify-self: center;
+ margin: 10px 5px;
+}
+
+.expense-container p {
+ color: white;
+ align-self: center;
+ margin: 0;
+}
+
+.expense-container button {
+ margin: 5px;
+ padding: 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Configuration/ConfigurationSteps/SuitableChallenges.vue b/src/components/Configuration/ConfigurationSteps/SuitableChallenges.vue
index 2401b49d3f1452d28f4d3aa91732be573c9279b7..ef0d093bcdf1af8d832b5923de4aa0f2ec3b80e4 100644
--- a/src/components/Configuration/ConfigurationSteps/SuitableChallenges.vue
+++ b/src/components/Configuration/ConfigurationSteps/SuitableChallenges.vue
@@ -37,6 +37,7 @@ const onChangedChallengeEvent = (value) => {
else {
chosenChallenges.value = chosenChallenges.value.filter(item => item !== value[0]);
}
+ console.log(chosenChallenges.value)
}
/**
diff --git a/src/router/index.ts b/src/router/index.ts
index 1f5b39ed6f608232c44060a8e73a7ace61d144ae..70bd7ba69d8236b5ae338cec2490cb7c47ed272e 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -64,6 +64,16 @@ const routes = [
name: 'profile',
component: UserProfileView
},
+ {
+ path: '/budget-overview',
+ name: 'budget overview',
+ component: () => import('@/views/BudgetOverview.vue'),
+ },
+ {
+ path: '/budget',
+ name: 'budget',
+ component: () => import('@/views/BudgetView.vue'),
+ },
{
path: 'friends',
name: 'friends',
diff --git a/src/views/BudgetOverview.vue b/src/views/BudgetOverview.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6fc66387dd8dec41a6376be2610a549a831cc9db
--- /dev/null
+++ b/src/views/BudgetOverview.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import Button1 from '@/components/Buttons/Button1.vue'
+import BudgetBox from '@/components/Budget/BudgetBox.vue'
+</script>
+
+<template>
+ <div class="container">
+ <h1 class="text-center">Your Budgets</h1>
+ <button1 id="createBudgetButton" button-text="Create new budget" class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"/>
+
+ <div class="collapse" id="collapseExample">
+ <div class="container collapse-container">
+ <div class="input-group row">
+ <input id="collapseInput" class="col-5 form-control" type="text" placeholder="Enter name of budget">
+ <button1 id="collapseButton" class="col-1" button-text="Create" data-bs-dismiss="modal"/>
+ </div>
+ </div>
+ </div>
+
+ <ul class="budgetContainer">
+ <li><budget-box title="April 2024" budget="1000" expenses="908700"></budget-box></li>
+ <li><budget-box title="Mai 2024" budget="1000" expenses="87"></budget-box></li>
+ <li><budget-box title="Juni 2024" budget="1000" expenses="87"></budget-box></li>
+ <li><budget-box title="Juli 2024" budget="1000" expenses="87"></budget-box></li>
+ <li><budget-box title="August 2024" budget="1000" expenses="87"></budget-box></li>
+ <li><budget-box title="September 2024" budget="1000" expenses="87"></budget-box></li>
+ <li><budget-box title="Oktober 2024" budget="1000" expenses="87"></budget-box></li>
+ <li><budget-box title="November 2024" budget="1000" expenses="87"></budget-box></li>
+ <li><budget-box title="Desember 2024" budget="1000" expenses="87"></budget-box></li>
+ </ul>
+
+ <nav id="navbar" aria-label="Page navigation example">
+ <ul class="pagination">
+ <li class="page-item">
+ <a class="page-link" href="#" aria-label="Previous">
+ <span aria-hidden="true">«</span>
+ </a>
+ </li>
+ <li class="page-item"><a class="page-link" href="#">1</a></li>
+ <li class="page-item"><a class="page-link" href="#">2</a></li>
+ <li class="page-item"><a class="page-link" href="#">3</a></li>
+ <li class="page-item">
+ <a class="page-link" href="#" aria-label="Next">
+ <span aria-hidden="true">»</span>
+ </a>
+ </li>
+ </ul>
+ </nav>
+
+ </div>
+
+</template>
+
+<style scoped>
+
+.collapse-container {
+ align-content: center;
+ justify-content: center;
+ justify-items: center;
+}
+
+.container {
+ padding: 10px;
+}
+
+.budgetContainer {
+ list-style: none;
+ padding-left: 10px;
+}
+
+ul > li {
+ margin: 10px 0;
+}
+
+#navbar {
+
+}
+
+</style>
\ No newline at end of file
diff --git a/src/views/BudgetView.vue b/src/views/BudgetView.vue
new file mode 100644
index 0000000000000000000000000000000000000000..706a9bfc0bfd02254cbd530ba2814e64355ff381
--- /dev/null
+++ b/src/views/BudgetView.vue
@@ -0,0 +1,289 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import Button1 from '@/components/Buttons/Button1.vue'
+import ExpenseBox from '@/components/Budget/ExpenseBox.vue'
+import router from '@/router'
+
+// TODO Need endpoint in order to retrieve budget
+// Mocked values
+let title = ref('Mai 2024');
+let budget = ref(10000);
+let expenses = ref(0);
+let balance = ref(budget.value - expenses.value);
+let expenseJSONObject = ref({
+ "expenses": [
+ {
+ "title": "Ost",
+ "value": 30
+ },
+ {
+ "title": "Skinke",
+ "value": 20
+ },
+ {
+ "title": "Bread",
+ "value": 15
+ }
+ ]
+});
+
+for (let expense of expenseJSONObject.value.expenses) {
+ expenses.value += expense.value
+}
+
+// Reactive input values
+let budgetTitle = ref('')
+let budgetValue = ref()
+let expenseDescription = ref('')
+let expenseAmount = ref()
+
+const iRef = ref()
+
+onMounted(() => {
+ if (balance.value >= 0) {
+ iRef.value.style.backgroundColor = 'rgba(34, 231, 50, 0.43)';
+ }
+ balance.value = budget.value - expenses.value
+})
+
+const updateBalance = () => {
+ expenses.value = 0
+ for (let expense of expenseJSONObject.value.expenses) {
+ expenses.value += expense.value
+ }
+ balance.value = budget.value - expenses.value
+ if (balance.value >= 0) {
+ iRef.value.style.backgroundColor = 'rgba(34, 231, 50, 0.43)';
+ } else {
+ iRef.value.style.backgroundColor= 'rgba(232, 14, 14, 0.43)';
+ }
+}
+
+const calculateNewBudget = (newBudget: number) => {
+ budget.value = newBudget
+ updateBalance()
+}
+
+const addNewExpense = (expenseDescription: string, expenseValue: number) => {
+ expenseJSONObject.value.expenses.push({
+ "title": expenseDescription,
+ "value": expenseValue
+ });
+ updateBalance()
+}
+
+const editBudgetTitle = (newTitle: string) => {
+ title.value = newTitle
+}
+
+const deleteExpense = (index: number) => {
+ expenseJSONObject.value.expenses.splice(index, 1);
+ updateBalance()
+}
+
+const editExpense = (index: number, newDescription: string, newAmount: number) => {
+ console.log('Reached')
+ expenseJSONObject.value.expenses[index].title = newDescription
+ expenseJSONObject.value.expenses[index].value = newAmount
+ updateBalance()
+}
+
+// TODO add delete functionality
+const onDeleteBudgetPressed = () => {
+ router.push('/budget-overview')
+}
+
+</script>
+
+<template>
+ <div class="container">
+ <h1 class="text-center">{{ title }}</h1>
+
+ <div class="button-container">
+ <button1 id="optionButton" button-text="Options" data-bs-toggle="modal"
+ data-bs-target="#modal"/>
+ <button1 id="saveChanges" button-text="Save changes"/>
+ </div>
+
+ <div class="modal fade" id="modal">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h3>Options</h3>
+ <button class="btn btn-close" data-bs-dismiss="modal"></button>
+ </div>
+ <div class="modal-body">
+ <button id="importButton" class="btn btn-primary"><img src="../assets/icons/import.svg" height="20" width="20">Import budget</button>
+ <button id="editBudget" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#editBudgetCollapse" aria-expanded="false" aria-controls="editBudgetCollapse"><img src="../assets/icons/edit-button.svg" alt="editButton">Rename budget</button>
+ <div class="collapse" id="editBudgetCollapse">
+ <div class="container collapse-container">
+ <form @submit.prevent="editBudgetTitle(budgetTitle)">
+ <div class="input-group">
+ <input id="collapseInput" class="col-5 form-control" type="text" placeholder="Enter new name of budget" v-model="budgetTitle">
+ <button1 id="collapseButton" type="submit" button-text="Edit" data-bs-dismiss="modal" />
+ </div>
+ </form>
+ </div>
+ </div>
+ <button id="deleteButton" class="btn btn-primary" data-bs-toggle="modal" @click="onDeleteBudgetPressed"><img src="../assets/icons/trash-can.svg" height="20" width="20">Delete budget</button>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="budget-info-container">
+ <div class="info budget-container">
+ <i><img src="../assets/icons/money2.svg" width="48px" height="48px"></i>
+ <div class="budget-text-container">
+ <h5>{{budget}} kr</h5>
+ <p>Budget</p>
+ </div>
+ </div>
+
+ <div class="info expenses-container">
+ <i><img src="../assets/icons/credit-card.svg" width="48px" height="48px"></i>
+ <div class="expenses-text-container">
+ <h5>{{expenses}} kr</h5>
+ <p>Expenses</p>
+ </div>
+ </div>
+
+ <div class="info balance-container">
+ <i ref="iRef"><img src="../assets/icons/scale.svg" width="48px" height="48px"></i>
+ <div class="balance-text-container">
+ <h5>{{balance}} kr</h5>
+ <p>Balance</p>
+ </div>
+ </div>
+ </div>
+
+
+ <div class="budget-content-container">
+ <form class="budget-from" @submit.prevent="calculateNewBudget(budgetValue)">
+ <div class="input-group">
+ <span class="input-group-text">Your budget: </span>
+ <input type="text" class="form-control" placeholder="Enter your budget" required v-model="budgetValue">
+ <button type="submit" class="btn btn-primary">Calculate</button>
+ </div>
+ </form>
+
+ <form class="expenses-form" @submit.prevent="addNewExpense(expenseDescription, expenseAmount)">
+ <div class="input-group">
+ <span class="input-group-text">Add new expense: </span>
+ <input type="text" class="form-control" placeholder="Name of expense" required v-model="expenseDescription">
+ <input type="number" min="0" class="form-control" placeholder="Amount (kr)" required v-model="expenseAmount">
+ <button type="submit" class="btn btn-primary">Calculate</button>
+ </div>
+ </form>
+ </div>
+
+ <div class="expenses-details-container">
+ <h3>Expenses details</h3>
+ <div class="expense-box-container">
+ <expense-box v-for="(expense, index) in expenseJSONObject.expenses"
+ :key="index"
+ :index="index"
+ :description="expense.title"
+ :amount="expense.value"
+ @deleteEvent="deleteExpense"
+ @editEvent="editExpense"
+ />
+ </div>
+ </div>
+
+ </div>
+</template>
+
+<style scoped>
+
+.button-container {
+ display: flex;
+ gap: 10px;
+}
+
+.container.collapse-container {
+ padding: 0;
+ margin: 0;
+}
+
+.modal-header {
+ display: flex;
+}
+
+.modal-body {
+ display: grid;
+ gap: 10px
+}
+
+div.budget-info-container {
+ margin-top: 2rem;
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ justify-content: center;
+ gap: 1rem;
+}
+
+div.info {
+ display: flex;
+ flex-direction: row;
+ background-color: rgba(221, 221, 224, 0.5);
+ border-radius: 10px;
+ padding: 10px;
+ transition: transform 150ms ease-in-out;
+}
+
+div.info:hover {
+ transform: scale(1.03);
+}
+
+i {
+ display: grid;
+ justify-content: center;
+ align-content: center;
+ margin: 5px;
+ border-radius: 7px;
+ min-width: 90px;
+}
+
+.budget-container i {
+ background-color: rgba(78, 107, 239, 0.43);
+}
+
+.expenses-container i {
+ background-color: rgba(238, 191, 43, 0.43);
+}
+
+.balance-container i {
+ background-color: rgba(232, 14, 14, 0.43);
+}
+
+.budget-content-container {
+ margin: 2rem 0;
+ display: grid;
+ gap: 5px;
+}
+.budget-content-container label {
+ display: flex;
+ align-items: center;
+}
+
+
+.expenses-details-container {
+ margin: 1rem 0;
+ min-height: 80px;
+ border-radius: 8px;
+ background-color: rgba(234, 234, 234, 0.8);
+}
+
+.expenses-details-container h3 {
+ margin-top: 1rem;
+ padding: 10px;
+}
+
+.expense-box-container {
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100vh;
+}
+
+</style>
\ No newline at end of file