Merge branch 'master' of https://github.com/lumijiez/ExpenseTrackerFAF into front-v3

LICENSE

@@ -1,674 +0,0 @@
-                    GNU GENERAL PUBLIC LICENSE
-                       Version 3, 29 June 2007
-
- Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
- Everyone is permitted to copy and distribute verbatim copies
- of this license document, but changing it is not allowed.
-
-                            Preamble
-
-  The GNU General Public License is a free, copyleft license for
-software and other kinds of works.
-
-  The licenses for most software and other practical works are designed
-to take away your freedom to share and change the works.  By contrast,
-the GNU General Public License is intended to guarantee your freedom to
-share and change all versions of a program--to make sure it remains free
-software for all its users.  We, the Free Software Foundation, use the
-GNU General Public License for most of our software; it applies also to
-any other work released this way by its authors.  You can apply it to
-your programs, too.
-
-  When we speak of free software, we are referring to freedom, not
-price.  Our General Public Licenses are designed to make sure that you
-have the freedom to distribute copies of free software (and charge for
-them if you wish), that you receive source code or can get it if you
-want it, that you can change the software or use pieces of it in new
-free programs, and that you know you can do these things.
-
-  To protect your rights, we need to prevent others from denying you
-these rights or asking you to surrender the rights.  Therefore, you have
-certain responsibilities if you distribute copies of the software, or if
-you modify it: responsibilities to respect the freedom of others.
-
-  For example, if you distribute copies of such a program, whether
-gratis or for a fee, you must pass on to the recipients the same
-freedoms that you received.  You must make sure that they, too, receive
-or can get the source code.  And you must show them these terms so they
-know their rights.
-
-  Developers that use the GNU GPL protect your rights with two steps:
-(1) assert copyright on the software, and (2) offer you this License
-giving you legal permission to copy, distribute and/or modify it.
-
-  For the developers' and authors' protection, the GPL clearly explains
-that there is no warranty for this free software.  For both users' and
-authors' sake, the GPL requires that modified versions be marked as
-changed, so that their problems will not be attributed erroneously to
-authors of previous versions.
-
-  Some devices are designed to deny users access to install or run
-modified versions of the software inside them, although the manufacturer
-can do so.  This is fundamentally incompatible with the aim of
-protecting users' freedom to change the software.  The systematic
-pattern of such abuse occurs in the area of products for individuals to
-use, which is precisely where it is most unacceptable.  Therefore, we
-have designed this version of the GPL to prohibit the practice for those
-products.  If such problems arise substantially in other domains, we
-stand ready to extend this provision to those domains in future versions
-of the GPL, as needed to protect the freedom of users.
-
-  Finally, every program is threatened constantly by software patents.
-States should not allow patents to restrict development and use of
-software on general-purpose computers, but in those that do, we wish to
-avoid the special danger that patents applied to a free program could
-make it effectively proprietary.  To prevent this, the GPL assures that
-patents cannot be used to render the program non-free.
-
-  The precise terms and conditions for copying, distribution and
-modification follow.
-
-                       TERMS AND CONDITIONS
-
-  0. Definitions.
-
-  "This License" refers to version 3 of the GNU General Public License.
-
-  "Copyright" also means copyright-like laws that apply to other kinds of
-works, such as semiconductor masks.
-
-  "The Program" refers to any copyrightable work licensed under this
-License.  Each licensee is addressed as "you".  "Licensees" and
-"recipients" may be individuals or organizations.
-
-  To "modify" a work means to copy from or adapt all or part of the work
-in a fashion requiring copyright permission, other than the making of an
-exact copy.  The resulting work is called a "modified version" of the
-earlier work or a work "based on" the earlier work.
-
-  A "covered work" means either the unmodified Program or a work based
-on the Program.
-
-  To "propagate" a work means to do anything with it that, without
-permission, would make you directly or secondarily liable for
-infringement under applicable copyright law, except executing it on a
-computer or modifying a private copy.  Propagation includes copying,
-distribution (with or without modification), making available to the
-public, and in some countries other activities as well.
-
-  To "convey" a work means any kind of propagation that enables other
-parties to make or receive copies.  Mere interaction with a user through
-a computer network, with no transfer of a copy, is not conveying.
-
-  An interactive user interface displays "Appropriate Legal Notices"
-to the extent that it includes a convenient and prominently visible
-feature that (1) displays an appropriate copyright notice, and (2)
-tells the user that there is no warranty for the work (except to the
-extent that warranties are provided), that licensees may convey the
-work under this License, and how to view a copy of this License.  If
-the interface presents a list of user commands or options, such as a
-menu, a prominent item in the list meets this criterion.
-
-  1. Source Code.
-
-  The "source code" for a work means the preferred form of the work
-for making modifications to it.  "Object code" means any non-source
-form of a work.
-
-  A "Standard Interface" means an interface that either is an official
-standard defined by a recognized standards body, or, in the case of
-interfaces specified for a particular programming language, one that
-is widely used among developers working in that language.
-
-  The "System Libraries" of an executable work include anything, other
-than the work as a whole, that (a) is included in the normal form of
-packaging a Major Component, but which is not part of that Major
-Component, and (b) serves only to enable use of the work with that
-Major Component, or to implement a Standard Interface for which an
-implementation is available to the public in source code form.  A
-"Major Component", in this context, means a major essential component
-(kernel, window system, and so on) of the specific operating system
-(if any) on which the executable work runs, or a compiler used to
-produce the work, or an object code interpreter used to run it.
-
-  The "Corresponding Source" for a work in object code form means all
-the source code needed to generate, install, and (for an executable
-work) run the object code and to modify the work, including scripts to
-control those activities.  However, it does not include the work's
-System Libraries, or general-purpose tools or generally available free
-programs which are used unmodified in performing those activities but
-which are not part of the work.  For example, Corresponding Source
-includes interface definition files associated with source files for
-the work, and the source code for shared libraries and dynamically
-linked subprograms that the work is specifically designed to require,
-such as by intimate data communication or control flow between those
-subprograms and other parts of the work.
-
-  The Corresponding Source need not include anything that users
-can regenerate automatically from other parts of the Corresponding
-Source.
-
-  The Corresponding Source for a work in source code form is that
-same work.
-
-  2. Basic Permissions.
-
-  All rights granted under this License are granted for the term of
-copyright on the Program, and are irrevocable provided the stated
-conditions are met.  This License explicitly affirms your unlimited
-permission to run the unmodified Program.  The output from running a
-covered work is covered by this License only if the output, given its
-content, constitutes a covered work.  This License acknowledges your
-rights of fair use or other equivalent, as provided by copyright law.
-
-  You may make, run and propagate covered works that you do not
-convey, without conditions so long as your license otherwise remains
-in force.  You may convey covered works to others for the sole purpose
-of having them make modifications exclusively for you, or provide you
-with facilities for running those works, provided that you comply with
-the terms of this License in conveying all material for which you do
-not control copyright.  Those thus making or running the covered works
-for you must do so exclusively on your behalf, under your direction
-and control, on terms that prohibit them from making any copies of
-your copyrighted material outside their relationship with you.
-
-  Conveying under any other circumstances is permitted solely under
-the conditions stated below.  Sublicensing is not allowed; section 10
-makes it unnecessary.
-
-  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
-
-  No covered work shall be deemed part of an effective technological
-measure under any applicable law fulfilling obligations under article
-11 of the WIPO copyright treaty adopted on 20 December 1996, or
-similar laws prohibiting or restricting circumvention of such
-measures.
-
-  When you convey a covered work, you waive any legal power to forbid
-circumvention of technological measures to the extent such circumvention
-is effected by exercising rights under this License with respect to
-the covered work, and you disclaim any intention to limit operation or
-modification of the work as a means of enforcing, against the work's
-users, your or third parties' legal rights to forbid circumvention of
-technological measures.
-
-  4. Conveying Verbatim Copies.
-
-  You may convey verbatim copies of the Program's source code as you
-receive it, in any medium, provided that you conspicuously and
-appropriately publish on each copy an appropriate copyright notice;
-keep intact all notices stating that this License and any
-non-permissive terms added in accord with section 7 apply to the code;
-keep intact all notices of the absence of any warranty; and give all
-recipients a copy of this License along with the Program.
-
-  You may charge any price or no price for each copy that you convey,
-and you may offer support or warranty protection for a fee.
-
-  5. Conveying Modified Source Versions.
-
-  You may convey a work based on the Program, or the modifications to
-produce it from the Program, in the form of source code under the
-terms of section 4, provided that you also meet all of these conditions:
-
-    a) The work must carry prominent notices stating that you modified
-    it, and giving a relevant date.
-
-    b) The work must carry prominent notices stating that it is
-    released under this License and any conditions added under section
-    7.  This requirement modifies the requirement in section 4 to
-    "keep intact all notices".
-
-    c) You must license the entire work, as a whole, under this
-    License to anyone who comes into possession of a copy.  This
-    License will therefore apply, along with any applicable section 7
-    additional terms, to the whole of the work, and all its parts,
-    regardless of how they are packaged.  This License gives no
-    permission to license the work in any other way, but it does not
-    invalidate such permission if you have separately received it.
-
-    d) If the work has interactive user interfaces, each must display
-    Appropriate Legal Notices; however, if the Program has interactive
-    interfaces that do not display Appropriate Legal Notices, your
-    work need not make them do so.
-
-  A compilation of a covered work with other separate and independent
-works, which are not by their nature extensions of the covered work,
-and which are not combined with it such as to form a larger program,
-in or on a volume of a storage or distribution medium, is called an
-"aggregate" if the compilation and its resulting copyright are not
-used to limit the access or legal rights of the compilation's users
-beyond what the individual works permit.  Inclusion of a covered work
-in an aggregate does not cause this License to apply to the other
-parts of the aggregate.
-
-  6. Conveying Non-Source Forms.
-
-  You may convey a covered work in object code form under the terms
-of sections 4 and 5, provided that you also convey the
-machine-readable Corresponding Source under the terms of this License,
-in one of these ways:
-
-    a) Convey the object code in, or embodied in, a physical product
-    (including a physical distribution medium), accompanied by the
-    Corresponding Source fixed on a durable physical medium
-    customarily used for software interchange.
-
-    b) Convey the object code in, or embodied in, a physical product
-    (including a physical distribution medium), accompanied by a
-    written offer, valid for at least three years and valid for as
-    long as you offer spare parts or customer support for that product
-    model, to give anyone who possesses the object code either (1) a
-    copy of the Corresponding Source for all the software in the
-    product that is covered by this License, on a durable physical
-    medium customarily used for software interchange, for a price no
-    more than your reasonable cost of physically performing this
-    conveying of source, or (2) access to copy the
-    Corresponding Source from a network server at no charge.
-
-    c) Convey individual copies of the object code with a copy of the
-    written offer to provide the Corresponding Source.  This
-    alternative is allowed only occasionally and noncommercially, and
-    only if you received the object code with such an offer, in accord
-    with subsection 6b.
-
-    d) Convey the object code by offering access from a designated
-    place (gratis or for a charge), and offer equivalent access to the
-    Corresponding Source in the same way through the same place at no
-    further charge.  You need not require recipients to copy the
-    Corresponding Source along with the object code.  If the place to
-    copy the object code is a network server, the Corresponding Source
-    may be on a different server (operated by you or a third party)
-    that supports equivalent copying facilities, provided you maintain
-    clear directions next to the object code saying where to find the
-    Corresponding Source.  Regardless of what server hosts the
-    Corresponding Source, you remain obligated to ensure that it is
-    available for as long as needed to satisfy these requirements.
-
-    e) Convey the object code using peer-to-peer transmission, provided
-    you inform other peers where the object code and Corresponding
-    Source of the work are being offered to the general public at no
-    charge under subsection 6d.
-
-  A separable portion of the object code, whose source code is excluded
-from the Corresponding Source as a System Library, need not be
-included in conveying the object code work.
-
-  A "User Product" is either (1) a "consumer product", which means any
-tangible personal property which is normally used for personal, family,
-or household purposes, or (2) anything designed or sold for incorporation
-into a dwelling.  In determining whether a product is a consumer product,
-doubtful cases shall be resolved in favor of coverage.  For a particular
-product received by a particular user, "normally used" refers to a
-typical or common use of that class of product, regardless of the status
-of the particular user or of the way in which the particular user
-actually uses, or expects or is expected to use, the product.  A product
-is a consumer product regardless of whether the product has substantial
-commercial, industrial or non-consumer uses, unless such uses represent
-the only significant mode of use of the product.
-
-  "Installation Information" for a User Product means any methods,
-procedures, authorization keys, or other information required to install
-and execute modified versions of a covered work in that User Product from
-a modified version of its Corresponding Source.  The information must
-suffice to ensure that the continued functioning of the modified object
-code is in no case prevented or interfered with solely because
-modification has been made.
-
-  If you convey an object code work under this section in, or with, or
-specifically for use in, a User Product, and the conveying occurs as
-part of a transaction in which the right of possession and use of the
-User Product is transferred to the recipient in perpetuity or for a
-fixed term (regardless of how the transaction is characterized), the
-Corresponding Source conveyed under this section must be accompanied
-by the Installation Information.  But this requirement does not apply
-if neither you nor any third party retains the ability to install
-modified object code on the User Product (for example, the work has
-been installed in ROM).
-
-  The requirement to provide Installation Information does not include a
-requirement to continue to provide support service, warranty, or updates
-for a work that has been modified or installed by the recipient, or for
-the User Product in which it has been modified or installed.  Access to a
-network may be denied when the modification itself materially and
-adversely affects the operation of the network or violates the rules and
-protocols for communication across the network.
-
-  Corresponding Source conveyed, and Installation Information provided,
-in accord with this section must be in a format that is publicly
-documented (and with an implementation available to the public in
-source code form), and must require no special password or key for
-unpacking, reading or copying.
-
-  7. Additional Terms.
-
-  "Additional permissions" are terms that supplement the terms of this
-License by making exceptions from one or more of its conditions.
-Additional permissions that are applicable to the entire Program shall
-be treated as though they were included in this License, to the extent
-that they are valid under applicable law.  If additional permissions
-apply only to part of the Program, that part may be used separately
-under those permissions, but the entire Program remains governed by
-this License without regard to the additional permissions.
-
-  When you convey a copy of a covered work, you may at your option
-remove any additional permissions from that copy, or from any part of
-it.  (Additional permissions may be written to require their own
-removal in certain cases when you modify the work.)  You may place
-additional permissions on material, added by you to a covered work,
-for which you have or can give appropriate copyright permission.
-
-  Notwithstanding any other provision of this License, for material you
-add to a covered work, you may (if authorized by the copyright holders of
-that material) supplement the terms of this License with terms:
-
-    a) Disclaiming warranty or limiting liability differently from the
-    terms of sections 15 and 16 of this License; or
-
-    b) Requiring preservation of specified reasonable legal notices or
-    author attributions in that material or in the Appropriate Legal
-    Notices displayed by works containing it; or
-
-    c) Prohibiting misrepresentation of the origin of that material, or
-    requiring that modified versions of such material be marked in
-    reasonable ways as different from the original version; or
-
-    d) Limiting the use for publicity purposes of names of licensors or
-    authors of the material; or
-
-    e) Declining to grant rights under trademark law for use of some
-    trade names, trademarks, or service marks; or
-
-    f) Requiring indemnification of licensors and authors of that
-    material by anyone who conveys the material (or modified versions of
-    it) with contractual assumptions of liability to the recipient, for
-    any liability that these contractual assumptions directly impose on
-    those licensors and authors.
-
-  All other non-permissive additional terms are considered "further
-restrictions" within the meaning of section 10.  If the Program as you
-received it, or any part of it, contains a notice stating that it is
-governed by this License along with a term that is a further
-restriction, you may remove that term.  If a license document contains
-a further restriction but permits relicensing or conveying under this
-License, you may add to a covered work material governed by the terms
-of that license document, provided that the further restriction does
-not survive such relicensing or conveying.
-
-  If you add terms to a covered work in accord with this section, you
-must place, in the relevant source files, a statement of the
-additional terms that apply to those files, or a notice indicating
-where to find the applicable terms.
-
-  Additional terms, permissive or non-permissive, may be stated in the
-form of a separately written license, or stated as exceptions;
-the above requirements apply either way.
-
-  8. Termination.
-
-  You may not propagate or modify a covered work except as expressly
-provided under this License.  Any attempt otherwise to propagate or
-modify it is void, and will automatically terminate your rights under
-this License (including any patent licenses granted under the third
-paragraph of section 11).
-
-  However, if you cease all violation of this License, then your
-license from a particular copyright holder is reinstated (a)
-provisionally, unless and until the copyright holder explicitly and
-finally terminates your license, and (b) permanently, if the copyright
-holder fails to notify you of the violation by some reasonable means
-prior to 60 days after the cessation.
-
-  Moreover, your license from a particular copyright holder is
-reinstated permanently if the copyright holder notifies you of the
-violation by some reasonable means, this is the first time you have
-received notice of violation of this License (for any work) from that
-copyright holder, and you cure the violation prior to 30 days after
-your receipt of the notice.
-
-  Termination of your rights under this section does not terminate the
-licenses of parties who have received copies or rights from you under
-this License.  If your rights have been terminated and not permanently
-reinstated, you do not qualify to receive new licenses for the same
-material under section 10.
-
-  9. Acceptance Not Required for Having Copies.
-
-  You are not required to accept this License in order to receive or
-run a copy of the Program.  Ancillary propagation of a covered work
-occurring solely as a consequence of using peer-to-peer transmission
-to receive a copy likewise does not require acceptance.  However,
-nothing other than this License grants you permission to propagate or
-modify any covered work.  These actions infringe copyright if you do
-not accept this License.  Therefore, by modifying or propagating a
-covered work, you indicate your acceptance of this License to do so.
-
-  10. Automatic Licensing of Downstream Recipients.
-
-  Each time you convey a covered work, the recipient automatically
-receives a license from the original licensors, to run, modify and
-propagate that work, subject to this License.  You are not responsible
-for enforcing compliance by third parties with this License.
-
-  An "entity transaction" is a transaction transferring control of an
-organization, or substantially all assets of one, or subdividing an
-organization, or merging organizations.  If propagation of a covered
-work results from an entity transaction, each party to that
-transaction who receives a copy of the work also receives whatever
-licenses to the work the party's predecessor in interest had or could
-give under the previous paragraph, plus a right to possession of the
-Corresponding Source of the work from the predecessor in interest, if
-the predecessor has it or can get it with reasonable efforts.
-
-  You may not impose any further restrictions on the exercise of the
-rights granted or affirmed under this License.  For example, you may
-not impose a license fee, royalty, or other charge for exercise of
-rights granted under this License, and you may not initiate litigation
-(including a cross-claim or counterclaim in a lawsuit) alleging that
-any patent claim is infringed by making, using, selling, offering for
-sale, or importing the Program or any portion of it.
-
-  11. Patents.
-
-  A "contributor" is a copyright holder who authorizes use under this
-License of the Program or a work on which the Program is based.  The
-work thus licensed is called the contributor's "contributor version".
-
-  A contributor's "essential patent claims" are all patent claims
-owned or controlled by the contributor, whether already acquired or
-hereafter acquired, that would be infringed by some manner, permitted
-by this License, of making, using, or selling its contributor version,
-but do not include claims that would be infringed only as a
-consequence of further modification of the contributor version.  For
-purposes of this definition, "control" includes the right to grant
-patent sublicenses in a manner consistent with the requirements of
-this License.
-
-  Each contributor grants you a non-exclusive, worldwide, royalty-free
-patent license under the contributor's essential patent claims, to
-make, use, sell, offer for sale, import and otherwise run, modify and
-propagate the contents of its contributor version.
-
-  In the following three paragraphs, a "patent license" is any express
-agreement or commitment, however denominated, not to enforce a patent
-(such as an express permission to practice a patent or covenant not to
-sue for patent infringement).  To "grant" such a patent license to a
-party means to make such an agreement or commitment not to enforce a
-patent against the party.
-
-  If you convey a covered work, knowingly relying on a patent license,
-and the Corresponding Source of the work is not available for anyone
-to copy, free of charge and under the terms of this License, through a
-publicly available network server or other readily accessible means,
-then you must either (1) cause the Corresponding Source to be so
-available, or (2) arrange to deprive yourself of the benefit of the
-patent license for this particular work, or (3) arrange, in a manner
-consistent with the requirements of this License, to extend the patent
-license to downstream recipients.  "Knowingly relying" means you have
-actual knowledge that, but for the patent license, your conveying the
-covered work in a country, or your recipient's use of the covered work
-in a country, would infringe one or more identifiable patents in that
-country that you have reason to believe are valid.
-
-  If, pursuant to or in connection with a single transaction or
-arrangement, you convey, or propagate by procuring conveyance of, a
-covered work, and grant a patent license to some of the parties
-receiving the covered work authorizing them to use, propagate, modify
-or convey a specific copy of the covered work, then the patent license
-you grant is automatically extended to all recipients of the covered
-work and works based on it.
-
-  A patent license is "discriminatory" if it does not include within
-the scope of its coverage, prohibits the exercise of, or is
-conditioned on the non-exercise of one or more of the rights that are
-specifically granted under this License.  You may not convey a covered
-work if you are a party to an arrangement with a third party that is
-in the business of distributing software, under which you make payment
-to the third party based on the extent of your activity of conveying
-the work, and under which the third party grants, to any of the
-parties who would receive the covered work from you, a discriminatory
-patent license (a) in connection with copies of the covered work
-conveyed by you (or copies made from those copies), or (b) primarily
-for and in connection with specific products or compilations that
-contain the covered work, unless you entered into that arrangement,
-or that patent license was granted, prior to 28 March 2007.
-
-  Nothing in this License shall be construed as excluding or limiting
-any implied license or other defenses to infringement that may
-otherwise be available to you under applicable patent law.
-
-  12. No Surrender of Others' Freedom.
-
-  If conditions are imposed on you (whether by court order, agreement or
-otherwise) that contradict the conditions of this License, they do not
-excuse you from the conditions of this License.  If you cannot convey a
-covered work so as to satisfy simultaneously your obligations under this
-License and any other pertinent obligations, then as a consequence you may
-not convey it at all.  For example, if you agree to terms that obligate you
-to collect a royalty for further conveying from those to whom you convey
-the Program, the only way you could satisfy both those terms and this
-License would be to refrain entirely from conveying the Program.
-
-  13. Use with the GNU Affero General Public License.
-
-  Notwithstanding any other provision of this License, you have
-permission to link or combine any covered work with a work licensed
-under version 3 of the GNU Affero General Public License into a single
-combined work, and to convey the resulting work.  The terms of this
-License will continue to apply to the part which is the covered work,
-but the special requirements of the GNU Affero General Public License,
-section 13, concerning interaction through a network will apply to the
-combination as such.
-
-  14. Revised Versions of this License.
-
-  The Free Software Foundation may publish revised and/or new versions of
-the GNU General Public License from time to time.  Such new versions will
-be similar in spirit to the present version, but may differ in detail to
-address new problems or concerns.
-
-  Each version is given a distinguishing version number.  If the
-Program specifies that a certain numbered version of the GNU General
-Public License "or any later version" applies to it, you have the
-option of following the terms and conditions either of that numbered
-version or of any later version published by the Free Software
-Foundation.  If the Program does not specify a version number of the
-GNU General Public License, you may choose any version ever published
-by the Free Software Foundation.
-
-  If the Program specifies that a proxy can decide which future
-versions of the GNU General Public License can be used, that proxy's
-public statement of acceptance of a version permanently authorizes you
-to choose that version for the Program.
-
-  Later license versions may give you additional or different
-permissions.  However, no additional obligations are imposed on any
-author or copyright holder as a result of your choosing to follow a
-later version.
-
-  15. Disclaimer of Warranty.
-
-  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
-APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
-HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
-OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
-THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
-PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
-IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
-ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
-
-  16. Limitation of Liability.
-
-  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
-WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
-THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
-GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
-USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
-DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
-PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
-EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
-SUCH DAMAGES.
-
-  17. Interpretation of Sections 15 and 16.
-
-  If the disclaimer of warranty and limitation of liability provided
-above cannot be given local legal effect according to their terms,
-reviewing courts shall apply local law that most closely approximates
-an absolute waiver of all civil liability in connection with the
-Program, unless a warranty or assumption of liability accompanies a
-copy of the Program in return for a fee.
-
-                     END OF TERMS AND CONDITIONS
-
-            How to Apply These Terms to Your New Programs
-
-  If you develop a new program, and you want it to be of the greatest
-possible use to the public, the best way to achieve this is to make it
-free software which everyone can redistribute and change under these terms.
-
-  To do so, attach the following notices to the program.  It is safest
-to attach them to the start of each source file to most effectively
-state the exclusion of warranty; and each file should have at least
-the "copyright" line and a pointer to where the full notice is found.
-
-    <one line to give the program's name and a brief idea of what it does.>
-    Copyright (C) <year>  <name of author>
-
-    This program is free software: you can redistribute it and/or modify
-    it under the terms of the GNU General Public License as published by
-    the Free Software Foundation, either version 3 of the License, or
-    (at your option) any later version.
-
-    This program is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-    GNU General Public License for more details.
-
-    You should have received a copy of the GNU General Public License
-    along with this program.  If not, see <https://www.gnu.org/licenses/>.
-
-Also add information on how to contact you by electronic and paper mail.
-
-  If the program does terminal interaction, make it output a short
-notice like this when it starts in an interactive mode:
-
-    <program>  Copyright (C) <year>  <name of author>
-    This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
-    This is free software, and you are welcome to redistribute it
-    under certain conditions; type `show c' for details.
-
-The hypothetical commands `show w' and `show c' should show the appropriate
-parts of the General Public License.  Of course, your program's commands
-might be different; for a GUI interface, you would use an "about box".
-
-  You should also get your employer (if you work as a programmer) or school,
-if any, to sign a "copyright disclaimer" for the program, if necessary.
-For more information on this, and how to apply and follow the GNU GPL, see
-<https://www.gnu.org/licenses/>.
-
-  The GNU General Public License does not permit incorporating your program
-into proprietary programs.  If your program is a subroutine library, you
-may consider it more useful to permit linking proprietary applications with
-the library.  If this is what you want to do, use the GNU Lesser General
-Public License instead of this License.  But first, please read
-<https://www.gnu.org/licenses/why-not-lgpl.html>.

README.md

@@ -4,9 +4,6 @@
 
 Expense Tracker is a web application that helps you keep track of your expenses and incomes. It provides a user-friendly interface to enter and visualize your financial data, making it easier to manage your finances.
 
-![image](https://github.com/lumijiez/ExpenseTrackerFAF/assets/59575049/c81c16fe-10aa-4198-81e3-864578f73575)
-
-
 ## Features
 
 - Single-page application for a smooth and responsive user experience.
@@ -15,7 +12,7 @@ Expense Tracker is a web application that helps you keep track of your expenses
 - Full-fledged authorization system to secure your data.
 - Hosted database for seamless data storage and retrieval.
 
-## Technological Stack
+## Tech Stack
 
 ### Frontend
 

src/main/java/com/faf223/expensetrackerfaf/web/fullchain.pem

@@ -0,0 +1,86 @@
+-----BEGIN CERTIFICATE-----
+MIIEHTCCAwWgAwIBAgISBGYC3YGfvdZxQg6y2YUSjvzLMA0GCSqGSIb3DQEBCwUA
+MDIxCzAJBgNVBAYTAlVTMRYwFAYDVQQKEw1MZXQncyBFbmNyeXB0MQswCQYDVQQD
+EwJSMzAeFw0yMzEyMTIxOTAxNTVaFw0yNDAzMTExOTAxNTRaMBkxFzAVBgNVBAMT
+DnRyYWNraW8ub25saW5lMFkwEwYHKoZIzj0CAQYIKoZIzj0DAQcDQgAEirToCuVv
+qNiT3Rxqsyu2+OmD7TYBW+CV9639OW4FhwHaFxyzoCWI3/w3gZNVE/5Y1CvwHAsw
+qfuam0LjfbnKOKOCAg8wggILMA4GA1UdDwEB/wQEAwIHgDAdBgNVHSUEFjAUBggr
+BgEFBQcDAQYIKwYBBQUHAwIwDAYDVR0TAQH/BAIwADAdBgNVHQ4EFgQUmUFyQf+b
+b16jD80QRaO9ipw7h9kwHwYDVR0jBBgwFoAUFC6zF7dYVsuuUAlA5h+vnYsUwsYw
+VQYIKwYBBQUHAQEESTBHMCEGCCsGAQUFBzABhhVodHRwOi8vcjMuby5sZW5jci5v
+cmcwIgYIKwYBBQUHMAKGFmh0dHA6Ly9yMy5pLmxlbmNyLm9yZy8wGQYDVR0RBBIw
+EIIOdHJhY2tpby5vbmxpbmUwEwYDVR0gBAwwCjAIBgZngQwBAgEwggEDBgorBgEE
+AdZ5AgQCBIH0BIHxAO8AdQA7U3d1Pi25gE6LMFsG/kA7Z9hPw/THvQANLXJv4frU
+FwAAAYxfnyo6AAAEAwBGMEQCIBqYq5pa2GE7UNJHzN+1AAbw///s8PtWNkauU9UO
+igWZAiAktf1uf/O90k1l/+ihkPxJXToxcH5yeOiqATqDMol5PwB2AHb/iD8KtvuV
+UcJhzPWHujS0pM27KdxoQgqf5mdMWjp0AAABjF+fKoMAAAQDAEcwRQIgfNyTycHQ
+D1OMAOBA8vHAyu//5SjnY0BtCxOITyY/W1oCIQCCHFH+VKTFCglsqcp2hwQJHGq/
+jiSj4tR0jYIm5xMlaTANBgkqhkiG9w0BAQsFAAOCAQEAqu7cvsrkAnyrBgQHovQ4
+r+F1S/H6vu/Bvt9x+d125uDa/pT55JO/wG1IvdT9fxws2oYcc/nc8DjvW9U7+peu
+5K675kH09QTi+GhBAU4gZBhx3PohA6qG0Wm/6gC4lOq+S7o32x6RpoptcSvB3UXQ
+9BkgbO6LgDu99jPm6Acv4wre6trXAbPOpSlruSKSENnda7l/CamfiOX0cRKHjZdX
+PNpIfqWXokXNNYDAdrcXbOm7mFVMo1WcjBQM6E++IXfDRqHQ82Y94YVhEdH/hCo6
+3ce9uSrgL9+HcwhHzlZj20rTHFJ6iX/+Ffk8wbYfR4Eu7MXDg8ULT0z93yIvDxgy
+uw==
+-----END CERTIFICATE-----
+-----BEGIN CERTIFICATE-----
+MIIFFjCCAv6gAwIBAgIRAJErCErPDBinU/bWLiWnX1owDQYJKoZIhvcNAQELBQAw
+TzELMAkGA1UEBhMCVVMxKTAnBgNVBAoTIEludGVybmV0IFNlY3VyaXR5IFJlc2Vh
+cmNoIEdyb3VwMRUwEwYDVQQDEwxJU1JHIFJvb3QgWDEwHhcNMjAwOTA0MDAwMDAw
+WhcNMjUwOTE1MTYwMDAwWjAyMQswCQYDVQQGEwJVUzEWMBQGA1UEChMNTGV0J3Mg
+RW5jcnlwdDELMAkGA1UEAxMCUjMwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEK
+AoIBAQC7AhUozPaglNMPEuyNVZLD+ILxmaZ6QoinXSaqtSu5xUyxr45r+XXIo9cP
+R5QUVTVXjJ6oojkZ9YI8QqlObvU7wy7bjcCwXPNZOOftz2nwWgsbvsCUJCWH+jdx
+sxPnHKzhm+/b5DtFUkWWqcFTzjTIUu61ru2P3mBw4qVUq7ZtDpelQDRrK9O8Zutm
+NHz6a4uPVymZ+DAXXbpyb/uBxa3Shlg9F8fnCbvxK/eG3MHacV3URuPMrSXBiLxg
+Z3Vms/EY96Jc5lP/Ooi2R6X/ExjqmAl3P51T+c8B5fWmcBcUr2Ok/5mzk53cU6cG
+/kiFHaFpriV1uxPMUgP17VGhi9sVAgMBAAGjggEIMIIBBDAOBgNVHQ8BAf8EBAMC
+AYYwHQYDVR0lBBYwFAYIKwYBBQUHAwIGCCsGAQUFBwMBMBIGA1UdEwEB/wQIMAYB
+Af8CAQAwHQYDVR0OBBYEFBQusxe3WFbLrlAJQOYfr52LFMLGMB8GA1UdIwQYMBaA
+FHm0WeZ7tuXkAXOACIjIGlj26ZtuMDIGCCsGAQUFBwEBBCYwJDAiBggrBgEFBQcw
+AoYWaHR0cDovL3gxLmkubGVuY3Iub3JnLzAnBgNVHR8EIDAeMBygGqAYhhZodHRw
+Oi8veDEuYy5sZW5jci5vcmcvMCIGA1UdIAQbMBkwCAYGZ4EMAQIBMA0GCysGAQQB
+gt8TAQEBMA0GCSqGSIb3DQEBCwUAA4ICAQCFyk5HPqP3hUSFvNVneLKYY611TR6W
+PTNlclQtgaDqw+34IL9fzLdwALduO/ZelN7kIJ+m74uyA+eitRY8kc607TkC53wl
+ikfmZW4/RvTZ8M6UK+5UzhK8jCdLuMGYL6KvzXGRSgi3yLgjewQtCPkIVz6D2QQz
+CkcheAmCJ8MqyJu5zlzyZMjAvnnAT45tRAxekrsu94sQ4egdRCnbWSDtY7kh+BIm
+lJNXoB1lBMEKIq4QDUOXoRgffuDghje1WrG9ML+Hbisq/yFOGwXD9RiX8F6sw6W4
+avAuvDszue5L3sz85K+EC4Y/wFVDNvZo4TYXao6Z0f+lQKc0t8DQYzk1OXVu8rp2
+yJMC6alLbBfODALZvYH7n7do1AZls4I9d1P4jnkDrQoxB3UqQ9hVl3LEKQ73xF1O
+yK5GhDDX8oVfGKF5u+decIsH4YaTw7mP3GFxJSqv3+0lUFJoi5Lc5da149p90Ids
+hCExroL1+7mryIkXPeFM5TgO9r0rvZaBFOvV2z0gp35Z0+L4WPlbuEjN/lxPFin+
+HlUjr8gRsI3qfJOQFy/9rKIJR0Y/8Omwt/8oTWgy1mdeHmmjk7j1nYsvC9JSQ6Zv
+MldlTTKB3zhThV1+XWYp6rjd5JW1zbVWEkLNxE7GJThEUG3szgBVGP7pSWTUTsqX
+nLRbwHOoq7hHwg==
+-----END CERTIFICATE-----
+-----BEGIN CERTIFICATE-----
+MIIFYDCCBEigAwIBAgIQQAF3ITfU6UK47naqPGQKtzANBgkqhkiG9w0BAQsFADA/
+MSQwIgYDVQQKExtEaWdpdGFsIFNpZ25hdHVyZSBUcnVzdCBDby4xFzAVBgNVBAMT
+DkRTVCBSb290IENBIFgzMB4XDTIxMDEyMDE5MTQwM1oXDTI0MDkzMDE4MTQwM1ow
+TzELMAkGA1UEBhMCVVMxKTAnBgNVBAoTIEludGVybmV0IFNlY3VyaXR5IFJlc2Vh
+cmNoIEdyb3VwMRUwEwYDVQQDEwxJU1JHIFJvb3QgWDEwggIiMA0GCSqGSIb3DQEB
+AQUAA4ICDwAwggIKAoICAQCt6CRz9BQ385ueK1coHIe+3LffOJCMbjzmV6B493XC
+ov71am72AE8o295ohmxEk7axY/0UEmu/H9LqMZshftEzPLpI9d1537O4/xLxIZpL
+wYqGcWlKZmZsj348cL+tKSIG8+TA5oCu4kuPt5l+lAOf00eXfJlII1PoOK5PCm+D
+LtFJV4yAdLbaL9A4jXsDcCEbdfIwPPqPrt3aY6vrFk/CjhFLfs8L6P+1dy70sntK
+4EwSJQxwjQMpoOFTJOwT2e4ZvxCzSow/iaNhUd6shweU9GNx7C7ib1uYgeGJXDR5
+bHbvO5BieebbpJovJsXQEOEO3tkQjhb7t/eo98flAgeYjzYIlefiN5YNNnWe+w5y
+sR2bvAP5SQXYgd0FtCrWQemsAXaVCg/Y39W9Eh81LygXbNKYwagJZHduRze6zqxZ
+Xmidf3LWicUGQSk+WT7dJvUkyRGnWqNMQB9GoZm1pzpRboY7nn1ypxIFeFntPlF4
+FQsDj43QLwWyPntKHEtzBRL8xurgUBN8Q5N0s8p0544fAQjQMNRbcTa0B7rBMDBc
+SLeCO5imfWCKoqMpgsy6vYMEG6KDA0Gh1gXxG8K28Kh8hjtGqEgqiNx2mna/H2ql
+PRmP6zjzZN7IKw0KKP/32+IVQtQi0Cdd4Xn+GOdwiK1O5tmLOsbdJ1Fu/7xk9TND
+TwIDAQABo4IBRjCCAUIwDwYDVR0TAQH/BAUwAwEB/zAOBgNVHQ8BAf8EBAMCAQYw
+SwYIKwYBBQUHAQEEPzA9MDsGCCsGAQUFBzAChi9odHRwOi8vYXBwcy5pZGVudHJ1
+c3QuY29tL3Jvb3RzL2RzdHJvb3RjYXgzLnA3YzAfBgNVHSMEGDAWgBTEp7Gkeyxx
++tvhS5B1/8QVYIWJEDBUBgNVHSAETTBLMAgGBmeBDAECATA/BgsrBgEEAYLfEwEB
+ATAwMC4GCCsGAQUFBwIBFiJodHRwOi8vY3BzLnJvb3QteDEubGV0c2VuY3J5cHQu
+b3JnMDwGA1UdHwQ1MDMwMaAvoC2GK2h0dHA6Ly9jcmwuaWRlbnRydXN0LmNvbS9E
+U1RST09UQ0FYM0NSTC5jcmwwHQYDVR0OBBYEFHm0WeZ7tuXkAXOACIjIGlj26Ztu
+MA0GCSqGSIb3DQEBCwUAA4IBAQAKcwBslm7/DlLQrt2M51oGrS+o44+/yQoDFVDC
+5WxCu2+b9LRPwkSICHXM6webFGJueN7sJ7o5XPWioW5WlHAQU7G75K/QosMrAdSW
+9MUgNTP52GE24HGNtLi1qoJFlcDyqSMo59ahy2cI2qBDLKobkx/J3vWraV0T9VuG
+WCLKTVXkcGdtwlfFRjlBz4pYg1htmf5X6DYO8A4jqv2Il9DjXA6USbW1FzXSLr9O
+he8Y4IWS6wY7bCkjCWDcRQJMEhg76fsO3txE+FiYruq9RUWhiF1myv4Q6W+CyBFC
+Dfvp7OOGAN6dEOM4+qR9sdjoSYKEBpsr6GtPAQw4dy753ec5
+-----END CERTIFICATE-----

src/main/java/com/faf223/expensetrackerfaf/web/privkey.pem

@@ -0,0 +1,5 @@
+-----BEGIN PRIVATE KEY-----
+MIGHAgEAMBMGByqGSM49AgEGCCqGSM49AwEHBG0wawIBAQQg9kCIfgqNqFYgYU0Q
+HGi/jc5nLxhZxoXST5qeXBGtOAehRANCAASKtOgK5W+o2JPdHGqzK7b46YPtNgFb
+4JX3rf05bgWHAdoXHLOgJYjf/DeBk1UT/ljUK/AcCzCp+5qbQuN9uco4
+-----END PRIVATE KEY-----

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/+page.svelte

@@ -8,6 +8,8 @@
 
     function handleTabClick(tab) {
         selectedTab.set(tab);
+        // $isCategorizedIncome = false;
+        // $isCategorizedExpense = false;
     }
 
     let screenWidth;
@@ -39,9 +41,11 @@
 
 <style>
     @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400');
+    @import url('https://fonts.googleapis.com/css?family=Inconsolata');
 
     #wrapper {
         padding: 0;
+        font-family: Inconsolata,"Source Sans Pro",sans-serif;
         margin: 0;
         display: flex;
         align-items: stretch;

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/AdminPanel.svelte

@@ -1 +1,80 @@
-<h1>ADMIN PANEL</h1>
+<script>
+    import { onMount } from "svelte";
+    import axios from "axios";
+    import { getCookie } from "svelte-cookie";
+
+    let isLoaded = false;
+
+    onMount(async () => {
+        isLoaded = false;
+        isLoaded = true;
+        const token = getCookie('access_token');
+
+        if (token === '') {
+            window.location.href = '/auth/login';
+            return;
+        }
+
+        const config = {
+            headers: {
+                'Authorization': `Bearer ${token}`
+            }
+        };
+
+        try {
+            const response = await axios.get('https://trackio.online:8081/users', config);
+            const userResponse = response.data;
+            userData = userResponse;
+
+        } catch (error) {
+            console.error(error)
+        }
+    });
+</script>
+
+<div class="adminContainer">
+    {#if !isLoaded}
+        <div class="loading-container">
+            <div class="loading-spinner"></div>
+            <div class="loading-text">Loading...</div>
+        </div>
+    {:else}
+        LOL
+    {/if}
+</div>
+
+<style>
+
+    .adminContainer {
+        display: flex;
+        height: 100%;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .loading-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+    }
+
+    .loading-spinner {
+        border: 8px solid rgba(0, 0, 0, 0.1);
+        border-top: 8px solid #3498db;
+        border-radius: 50%;
+        width: 50px;
+        height: 50px;
+        animation: spin 1s linear infinite;
+    }
+
+    @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+    }
+
+    .loading-text {
+        margin-top: 10px;
+    }
+</style>

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/Dashboard.svelte

@@ -13,7 +13,8 @@
             monthIncome,
             monthExpense,
             tempExpense,
-            tempIncome
+            tempIncome, copyExpenseData, copyIncomeData,
+            isAdmin, username
         } from "../stores.js";
         import {globalStyles} from "../styles.js";
 
@@ -44,6 +45,17 @@
                 };
 
             try {
+
+                try {
+                    const response = await axios.get('https://trackio.online:8081/users/get-user-data', config);
+                    const data = response.data;
+                    $username = data.username;
+                    $isAdmin = data.userrole === 'ROLE_ADMIN';
+
+                } catch (error) {
+                    console.error('Error:', error);
+                }
+
                 const currentDate = new Date();
                 const currentMonth = currentDate.getMonth() + 1;
                 const [incomeResponse, expenseResponse, incomeTypesResponse, expenseTypesResponse] = await Promise.all([
@@ -58,6 +70,9 @@
                 incomeData.set(incomeResponse.data);
                 expenseData.set(expenseResponse.data);
 
+                copyExpenseData.set(expenseResponse.data);
+                copyIncomeData.set(incomeResponse.data);
+
                 incomeTypes.set(incomeTypesResponse.data);
                 expenseTypes.set(expenseTypesResponse.data);
 

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/ExpenseDashboard.svelte

@@ -3,6 +3,7 @@
     import QuickInfobar from "./expenses/other/QuickInfobar.svelte";
     import Expenses from "./expenses/infolists/Expenses.svelte";
     import Graph3 from "./expenses/graphs/Graph3.svelte";
+    import Graph2 from "./expenses/graphs/Graph2.svelte";
 </script>
 
 <div class="expenseContainer">
@@ -14,6 +15,7 @@
 
         <div class="graphs">
             <Graph3 />
+            <Graph2 />
         </div>
     </div>
     <Expenses />
@@ -26,6 +28,10 @@
             flex: 1 1 auto;
             width: 100%;
         }
+
+        .graphs {
+            flex-wrap: wrap;
+        }
     }
 
     .graphs {
@@ -42,6 +48,7 @@
     .expenseContainer {
         display: flex;
         height: 100%;
+        background-color: #172233;
         flex-direction: row;
         justify-content: space-between;
     }
@@ -53,7 +60,8 @@
         flex-direction: column;
         flex: 1 1 auto;
         background-color: #212942;
-        padding: 10px;
+        border-radius: 20px;
+        /*padding: 10px;*/
     }
 </style>
 

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/IncomeDashboard.svelte

@@ -1,9 +1,67 @@
 <script>
     import DashHeader from "./incomes/other/DashHeader.svelte";
-    import DataMenu from "./incomes/other/DataMenu.svelte";
     import QuickInfobar from "./incomes/other/QuickInfobar.svelte";
+    import Incomes from "./incomes/infolists/Incomes.svelte";
+    import Graph3 from "./incomes/graphs/Graph3.svelte";
+    import Graph2 from "./incomes/graphs/Graph2.svelte";
 </script>
 
+<div class="incomeContainer">
+    <div class="dataHalf">
+        <div>
             <DashHeader />
             <QuickInfobar />
-<DataMenu />
+        </div>
+
+        <div class="graphs">
+            <Graph3 />
+            <Graph2 />
+        </div>
+    </div>
+    <Incomes />
+</div>
+
+<style>
+    @media only screen and (max-width: 900px) {
+        .incomeContainer {
+            flex-wrap: wrap;
+            flex: 1 1 auto;
+            width: 100%;
+        }
+
+        .graphs {
+            flex-wrap: wrap;
+        }
+    }
+
+    .graphs {
+        display:flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: stretch;
+        min-width: 0;
+        min-height: 0;
+        height: 100% !important;
+        width: 100% !important;
+        flex: 1 1 auto;
+    }
+    .incomeContainer {
+        display: flex;
+        height: 100%;
+        background-color: #172233;
+        flex-direction: row;
+        justify-content: space-between;
+    }
+
+    .dataHalf {
+        display:flex;
+        min-height: 0;
+        min-width: 0;
+        flex-direction: column;
+        flex: 1 1 auto;
+        background-color: #212942;
+        border-radius: 20px;
+        /*padding: 10px;*/
+    }
+</style>
+

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/graphs/Graph2.svelte

@@ -1,7 +1,7 @@
 <script>
 	import Chart from 'chart.js/auto';
 	import {onMount} from 'svelte';
-	import {expenseData} from "../../../stores.js";
+	import {monthExpense} from "../../../stores.js";
 	import {globalStyles} from "../../../styles.js";
 
 	let ctx;
@@ -10,7 +10,7 @@
 
 	function groupAndSumByCategory() {
 		const groupedData = new Map();
-		$expenseData.forEach(expense => {
+		$monthExpense.forEach(expense => {
 					const category = expense.expenseCategory.name;
 					if (groupedData.has(category)) {
 						groupedData.set(category, groupedData.get(category) + parseInt(expense.amount));
@@ -26,8 +26,6 @@
 	function createGraph() {
 		try {
 			const groupedExpenseData = groupAndSumByCategory();
-			console.log("============= here start")
-			console.log(groupedExpenseData);
 
 			const chartLabels = [];
 			const chartValues = [];
@@ -36,32 +34,44 @@
 				chartLabels.push(label);
 				chartValues.push(value);
 			}
-			console.log(chartLabels)
+
-			console.log(chartValues)
-			console.log("============= here end")
 			ctx = chartCanvas.getContext('2d');
 
 			if (!chart) {
 				chart = new Chart(ctx, {
-					type: 'bar',
+					type: 'doughnut',
 					data: {
 						labels: chartLabels,
 						datasets: [{
 							label: 'Spendings',
-							backgroundColor: [
-								'rgb(107, 80, 107)',
-								'rgb(171, 61, 169)',
-								'rgb(222, 37, 218)',
-								'rgb(235, 68, 232)',
-								'rgb(255, 128, 255)'],
 							data: chartValues
 						}]
 					},
 					options: {
 						responsive: true,
 						maintainAspectRatio: false,
+						backgroundColor: [
+							'rgb(255, 140, 140)',
+							'rgb(140, 180, 255)',
+							'rgb(255, 200, 140)',
+							'rgb(160, 200, 160)',
+							'rgb(160, 130, 200)',
+							'rgb(255, 160, 140)',
+							'rgb(140, 180, 255)',
+							'rgb(160, 255, 160)',
+							'rgb(255, 140, 120)',
+							'rgb(160, 140, 200)',
+							'rgb(255, 220, 140)',
+							'rgb(140, 255, 255)',
+							'rgb(255, 160, 140)',
+							'rgb(160, 255, 160)',
+							'rgb(160, 160, 255)'
+						],
 						plugins: {
 							legend: {
+								position: 'bottom',
+								align: 'start',
+								fullWidth: false,
 								labels: {
 									font: {
 										weight: 'bold'
@@ -83,7 +93,7 @@
 	}
 
 	$: {
-		if ($expenseData) {
+		if ($monthExpense) {
 			createGraph();
 		}
 	}
@@ -99,16 +109,25 @@
 
 <style>
 	#chart {
-		box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
-		transition: all 0.3s cubic-bezier(.25,.8,.25,1);
-		flex: 1;
-		border-radius: 0 0 10px 10px;
-		margin: 0 0 10px 10px;
 		min-width: 0;
 		min-height:0;
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+		transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
+		display: flex;
+		flex: 1 1 auto;
+		flex-grow: 1;
+		padding: 10px;
+		border-radius: 10px;
+		margin: 0 10px 10px;
 	}
 
 	#chart:hover {
 		box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
 	}
+
+	@media only screen and (max-width: 900px) {
+		#chart {
+			min-height: 400px;
+		}
+	}
 </style>

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/graphs/Graph3.svelte

@@ -1,7 +1,7 @@
 <script>
 	import Chart from 'chart.js/auto';
 	import { onMount } from 'svelte';
-	import {monthIncome, monthExpense, isCategorizedExpense, categorizedExpense} from "../../../stores.js";
+	import {monthIncome, monthExpense, isCategorizedExpense, categorizedExpense, expenseCategoryLabel} from "../../../stores.js";
 	import { globalStyles } from "../../../styles.js";
 
 	let ctx;
@@ -12,19 +12,26 @@
 
 	function createGraph() {
 		try {
-			// const allDates = [...new Set([...$monthIncome, ...$monthExpense].map(item => item.date))];
-			// const uniqueDates = allDates.sort((a, b) => new Date(a) - new Date(b));
-			//
-			// const incomeValues = uniqueDates.map(date => $monthIncome.filter(item => item.date === date).reduce((total, item) => total + item.amount, 0));
-			// const expenseValues = uniqueDates.map(date => $monthExpense.filter(item => item.date === date).reduce((total, item) => total + item.amount, 0));
-
 			if (chartCanvas.getContext('2d') !== undefined) {
 				ctx = chartCanvas.getContext('2d');
 				if (!chart) {
+					console.log(generatedData);
 					chart = new Chart(ctx, {
 						type: 'line',
 						data: generatedData,
 						options: {
+							scales: {
+								y: {
+									ticks: {
+										color: 'rgb(255,255,255)'
+									}
+								},
+								x: {
+									ticks: {
+										color: 'rgb(255,255,255)'
+									}
+								}
+							},
 							responsive: true,
 							maintainAspectRatio: false
 						}
@@ -34,11 +41,10 @@
 						chart.data.labels = generatedData.labels;
 						chart.data.datasets = generatedData.datasets;
 					} else {
-						generatedData.datasets = generatedData.datasets.filter(dataset => dataset.label !== "Category");
+						generatedData.datasets = generatedData.datasets.filter(dataset => dataset.label !== $expenseCategoryLabel);
 						chart.data.labels = generatedData.labels;
 						chart.data.datasets = generatedData.datasets;
 					}
-
 					chart.update();
 				}
 			}
@@ -59,7 +65,7 @@
 				labels: uniqueDates,
 				datasets: [
 					{
-						label: "Category",
+						label: $expenseCategoryLabel,
 						backgroundColor: "rgba(21, 194, 58, 0.4)",
 						borderColor: "rgba(21, 194, 58, 1)",
 						data: categorizedValues,
@@ -76,6 +82,13 @@
 					}
 				]
 			};
+
+			const tempData = generatedData.datasets.filter(dataset => dataset.label !== undefined);
+
+			generatedData = {
+				labels: generatedData.labels || [],
+				datasets: tempData
+			};
 		} else {
 			const allDates = [...new Set([...$monthExpense].map(item => item.date))];
 			const uniqueDates = allDates.sort((a, b) => new Date(a) - new Date(b));
@@ -94,6 +107,13 @@
 							fill: true
 						}
 			};
+
+			const tempData = generatedData.datasets.filter(dataset => dataset.label !== undefined);
+
+			generatedData = {
+				labels: generatedData.labels || [],
+				datasets: tempData
+			};
 		}
 
 		if ($monthIncome || $monthExpense || $isCategorizedExpense || $categorizedExpense) {
@@ -118,11 +138,19 @@
 		transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
 		display: flex;
 		flex: 1 1 auto;
-		border-radius: 0 0 10px 10px;
+		flex-grow: 2;
-		margin: 0 0 10px 10px;
+		border-radius: 10px;
+		margin: 0 10px 10px;
+		padding: 10px;
 	}
 
 	#chart:hover {
 		box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
 	}
+
+	@media only screen and (max-width: 900px) {
+		#chart {
+			min-height: 400px;
+		}
+	}
 </style>

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/infolists/Expenses.svelte

@@ -10,7 +10,9 @@
         monthIncome,
         monthExpense,
         isCategorizedExpense,
-        categorizedExpense
+        categorizedExpense,
+        expenseCategoryLabel,
+        currencyLabel, copyExpenseData, copyIncomeData, isCategorizedIncome
     } from "../../../stores.js";
     import {globalStyles} from "../../../styles.js";
     import {onMount} from "svelte";
@@ -36,6 +38,9 @@
 
     let isDateDropdownExpanded = false
     let isCategoryDropdownExpanded = false
+    let isCurrencyDropdownExpanded = false
+    let isFilterDown = false;
+
     let dropdownStates = {};
     let deleteDropdownStates = {}
 
@@ -48,8 +53,27 @@
         });
     }
 
+    function clickFilter() {
+        isDateDropdownExpanded = false;
+        isCategoryDropdownExpanded = false;
+        isFilterDown = !isFilterDown;
+        isCurrencyDropdownExpanded = false;
+    }
     function clickHandlerDate() {
         isDateDropdownExpanded = !isDateDropdownExpanded
+        isCategoryDropdownExpanded = false;
+    }
+
+    function clickHandlerCategory() {
+        isCategoryDropdownExpanded = !isCategoryDropdownExpanded;
+        isDateDropdownExpanded = false;
+    }
+
+    function clickHandlerCurrency() {
+        isCurrencyDropdownExpanded = !isCurrencyDropdownExpanded;
+        isCategoryDropdownExpanded = false;
+        isDateDropdownExpanded = false;
+        isFilterDown = false;
     }
 
     function clickItemHandler(id) {
@@ -62,26 +86,19 @@
         if (dropdownStates[id] === true) dropdownStates[id] = false;
     }
 
-    function clickHandlerCategory() {
-        isCategoryDropdownExpanded = !isCategoryDropdownExpanded;
-    }
-
     function clickOutsideHandler(event) {
-        const isDateButton = event.target.closest("#btn1");
+        const isDateButton = event.target.closest("#expenseInfo");
-        const isCategoryButton = event.target.closest("#btn2");
 
         if (!isDateButton) {
-            isDateDropdownExpanded = false;
+            isFilterDown = false;
-        }
-
-        if (!isCategoryButton) {
             isCategoryDropdownExpanded = false;
+            isDateDropdownExpanded = false;
+            isCurrencyDropdownExpanded = false;
         }
     }
 
     onMount(() => {
         document.body.addEventListener("click", clickOutsideHandler);
-
         return () => {
             document.body.removeEventListener("click", clickOutsideHandler);
         };
@@ -98,6 +115,7 @@
             });
             expenseData.set(response1.data);
             tempExpense.set(response1.data);
+            copyExpenseData.set(response1.data);
             const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?date=' + currentDay, {
                 headers: {
                     'Authorization': `Bearer ${getCookie('access_token')}`
@@ -105,10 +123,12 @@
             });
             incomeData.set(response2.data);
             tempIncome.set(response2.data);
+            copyIncomeData.set(response1.data);
             $dateText = "Today"
 
             $isCategorizedExpense = false;
             categorizedExpense.set([]);
+            changeCurrency($currencyLabel);
         } catch (error) {
             console.error("Error fetching expenses:", error);
         }
@@ -130,6 +150,7 @@
             });
             expenseData.set(response1.data);
             tempExpense.set(response1.data);
+            copyExpenseData.set(response1.data);
             const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?date=' + yesterdayString, {
                 headers: {
                     'Authorization': `Bearer ${getCookie('access_token')}`
@@ -137,7 +158,9 @@
             });
             incomeData.set(response2.data);
             tempIncome.set(response2.data);
+            copyIncomeData.set(response2.data);
             $dateText = "Yesterday"
+            changeCurrency($currencyLabel);
         } catch (error) {
             console.error("Error fetching expenses:", error);
         }
@@ -157,6 +180,7 @@
             expenseData.set(response1.data);
             tempExpense.set(response1.data);
             monthExpense.set(response1.data);
+            copyExpenseData.set(response1.data);
             const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?month=' + year, {
                 headers: {
                     'Authorization': `Bearer ${getCookie('access_token')}`
@@ -166,10 +190,12 @@
             incomeData.set(response2.data);
             tempIncome.set(response2.data);
             monthIncome.set(response2.data);
+            copyIncomeData.set(response2.data);
             $dateText = "This Month"
 
             $isCategorizedExpense = false;
             categorizedExpense.set([]);
+            changeCurrency($currencyLabel);
         } catch (error) {
             console.error("Error fetching expenses:", error);
         }
@@ -189,6 +215,7 @@
             expenseData.set(response1.data);
             tempExpense.set(response1.data)
             monthExpense.set(response1.data);
+            copyExpenseData.set(response1.data);
             const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?month=' + year, {
                 headers: {
                     'Authorization': `Bearer ${getCookie('access_token')}`
@@ -198,10 +225,12 @@
             incomeData.set(response2.data);
             tempIncome.set(response2.data);
             monthIncome.set(response2.data);
+            copyIncomeData.set(response2.data);
             $dateText = "Last Month"
 
             $isCategorizedExpense = false;
             categorizedExpense.set([]);
+            changeCurrency($currencyLabel);
         } catch (error) {
             console.error("Error fetching expenses:", error);
         }
@@ -221,6 +250,7 @@
             expenseData.set(response1.data);
             tempExpense.set(response1.data);
             monthExpense.set(response1.data);
+            copyExpenseData.set(response1.data);
             const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?year=' + year, {
                 headers: {
                     'Authorization': `Bearer ${getCookie('access_token')}`
@@ -230,10 +260,12 @@
             incomeData.set(response2.data);
             tempIncome.set(response2.data);
             monthIncome.set(response2.data);
+            copyIncomeData.set(response2.data);
             $dateText = "This Year"
 
             $isCategorizedExpense = false;
             categorizedExpense.set([]);
+            changeCurrency($currencyLabel);
         } catch (error) {
             console.error("Error fetching expenses:", error);
         }
@@ -241,6 +273,7 @@
 
     function filterByCategory(category) {
         $isCategorizedExpense = true;
+        $expenseCategoryLabel = category;
         console.log($isCategorizedExpense);
         let tempArr = $tempExpense.filter(expense => expense.expenseCategory.name === category);
         categorizedExpense.set(tempArr);
@@ -249,6 +282,7 @@
 
     function getAll() {
         categorizedExpense.set([]);
+        $expenseCategoryLabel = "Category";
         $isCategorizedExpense = false;
         console.log($isCategorizedExpense);
         expenseData.set($tempExpense);
@@ -258,13 +292,83 @@
 
     }
 
+    function changeCurrency(currency) {
+        if (currency === 'USD') {
+            expenseData.set($copyExpenseData);
+            incomeData.set($copyIncomeData);
+            $currencyLabel = "USD";
+        }
+        if (currency === 'MDL') {
+            const tempData1 = $copyExpenseData.map(expense => ({
+                ...expense,
+                amount: expense.amount / 0.056
+            }));
+            expenseData.set(tempData1);
+
+            const tempData2 = $copyIncomeData.map(income => ({
+                ...income,
+                amount: income.amount / 0.056
+            }));
+            incomeData.set(tempData2);
+            $currencyLabel = "MDL";
+        }
+        if (currency === 'EUR') {
+            const tempData1 = $copyExpenseData.map(expense => ({
+                ...expense,
+                amount: expense.amount / 1.08
+            }));
+            expenseData.set(tempData1);
+
+            const tempData2 = $copyIncomeData.map(income => ({
+                ...income,
+                amount: income.amount / 1.08
+            }));
+            incomeData.set(tempData2);
+            $currencyLabel = "EUR";
+        }
+
+        if (currency === 'GBP') {
+            const tempData1 = $copyExpenseData.map(expense => ({
+                ...expense,
+                amount: expense.amount / 1.26
+            }));
+            expenseData.set(tempData1);
+
+            const tempData2 = $copyIncomeData.map(income => ({
+                ...income,
+                amount: income.amount / 1.26
+            }));
+            incomeData.set(tempData2);
+            $currencyLabel = "GBP";
+        }
+    }
 </script>
 
 <div id="expenseInfo" style="background-color: {$globalStyles.mainColor}">
     <ContentExpense />
-    <div style="display: flex; justify-content: space-between">
+    <div style="display: flex; justify-content: space-around">
+
+        <div id="dropdown" style="margin: 10px; display: flex; justify-content: space-between">
+            <button id="btn1" class="button" on:click={clickFilter}>Filter ▼</button>
+        </div>
+
+        <div id="dropdown-currency" style="margin: 10px;">
+            <button id="btn2" class="button" on:click={clickHandlerCurrency}>Currency ▼</button>
+        </div>
+    </div>
+
+    <div>
+        {#if isFilterDown}
+            <div style="margin: 10px; display: flex; justify-content: space-between" transition:slide>
                 <div id="dropdown-date" style="margin: 10px;">
-            <button id="btn1" class="button" on:click={clickHandlerDate}>Filter by Date ▼</button>
+                    <button id="btn3" class="button" on:click={clickHandlerDate}>Filter by Date ▼</button></div>
+
+                <div id="dropdown-category" style="margin: 10px;">
+                    <button id="btn4" class="button" on:click={clickHandlerCategory}>Filter by Category ▼</button>
+                </div>
+            </div>
+        {/if}
+
         {#if isDateDropdownExpanded}
             <div id="date-list" transition:slide>
                 <div class="date-entry" on:click={() => getToday()} role="button" tabindex="0"
@@ -284,10 +388,7 @@
                 </div>
             </div>
         {/if}
-        </div>
 
-        <div id="dropdown-category" style="margin: 10px;">
-            <button id="btn2" class="button" on:click={clickHandlerCategory}>Filter by Category ▼</button>
         {#if isCategoryDropdownExpanded}
             <div id="date-list" transition:slide>
                 <div class="date-entry" on:click={() => getAll()} role="button"
@@ -300,30 +401,52 @@
                 {/each}
             </div>
         {/if}
+
+        {#if isCurrencyDropdownExpanded}
+            <div id="date-list" transition:slide>
+                <div class="date-entry" on:click={() => changeCurrency("MDL")} role="button"
+                     tabindex="0" on:keydown={doNothing}>MDL Leu</div>
+                <div class="date-entry" on:click={() => changeCurrency("GBP")} role="button"
+                     tabindex="0" on:keydown={doNothing}>GBP Pound</div>
+                <div class="date-entry" on:click={() => changeCurrency("USD")} role="button"
+                     tabindex="0" on:keydown={doNothing}>USD Dollar</div>
+                <div class="date-entry" on:click={() => changeCurrency("EUR")} role="button"
+                     tabindex="0" on:keydown={doNothing}>EUR Euro</div>
             </div>
+        {/if}
     </div>
     <div id="listContainer" style="color: {$globalStyles.color}">
         <ul>
             {#each $expenseData.toReversed() as item (item.expenseId)}
                 <li style="display:flex; flex-direction: column; justify-content: space-between; color: {$globalStyles.color}">
                     <div style="display:flex; flex-direction: row; justify-content: space-between; align-items: center;">
-                    <span>
+                    <div>
                         {#if textToIcon[item.expenseCategory.name]}
                         {@html textToIcon[item.expenseCategory.name]}
                     {/if}
                         <span style="font-weight: bold">{item.incomeCategory ? `${item.incomeCategory.name}: ` : `${item.expenseCategory.name}: `}</span>
-                    <span style="font-weight:bold; margin-right: 10px; color: red; font-size: larger">{item.incomeCategory ? `+${item.amount}$` : `-${item.amount}$`}</span>
+                    <span style="font-weight:bold; margin-right: 10px; color: red; font-size: larger">{item.incomeCategory ? `+${item.amount.toFixed(2)} ${$currencyLabel}` : `-${item.amount.toFixed(2)} ${$currencyLabel}`}</span>
-                    </span>
+                    </div>
-                        <span style="margin-right: 5px;">{`${item.date}`}
+                        <div style="margin-right: 5px; display: flex; flex-direction: row">
-                            <span id="editBtn" role="button" tabindex="0" on:keydown={doNothing}
+
-                                  on:click={() => clickItemHandler(item.expenseId)}><svg
+                            <div>
+                                {`${item.date}`}
+                            </div>
+
+                            <div id="editBtnDiv" role="button" tabindex="0" on:keydown={doNothing}
+                                 on:click={() => clickItemHandler(item.expenseId)}>
+                                <span id="editBtn"><svg
                                         xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path
                                         d="M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160V416c0 53 43 96 96 96H352c53 0 96-43 96-96V320c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H96z"/></svg></span>
-                        <span id="deleteBtn" role="button" tabindex="0" on:keydown={doNothing}
+                            </div>
-                              on:click={() => clickDeleteHandler(item.expenseId)}><svg
+
+                            <div id="deleteBtnDiv" role="button" tabindex="0" on:keydown={doNothing}
+                                 on:click={() => clickDeleteHandler(item.expenseId)}>
+                                <span id="deleteBtn"><svg
                                         xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path
                                         d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z"/></svg></span>
-                    </span>
+                            </div>
+                            </div>
                     </div>
 
                     {#if dropdownStates[item.expenseId]}
@@ -351,6 +474,7 @@
 </div>
 
 <style>
+
     #textf {
         font-family: "Inter UI", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
         font-size: 20px;
@@ -422,7 +546,7 @@
     }
 
     #editBtn {
-        margin-left: 5px;
+        margin-left: 10px;
         margin-right: 5px;
         fill: darkblue;
     }
@@ -440,6 +564,7 @@
 
     #deleteBtn {
         fill: red;
+        margin-left: 5px;
     }
 
     #deleteBtn:hover {
@@ -550,12 +675,10 @@
 
     #date-list {
         background-color: black;
-        position: absolute;
+        margin: 0 20px 20px;
-        margin-top: 20px;
         max-height: 400px;
         overflow-y: scroll;
         border-radius: 20px;
-        z-index: 1;
     }
 
     .date-entry {

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/other/DashHeader.svelte

@@ -4,17 +4,16 @@ import {globalStyles} from "../../../styles.js";
 </script>
 
 <div id="header">
-    <div id="dashboardTitleWrapper" style="color: {$globalStyles.dashTextColor}">
+    <div id="dashboardTitleWrapper" style="color: white">
-        <h5>Hello, welcome to your</h5>
+        <h1 id="dashboardTitle">Dashboard - Expenses</h1>
-        <h1 id="dashboardTitle">Dashboard</h1>
     </div>
 
     <div id="icons">
         <div class="headerbtn searchButton">
-            <svg style="fill: {$globalStyles.dashTextColor}" xmlns="http://www.w3.org/2000/svg" height="1.3em" viewBox="0 0 512 512"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>
+            <svg style="fill: white" xmlns="http://www.w3.org/2000/svg" height="1.3em" viewBox="0 0 512 512"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>
         </div>
         <div class="headerbtn notificationButton">
-            <svg style="fill: {$globalStyles.dashTextColor}" xmlns="http://www.w3.org/2000/svg" height="1.3em" viewBox="0 0 448 512"><path d="M224 0c-17.7 0-32 14.3-32 32V49.9C119.5 61.4 64 124.2 64 200v33.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416H424c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4V200c0-75.8-55.5-138.6-128-150.1V32c0-17.7-14.3-32-32-32zm0 96h8c57.4 0 104 46.6 104 104v33.4c0 47.9 13.9 94.6 39.7 134.6H72.3C98.1 328 112 281.3 112 233.4V200c0-57.4 46.6-104 104-104h8zm64 352H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z"/></svg>
+            <svg style="fill: white" xmlns="http://www.w3.org/2000/svg" height="1.3em" viewBox="0 0 448 512"><path d="M224 0c-17.7 0-32 14.3-32 32V49.9C119.5 61.4 64 124.2 64 200v33.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416H424c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4V200c0-75.8-55.5-138.6-128-150.1V32c0-17.7-14.3-32-32-32zm0 96h8c57.4 0 104 46.6 104 104v33.4c0 47.9 13.9 94.6 39.7 134.6H72.3C98.1 328 112 281.3 112 233.4V200c0-57.4 46.6-104 104-104h8zm64 352H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z"/></svg>
         </div>
     </div>
 </div>
@@ -33,10 +32,6 @@ import {globalStyles} from "../../../styles.js";
         margin: 20px 20px 0;
     }
 
-    #dashboardTitleWrapper h5 {
-        margin: 0;
-    }
-
     #dashboardTitleWrapper h1 {
         margin-top: 0;
     }

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/other/QuickInfobar.svelte

@@ -1,36 +1,52 @@
 <script>
     import { onMount } from 'svelte';
-    import { incomeData, expenseData } from "../../../stores.js";
+    import { incomeData, expenseData, currencyLabel } from "../../../stores.js";
     import {globalStyles} from "../../../styles.js";
 
     let infobar1, infobar2, infobar3, infobar4;
     let totalExpenses = 0;
     let totalIncomes = 0;
-    let lastMonthIncome = 800; // Dummy last month's income
+    let lastMonthIncome = 800;
-    let lastMonthExpense = 200; // Dummy last month's expense
+    let lastMonthExpense = 200;
+    let incomeDifference;
+    let expenseDifference;
 
     function updateInfo() {
         totalExpenses = $expenseData.reduce((total, item) => total + parseInt(item.amount), 0);
         totalIncomes = $incomeData.reduce((total, item) => total + parseInt(item.amount), 0);
 
-        const incomeDifference = ((totalIncomes - lastMonthIncome) / lastMonthIncome) * 100;
+        incomeDifference = ((totalIncomes - lastMonthIncome) / lastMonthIncome) * 100;
-        const expenseDifference = ((lastMonthExpense - totalExpenses) / lastMonthExpense) * 100;
+        expenseDifference = ((lastMonthExpense - totalExpenses) / lastMonthExpense) * 100;
-
-        try {
-            infobar1.innerHTML = `<span style="font-size: larger">Total expenses:</span><br><span style="color:red;font-size: xxx-large">${totalExpenses.toFixed(2)}$</span>`;
-            infobar2.innerHTML = `<span style="font-size: larger">Total incomes:</span><br><span style="color:green;font-size: xxx-large">${totalIncomes.toFixed(2)}$</span>`;
-
-            infobar3.innerHTML = `<span style="font-size: larger">Income by last month:</span><br><span style="color:blue;font-size: xxx-large">${incomeDifference.toFixed(2)}%</span>`;
-            infobar4.innerHTML = `<span style="font-size: larger">Expense by last month:</span><br><span style="color:orange;font-size: xxx-large">${expenseDifference.toFixed(2)}%</span>`;
-        } catch {
-            console.log("not yet loaded");
-        }
     }
 
     $: {
+        if ($currencyLabel) {
+            if ($currencyLabel === 'USD') {
+                lastMonthIncome = 800;
+                lastMonthExpense = 200;
+            }
+
+            if ($currencyLabel === 'MDL') {
+                lastMonthIncome = 800 / 0.056;
+                lastMonthExpense = 200 / 0.056;
+            }
+
+            if ($currencyLabel === 'EUR') {
+                lastMonthIncome = 800 / 1.08;
+                lastMonthExpense = 200 / 1.08;
+            }
+
+            if ($currencyLabel === 'GBP') {
+                lastMonthIncome = 800 / 1.26;
+                lastMonthExpense = 200 / 1.26;
+            }
+        }
+
         if ($incomeData || $expenseData) {
             updateInfo();
         }
+
+
     }
 
     onMount(() => {
@@ -39,26 +55,75 @@
 </script>
 
 <div id="quickInfobar">
-    <div class="infobarElement" bind:this={infobar1} style="background-color: {$globalStyles.mainColor}"></div>
+    <div class="firstTwo">
-    <div class="infobarElement" bind:this={infobar2} style="background-color: {$globalStyles.mainColor}"></div>
+        <div class="infobarElement" bind:this={infobar1} style="background-color: {$globalStyles.mainColor}">
-    <div class="infobarElement" bind:this={infobar3} style="background-color: {$globalStyles.mainColor}"></div>
+            <span class="infobarSpan">Total expenses:</span><br><span class="dataSpan" style="color:#ab1a3c">{totalExpenses.toFixed(2)} {$currencyLabel}</span>
-    <div class="infobarElement" bind:this={infobar4} style="background-color: {$globalStyles.mainColor}"></div>
+        </div>
+        <div class="infobarElement" bind:this={infobar2} style="background-color: {$globalStyles.mainColor}">
+            <span class="infobarSpan">Total incomes:</span><br><span class="dataSpan" style="color:#38cc1b">{totalIncomes.toFixed(2)} {$currencyLabel}</span>
+        </div>
+    </div>
+
+    <div class="secondTwo">
+        <div class="infobarElement" bind:this={infobar3} style="background-color: {$globalStyles.mainColor}">
+            <span class="infobarSpan">Income by last month:</span><br><span class="dataSpan" style="color:#2763db">{incomeDifference.toFixed(2)}%</span>
+        </div>
+        <div class="infobarElement" bind:this={infobar4} style="background-color: {$globalStyles.mainColor}">
+            <span class="infobarSpan">Expense by last month:</span><br><span class="dataSpan" style="color:#dba527">{expenseDifference.toFixed(2)}%</span>
+        </div>
+    </div>
+
 </div>
 
 <style>
-    #quickInfobar {
+
+    .firstTwo {
         display: flex;
-        justify-content: space-between;
         flex-wrap: wrap;
+        justify-content: space-between;
+    }
+
+    .secondTwo {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+    }
+
+    .infobarSpan {
+        font-size: larger;
+        color: #00FEFC
+    }
+
+    .dataSpan {
+        color:#ab1a3c;
+        font-size: xxx-large;
+    }
+
+    #quickInfobar {
+        /*display: flex;*/
+        /*justify-content: space-between;*/
+        /*flex-wrap: wrap;*/
         min-height: 0;
         flex: 1 1 auto;
         margin: 20px;
     }
 
+    @media only screen and (min-width: 768px) and (max-width: 1200px) {
+        .infobarSpan {
+            font-size: medium;
+        }
+
+        .dataSpan {
+            font-size: large;
+        }
+    }
+
     .infobarElement {
+        font-family: Inconsolata,"Source Sans Pro",sans-serif;
+        font-size: larger;
         margin: 10px;
-        min-width: 0px;
+        min-width: 0;
-        min-height: 0px;
+        min-height: 0;
         flex: 1 1 auto;
         color: white;
         padding: 10px;

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/graphs/Graph1.svelte

@@ -1,116 +0,0 @@
-<script>
-	import Chart from 'chart.js/auto';
-	import { onMount } from 'svelte';
-	import { incomeData } from "../../../stores.js";
-	import {globalStyles} from "../../../styles.js";
-
-	let componentStyles;
-
-	$: {
-		console.log("got here")
-		componentStyles = $globalStyles;
-	}
-
-	let ctx;
-	let chartCanvas;
-	let chart = null;
-
-	function groupAndSumByCategory() {
-		const groupedData = new Map();
-		$incomeData.forEach(income => {
-					const category = income.incomeCategory.name;
-					if (groupedData.has(category)) {
-						groupedData.set(category, groupedData.get(category) + parseInt(income.amount));
-					} else {
-						groupedData.set(category, income.amount);
-					}
-				}
-		);
-
-		return new Map([...groupedData.entries()].sort());;
-	}
-
-	function createGraph() {
-		try {
-			const groupedIncomeData = groupAndSumByCategory();
-
-			const chartLabels = Array.from(groupedIncomeData.keys());
-			const chartValues = Array.from(groupedIncomeData.values());
-
-			ctx = chartCanvas.getContext('2d');
-
-			if (!chart) {
-				chart = new Chart(ctx, {
-					type: 'bar',
-					data: {
-						labels: chartLabels,
-						datasets: [{
-							label: 'Revenue',
-							backgroundColor:
-									['rgb(0, 0, 179)',
-									'rgb(0, 16, 217)',
-									'rgb(0, 32, 255)',
-									'rgb(0, 64, 255)',
-									'rgb(0, 96, 255)',
-									'rgb(0, 128, 255)',
-									'rgb(0, 159, 255)',
-									'rgb(0, 191, 255)',
-									'rgb(0, 255, 255)'],
-							data: chartValues
-						}]
-					},
-					options: {
-						responsive: true,
-						maintainAspectRatio: false,
-						plugins: {
-							legend: {
-								labels: {
-									font: {
-										weight: 'bold'
-									},
-									color: '#fff'
-								}
-							}
-						}
-					}
-				});
-			} else {
-				chart.data.labels = chartLabels;
-				chart.data.datasets[0].data = chartValues;
-				chart.update();
-			}
-		} catch (error) {
-			console.error('Error:', error);
-		}
-	}
-
-	$: {
-		if ($incomeData) {
-			createGraph();
-		}
-	}
-
-	onMount(() => {
-		createGraph();
-	});
-</script>
-
-<div id="chart" style="background-color: {componentStyles.mainColor}">
-	<canvas bind:this={chartCanvas}></canvas>
-</div>
-
-<style>
-	#chart {
-		box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
-		transition: all 0.3s cubic-bezier(.25,.8,.25,1);
-		flex: 1;
-		border-radius: 0 0 10px 10px;
-		margin: 0 0 10px 10px;
-		min-width: 0;
-		min-height:0;
-	}
-
-	#chart:hover {
-		box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
-	}
-</style>

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/graphs/Graph2.svelte

@@ -0,0 +1,133 @@
+<script>
+	import Chart from 'chart.js/auto';
+	import {onMount} from 'svelte';
+	import {monthIncome} from "../../../stores.js";
+	import {globalStyles} from "../../../styles.js";
+
+	let ctx;
+	let chartCanvas;
+	let chart = null;
+
+	function groupAndSumByCategory() {
+		const groupedData = new Map();
+		$monthIncome.forEach(income => {
+					const category = income.incomeCategory.name;
+					if (groupedData.has(category)) {
+						groupedData.set(category, groupedData.get(category) + parseInt(income.amount));
+					} else {
+						groupedData.set(category, parseInt(income.amount));
+					}
+				}
+		);
+
+		return new Map([...groupedData.entries()].sort());
+	}
+
+	function createGraph() {
+		try {
+			const groupedIncomeData = groupAndSumByCategory();
+
+			const chartLabels = [];
+			const chartValues = [];
+
+			for (const [label, value] of groupedIncomeData.entries()) {
+				chartLabels.push(label);
+				chartValues.push(value);
+			}
+
+			ctx = chartCanvas.getContext('2d');
+
+			if (!chart) {
+				chart = new Chart(ctx, {
+					type: 'doughnut',
+					data: {
+						labels: chartLabels,
+						datasets: [{
+							label: 'Incomes',
+							data: chartValues
+						}]
+					},
+					options: {
+						responsive: true,
+						maintainAspectRatio: false,
+						backgroundColor: [
+							'rgb(255, 140, 140)',
+							'rgb(140, 180, 255)',
+							'rgb(255, 200, 140)',
+							'rgb(160, 200, 160)',
+							'rgb(160, 130, 200)',
+							'rgb(255, 160, 140)',
+							'rgb(140, 180, 255)',
+							'rgb(160, 255, 160)',
+							'rgb(255, 140, 120)',
+							'rgb(160, 140, 200)',
+							'rgb(255, 220, 140)',
+							'rgb(140, 255, 255)',
+							'rgb(255, 160, 140)',
+							'rgb(160, 255, 160)',
+							'rgb(160, 160, 255)'
+						],
+						plugins: {
+							legend: {
+								position: 'bottom',
+								align: 'start',
+								fullWidth: false,
+								labels: {
+									font: {
+										weight: 'bold'
+									},
+									color: '#fff'
+								}
+							}
+						}
+					}
+				});
+			} else {
+				chart.data.labels = chartLabels;
+				chart.data.datasets[0].data = chartValues;
+				chart.update();
+			}
+		} catch (error) {
+			console.error('Error:', error);
+		}
+	}
+
+	$: {
+		if ($monthIncome) {
+			createGraph();
+		}
+	}
+
+	onMount(() => {
+		createGraph();
+	});
+</script>
+
+<div id="chart" style="background-color: {$globalStyles.mainColor}">
+	<canvas bind:this={chartCanvas}></canvas>
+</div>
+
+<style>
+	#chart {
+		min-width: 0;
+		min-height:0;
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+		transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
+		display: flex;
+		flex: 1 1 auto;
+		flex-grow: 1;
+		padding: 10px;
+		border-radius: 10px;
+		margin: 0 10px 10px;
+	}
+
+	#chart:hover {
+		box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+	}
+
+	@media only screen and (max-width: 900px) {
+		#chart {
+			min-height: 400px;
+		}
+	}
+</style>

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/graphs/Graph3.svelte

@@ -1,66 +1,49 @@
 <script>
 	import Chart from 'chart.js/auto';
 	import { onMount } from 'svelte';
-	import { incomeData, expenseData } from "../../../stores.js";
+	import {monthIncome, monthExpense, isCategorizedIncome, categorizedIncome, incomeCategoryLabel} from "../../../stores.js";
 	import { globalStyles } from "../../../styles.js";
 
-	let componentStyles;
-
-	$: {
-		console.log("got here")
-		componentStyles = $globalStyles;
-	}
-
 	let ctx;
 	let chartCanvas;
 	let chart = null;
 
+	let generatedData;
+
 	function createGraph() {
 		try {
-			const totalIncomes = $incomeData.reduce((total, item) => total + item.amount, 0);
-			const totalExpenses = $expenseData.reduce((total, item) => total + item.amount, 0);
-
-			const chartLabels = ['Incomes', 'Expenses'];
-			const chartValues = [totalIncomes, totalExpenses];
-
 			if (chartCanvas.getContext('2d') !== undefined) {
 				ctx = chartCanvas.getContext('2d');
 				if (!chart) {
 					chart = new Chart(ctx, {
-						type: 'pie',
+						type: 'line',
-						data: {
+						data: generatedData,
-							labels: chartLabels,
-							datasets: [{
-								data: chartValues,
-								backgroundColor: [
-									'rgb(243, 188, 0)',
-									'rgb(0, 117, 164)'
-								],
-							}]
-						},
 						options: {
-							responsive: true,
+							scales: {
-							maintainAspectRatio: false,
+								y: {
-							plugins: {
+									ticks: {
-								legend: {
+										color: 'rgb(255,255,255)'
-									labels: {
+									}
-										font: {
-											weight: 'bold'
 								},
-										color: '#fff'
+								x: {
-									}
+									ticks: {
+										color: 'rgb(255,255,255)'
 									}
 								}
+							},
+							responsive: true,
+							maintainAspectRatio: false
 						}
 					});
 				} else {
-					const totalIncomesUpd = $incomeData.reduce((total, item) => total + parseInt(item.amount), 0);
+					if ($isCategorizedIncome === true) {
-					const totalExpensesUpd = $expenseData.reduce((total, item) => total + parseInt(item.amount), 0);
+						chart.data.labels = generatedData.labels;
-
+						chart.data.datasets = generatedData.datasets;
-					const chartLabels = ['Incomes', 'Expenses'];
+					} else {
-					const chartValues = [totalIncomesUpd, totalExpensesUpd];
+						generatedData.datasets = generatedData.datasets.filter(dataset => dataset.label !== $incomeCategoryLabel);
-					chart.data.labels = chartLabels;
+						chart.data.labels = generatedData.labels;
-					chart.data.datasets[0].data = chartValues;
+						chart.data.datasets = generatedData.datasets;
+					}
 					chart.update();
 				}
 			}
@@ -70,7 +53,68 @@
 	}
 
 	$: {
-		if ($incomeData || $expenseData) {
+		if (isCategorizedIncome) {
+			const allDates = [...new Set([...$monthIncome, ...$categorizedIncome].map(item => item.date))];
+			const uniqueDates = allDates.sort((a, b) => new Date(a) - new Date(b));
+
+			const categorizedValues = uniqueDates.map(date => $categorizedIncome.filter(item => item.date === date).reduce((total, item) => total + item.amount, 0));
+			const incomeValues = uniqueDates.map(date => $monthIncome.filter(item => item.date === date).reduce((total, item) => total + item.amount, 0));
+
+			generatedData = {
+				labels: uniqueDates,
+				datasets: [
+					{
+						label: $incomeCategoryLabel,
+						backgroundColor: "rgba(21, 194, 58, 0.4)",
+						borderColor: "rgba(21, 194, 58, 1)",
+						data: categorizedValues,
+						tension: 0.2,
+						fill: true
+					},
+					{
+						label: "Revenue",
+						backgroundColor: "rgba(194, 21, 96, 0.4)",
+						borderColor: "rgba(194, 21, 96, 1)",
+						data: incomeValues,
+						tension: 0.4,
+						fill: true
+					}
+				]
+			};
+			const tempData = generatedData.datasets.filter(dataset => dataset.label !== undefined);
+
+			generatedData = {
+				labels: generatedData.labels || [],
+				datasets: tempData
+			};
+		} else {
+			const allDates = [...new Set([...$monthIncome].map(item => item.date))];
+			const uniqueDates = allDates.sort((a, b) => new Date(a) - new Date(b));
+
+			const incomeValues = uniqueDates.map(date => $monthIncome.filter(item => item.date === date).reduce((total, item) => total + item.amount, 0));
+
+			generatedData = {
+				labels: uniqueDates,
+				datasets:
+						{
+							label: "Income",
+							backgroundColor: "rgba(194, 21, 96, 0.4)",
+							borderColor: "rgba(194, 21, 96, 1)",
+							data: incomeValues,
+							tension: 0.4,
+							fill: true
+						}
+			};
+
+			const tempData = generatedData.datasets.filter(dataset => dataset.label !== undefined);
+
+			generatedData = {
+				labels: generatedData.labels || [],
+				datasets: tempData
+			};
+		}
+
+		if ($monthIncome || $monthExpense || $isCategorizedIncome || $categorizedIncome) {
 			createGraph();
 		}
 	}
@@ -80,22 +124,31 @@
 	});
 </script>
 
-<div id="chart" style="background-color: {componentStyles.mainColor}">
+<div id="chart" style="background-color: {$globalStyles.mainColor}">
-	<canvas bind:this={chartCanvas}></canvas>
+	<canvas id="canvas" bind:this={chartCanvas}></canvas>
 </div>
 
 <style>
 	#chart {
-		box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
-		transition: all 0.3s cubic-bezier(.25,.8,.25,1);
-		flex: 1;
-		border-radius: 0 0 10px 10px;
-		margin: 0 0 10px 10px;
 		min-width: 0;
 		min-height:0;
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+		transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
+		display: flex;
+		flex: 1 1 auto;
+		flex-grow: 2;
+		border-radius: 10px;
+		margin: 0 10px 10px;
+		padding: 10px;
 	}
 
 	#chart:hover {
 		box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
 	}
+
+	@media only screen and (max-width: 900px) {
+		#chart {
+			min-height: 400px;
+		}
+	}
 </style>

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/infolists/ContentIncome.svelte

@@ -1,30 +1,23 @@
 <script>
-    import Modal from './Modal.svelte';
     import { writable } from 'svelte/store';
     import axios from 'axios';
     import { getCookie } from "svelte-cookie";
-    import {incomeData, incomeTypes} from "../../../stores.js";
+    import {incomeTypes, incomeData, dateText} from "../../../stores.js";
+    import { slide } from 'svelte/transition';
 
-    let showModal;
+    let showModal = false;
     let amount = '';
     let newData;
 
     const selectedIncomeId = writable('');
 
-    function addNewIncome(id, amount) {
+    function addNewIncome(expid, id, amount) {
         const today = new Date().toISOString().split('T')[0];
         const incomeCategory = $incomeTypes.find(incomeType => incomeType.id === id);
 
-        console.log(amount);
-
         if (incomeCategory) {
             const newIncome = {
-                incomeId: 0,
+                incomeId: expid,
-                userDTO: {
-                    name: "Dummy",
-                    surname: "User",
-                    username: "dummyuser"
-                },
                 incomeCategory: incomeCategory,
                 date: today,
                 amount: parseInt(amount)
@@ -34,19 +27,18 @@
             newData.push(newIncome);
             $incomeData = newData;
         } else {
-            console.error('Income category not found for id:', id);
+            console.error('Expense category not found for id:', id);
         }
     }
 
     const createIncome = async () => {
+        showModal = false;
         const selectedIncome = $incomeTypes.find(income => income.id === $selectedIncomeId);
         const data = {
             incomeCategory: selectedIncome.id,
             amount: parseInt(amount),
         };
 
-        addNewIncome(selectedIncome.id, parseInt(amount));
-
         try {
             const token = getCookie('access_token');
 
@@ -58,7 +50,7 @@
             });
 
             if (response.status === 201) {
-                //console.log("cool");
+                addNewIncome(response.data.incomeId, selectedIncome.id, parseInt(amount));
             } else {
                 console.error('Error:', response.status);
             }
@@ -66,17 +58,21 @@
             console.error('Error:', error);
         }
     };
+
+    function toggleModal() {
+        showModal = !showModal;
+    }
 </script>
 
-<div id="inc">
+<div id="exp">
     <div id="optionField">
-        <h2>Incomes</h2>
+        <h2>Incomes: {$dateText}</h2>
-        <div id="openModal" class="plus-button" role="button" tabindex="0" on:click={() => (showModal = true)} on:keydown={() => console.log("keydown")}>
+        <div id="openModal" class="plus-button" role="button" tabindex="0" on:click={toggleModal} on:keydown={() => console.log("keydown")}>
             +
         </div>
     </div>
-    <Modal bind:showModal>
+        {#if showModal}
-        <div class="income-form">
+        <div class="income-form" transition:slide>
             <h3>Income Details</h3>
             <div class="form-group">
                 <label for="amount">Amount:</label>
@@ -94,18 +90,48 @@
                 </select>
             </div>
 
-            <button class="btn btn-primary" on:click={createIncome}>Submit</button>
+            <div style="display: flex; justify-content: space-around">
+                <button class="btn btn-primary" on:click={createIncome}>SUBMIT</button>
+                <button class="btn btn-primary" on:click={() => showModal = false}>CANCEL</button>
             </div>
-    </Modal>
+
+        </div>
+    {/if}
 </div>
 
 
 <style>
-    #inc {
+    #exp {
         padding: 10px 20px;
         text-align: center;
     }
 
+    button {
+        background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%);
+        border-radius: 8px;
+        border-style: none;
+        box-sizing: border-box;
+        color: #FFFFFF;
+        cursor: pointer;
+        flex-shrink: 0;
+        font-family: "Inter UI", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+        font-size: 16px;
+        font-weight: 500;
+        height: 3rem;
+        padding: 0 1.6rem;
+        text-align: center;
+        text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
+        transition: all .5s;
+        user-select: none;
+        -webkit-user-select: none;
+        touch-action: manipulation;
+    }
+
+    button:hover {
+        box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
+        transition-duration: .1s;
+    }
+
     #optionField {
         display: flex;
         align-items: center;
@@ -130,10 +156,29 @@
 
     .income-form {
         background-color: #fff;
-        border-radius: 5px;
+        border-radius: 20px;
         padding: 20px;
         max-width: 400px;
-        margin: 0 auto;
+        color: black;
+    }
+
+    input[type=text] {
+        padding: 12px 20px;
+        margin: 8px 0;
+        display: inline-block;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        box-sizing: border-box;
+    }
+
+    select {
+        padding: 12px 20px;
+        margin: 8px 0;
+        display: inline-block;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        box-sizing: border-box;
+        font-size: 16px;
     }
 
     h3 {

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/infolists/Incomes.svelte

@@ -1,7 +1,23 @@
 <script>
     import ContentIncome from "./ContentIncome.svelte";
-    import { incomeData } from "../../../stores.js";
+    import {
+        dateText,
+        expenseData,
+        incomeData,
+        tempExpense,
+        tempIncome,
+        monthIncome,
+        monthExpense,
+        isCategorizedExpense,
+        categorizedExpense,
+        currencyLabel, copyExpenseData, copyIncomeData, incomeCategoryLabel, categorizedIncome, isCategorizedIncome, incomeTypes
+    } from "../../../stores.js";
     import {globalStyles} from "../../../styles.js";
+    import {onMount} from "svelte";
+    import axios from "axios";
+    import {getCookie} from "svelte-cookie";
+    import {slide} from 'svelte/transition'
+    import EditEntry from "../util/EditEntry.svelte";
 
     const textToIcon = {
         'Interest': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"20\" viewBox=\"0 0 640 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M539.7 237.3c3.1-12.3 4.3-24.8 4.3-37.4C544 107.4 468.6 32 376.1 32c-77.2 0-144.6 53-163 127.8-15.3-13.2-34.9-20.5-55.2-20.5-46.3 0-84 37.7-84 84 0 7.4 .9 15 3.1 22.4-42.9 20.2-70.8 63.7-70.8 111.2C6.2 424.8 61.7 480 129.4 480h381.2c67.7 0 123.2-55.2 123.2-123.2 0-56.4-38.9-106-94.1-119.5zM199.9 401.6c0 8.3-7 15.3-15.3 15.3H153.6c-8.3 0-15.3-7-15.3-15.3V290.6c0-8.3 7-15.3 15.3-15.3h30.9c8.3 0 15.3 7 15.3 15.3v110.9zm89.5 0c0 8.3-7 15.3-15.3 15.3h-30.9c-8.3 0-15.3-7-15.3-15.3V270.1c0-8.3 7-15.3 15.3-15.3h30.9c8.3 0 15.3 7 15.3 15.3v131.5zm89.5 0c0 8.3-7 15.3-15.3 15.3h-30.9c-8.3 0-15.3-7-15.3-15.3V238.8c0-8.3 7-15.3 15.3-15.3h30.9c8.3 0 15.3 7 15.3 15.3v162.7zm87 0c0 8.3-7 15.3-15.3 15.3h-28.5c-8.3 0-15.3-7-15.3-15.3V176.9c0-8.6 7-15.6 15.3-15.6h28.5c8.3 0 15.3 7 15.3 15.6v224.6z\"/></svg>",
@@ -13,22 +29,442 @@
         'Gifts': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 512 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M190.5 68.8L225.3 128H224 152c-22.1 0-40-17.9-40-40s17.9-40 40-40h2.2c14.9 0 28.8 7.9 36.3 20.8zM64 88c0 14.4 3.5 28 9.6 40H32c-17.7 0-32 14.3-32 32v64c0 17.7 14.3 32 32 32H480c17.7 0 32-14.3 32-32V160c0-17.7-14.3-32-32-32H438.4c6.1-12 9.6-25.6 9.6-40c0-48.6-39.4-88-88-88h-2.2c-31.9 0-61.5 16.9-77.7 44.4L256 85.5l-24.1-41C215.7 16.9 186.1 0 154.2 0H152C103.4 0 64 39.4 64 88zm336 0c0 22.1-17.9 40-40 40H288h-1.3l34.8-59.2C329.1 55.9 342.9 48 357.8 48H360c22.1 0 40 17.9 40 40zM32 288V464c0 26.5 21.5 48 48 48H224V288H32zM288 512H432c26.5 0 48-21.5 48-48V288H288V512z\"/></svg>",
         'Government Payments': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"18\" viewBox=\"0 0 576 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M64 64C28.7 64 0 92.7 0 128V384c0 35.3 28.7 64 64 64H512c35.3 0 64-28.7 64-64V128c0-35.3-28.7-64-64-64H64zm64 320H64V320c35.3 0 64 28.7 64 64zM64 192V128h64c0 35.3-28.7 64-64 64zM448 384c0-35.3 28.7-64 64-64v64H448zm64-192c-35.3 0-64-28.7-64-64h64v64zM288 160a96 96 0 1 1 0 192 96 96 0 1 1 0-192z\"/></svg>"
     };
+
+    let isDateDropdownExpanded = false
+    let isCategoryDropdownExpanded = false
+    let isCurrencyDropdownExpanded = false
+    let isFilterDown = false;
+
+    let dropdownStates = {};
+    let deleteDropdownStates = {}
+
+    $: {
+        dropdownStates = {};
+        deleteDropdownStates = {};
+        $incomeData.toReversed().forEach(data => {
+            dropdownStates[data.incomeId] = false;
+            deleteDropdownStates[data.incomeId] = false;
+        });
+    }
+
+    function clickFilter() {
+        isDateDropdownExpanded = false;
+        isCategoryDropdownExpanded = false;
+        isFilterDown = !isFilterDown;
+        isCurrencyDropdownExpanded = false;
+    }
+    function clickHandlerDate() {
+        isDateDropdownExpanded = !isDateDropdownExpanded
+        isCategoryDropdownExpanded = false;
+    }
+
+    function clickHandlerCategory() {
+        isCategoryDropdownExpanded = !isCategoryDropdownExpanded;
+        isDateDropdownExpanded = false;
+    }
+
+    function clickHandlerCurrency() {
+        isCurrencyDropdownExpanded = !isCurrencyDropdownExpanded;
+        isCategoryDropdownExpanded = false;
+        isDateDropdownExpanded = false;
+        isFilterDown = false;
+    }
+
+    function clickItemHandler(id) {
+        dropdownStates[id] = !dropdownStates[id];
+        if (deleteDropdownStates[id] === true) deleteDropdownStates[id] = false;
+    }
+
+    function clickDeleteHandler(id) {
+        deleteDropdownStates[id] = !deleteDropdownStates[id];
+        if (dropdownStates[id] === true) dropdownStates[id] = false;
+    }
+
+    function clickOutsideHandler(event) {
+        const isDateButton = event.target.closest("#incomeInfo");
+
+        if (!isDateButton) {
+            isFilterDown = false;
+            isCategoryDropdownExpanded = false;
+            isDateDropdownExpanded = false;
+            isCurrencyDropdownExpanded = false;
+        }
+    }
+
+    onMount(() => {
+        $isCategorizedExpense = false;
+        $isCategorizedIncome = false;
+
+        document.body.addEventListener("click", clickOutsideHandler);
+
+        return () => {
+            document.body.removeEventListener("click", clickOutsideHandler);
+        };
+    });
+
+    async function getToday() {
+        const currentDate = new Date();
+        const currentDay = currentDate.toISOString().split('T')[0];
+        try {
+            const response1 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?date=' + currentDay, {
+                headers: {
+                    'Authorization': `Bearer ${getCookie('access_token')}`
+                }
+            });
+            expenseData.set(response1.data);
+            tempExpense.set(response1.data);
+            copyExpenseData.set(response1.data);
+            const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?date=' + currentDay, {
+                headers: {
+                    'Authorization': `Bearer ${getCookie('access_token')}`
+                }
+            });
+            incomeData.set(response2.data);
+            tempIncome.set(response2.data);
+            copyIncomeData.set(response1.data);
+            $dateText = "Today"
+
+            $isCategorizedExpense = false;
+            categorizedExpense.set([]);
+            changeCurrency($currencyLabel);
+        } catch (error) {
+            console.error("Error fetching expenses:", error);
+        }
+    }
+
+    async function getYesterday() {
+        const currentDate = new Date();
+
+        const yesterday = new Date(currentDate);
+        yesterday.setDate(currentDate.getDate() - 1);
+
+        const yesterdayString = yesterday.toISOString().split('T')[0];
+
+        try {
+            const response1 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?date=' + yesterdayString, {
+                headers: {
+                    'Authorization': `Bearer ${getCookie('access_token')}`
+                }
+            });
+            expenseData.set(response1.data);
+            tempExpense.set(response1.data);
+            copyExpenseData.set(response1.data);
+            const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?date=' + yesterdayString, {
+                headers: {
+                    'Authorization': `Bearer ${getCookie('access_token')}`
+                }
+            });
+            incomeData.set(response2.data);
+            tempIncome.set(response2.data);
+            copyIncomeData.set(response2.data);
+            $dateText = "Yesterday"
+            changeCurrency($currencyLabel);
+        } catch (error) {
+            console.error("Error fetching expenses:", error);
+        }
+    }
+
+    async function getMonth() {
+        const currentDate = new Date();
+        const year = currentDate.getMonth() + 1;
+
+        try {
+            const response1 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?month=' + year, {
+                headers: {
+                    'Authorization': `Bearer ${getCookie('access_token')}`
+                }
+            });
+
+            expenseData.set(response1.data);
+            tempExpense.set(response1.data);
+            monthExpense.set(response1.data);
+            copyExpenseData.set(response1.data);
+            const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?month=' + year, {
+                headers: {
+                    'Authorization': `Bearer ${getCookie('access_token')}`
+                }
+            });
+
+            incomeData.set(response2.data);
+            tempIncome.set(response2.data);
+            monthIncome.set(response2.data);
+            copyIncomeData.set(response2.data);
+            $dateText = "This Month"
+
+            $isCategorizedExpense = false;
+            categorizedExpense.set([]);
+            changeCurrency($currencyLabel);
+        } catch (error) {
+            console.error("Error fetching expenses:", error);
+        }
+    }
+
+    async function getLastMonth() {
+        const currentDate = new Date();
+        const year = currentDate.getMonth();
+
+        try {
+            const response1 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?month=' + year, {
+                headers: {
+                    'Authorization': `Bearer ${getCookie('access_token')}`
+                }
+            });
+
+            expenseData.set(response1.data);
+            tempExpense.set(response1.data)
+            monthExpense.set(response1.data);
+            copyExpenseData.set(response1.data);
+            const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?month=' + year, {
+                headers: {
+                    'Authorization': `Bearer ${getCookie('access_token')}`
+                }
+            });
+
+            incomeData.set(response2.data);
+            tempIncome.set(response2.data);
+            monthIncome.set(response2.data);
+            copyIncomeData.set(response2.data);
+            $dateText = "Last Month"
+
+            $isCategorizedExpense = false;
+            categorizedExpense.set([]);
+            changeCurrency($currencyLabel);
+        } catch (error) {
+            console.error("Error fetching expenses:", error);
+        }
+    }
+
+    async function getLastYear() {
+        const currentDate = new Date();
+        const year = currentDate.getFullYear();
+
+        try {
+            const response1 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?year=' + year, {
+                headers: {
+                    'Authorization': `Bearer ${getCookie('access_token')}`
+                }
+            });
+
+            expenseData.set(response1.data);
+            tempExpense.set(response1.data);
+            monthExpense.set(response1.data);
+            copyExpenseData.set(response1.data);
+            const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?year=' + year, {
+                headers: {
+                    'Authorization': `Bearer ${getCookie('access_token')}`
+                }
+            });
+
+            incomeData.set(response2.data);
+            tempIncome.set(response2.data);
+            monthIncome.set(response2.data);
+            copyIncomeData.set(response2.data);
+            $dateText = "This Year"
+
+            $isCategorizedExpense = false;
+            categorizedExpense.set([]);
+            changeCurrency($currencyLabel);
+        } catch (error) {
+            console.error("Error fetching expenses:", error);
+        }
+    }
+
+    function filterByCategory(category) {
+        $isCategorizedIncome = true;
+        $incomeCategoryLabel = category;
+        console.log($isCategorizedIncome);
+        let tempArr = $tempIncome.filter(income => income.incomeCategory.name === category);
+        categorizedIncome.set(tempArr);
+        incomeData.set(tempArr);
+    }
+
+    function getAll() {
+        categorizedIncome.set([]);
+        $incomeCategoryLabel = "Category";
+        $isCategorizedIncome = false;
+        console.log($isCategorizedIncome);
+        incomeData.set($tempIncome);
+    }
+
+    function doNothing() {
+
+    }
+
+    function changeCurrency(currency) {
+        if (currency === 'USD') {
+            expenseData.set($copyExpenseData);
+            incomeData.set($copyIncomeData);
+            $currencyLabel = "USD";
+        }
+        if (currency === 'MDL') {
+            const tempData1 = $copyExpenseData.map(expense => ({
+                ...expense,
+                amount: expense.amount / 0.056
+            }));
+            expenseData.set(tempData1);
+
+            const tempData2 = $copyIncomeData.map(income => ({
+                ...income,
+                amount: income.amount / 0.056
+            }));
+            incomeData.set(tempData2);
+            $currencyLabel = "MDL";
+        }
+        if (currency === 'EUR') {
+            const tempData1 = $copyExpenseData.map(expense => ({
+                ...expense,
+                amount: expense.amount / 1.08
+            }));
+            expenseData.set(tempData1);
+
+            const tempData2 = $copyIncomeData.map(income => ({
+                ...income,
+                amount: income.amount / 1.08
+            }));
+            incomeData.set(tempData2);
+            $currencyLabel = "EUR";
+        }
+
+        if (currency === 'GBP') {
+            const tempData1 = $copyExpenseData.map(expense => ({
+                ...expense,
+                amount: expense.amount / 1.26
+            }));
+            expenseData.set(tempData1);
+
+            const tempData2 = $copyIncomeData.map(income => ({
+                ...income,
+                amount: income.amount / 1.26
+            }));
+            incomeData.set(tempData2);
+            $currencyLabel = "GBP";
+        }
+    }
 </script>
 
 <div id="incomeInfo" style="background-color: {$globalStyles.mainColor}">
     <ContentIncome />
+    <div style="display: flex; justify-content: space-around">
+
+        <div id="dropdown" style="margin: 10px; display: flex; justify-content: space-between">
+            <button id="btn1" class="button" on:click={clickFilter}>Filter ▼</button>
+        </div>
+
+        <div id="dropdown-currency" style="margin: 10px;">
+            <button id="btn2" class="button" on:click={clickHandlerCurrency}>Currency ▼</button>
+        </div>
+    </div>
+
+    <div>
+        {#if isFilterDown}
+            <div style="margin: 10px; display: flex; justify-content: space-between" transition:slide>
+                <div id="dropdown-date" style="margin: 10px;">
+                    <button id="btn3" class="button" on:click={clickHandlerDate}>Filter by Date ▼</button></div>
+
+                <div id="dropdown-category" style="margin: 10px;">
+                    <button id="btn4" class="button" on:click={clickHandlerCategory}>Filter by Category ▼</button>
+                </div>
+            </div>
+        {/if}
+
+        {#if isDateDropdownExpanded}
+            <div id="date-list" transition:slide>
+                <div class="date-entry" on:click={() => getToday()} role="button" tabindex="0"
+                     on:keydown={doNothing}>Today
+                </div>
+                <div class="date-entry" on:click={() => getYesterday()} role="button" tabindex="0"
+                     on:keydown={doNothing}>Yesterday
+                </div>
+                <div class="date-entry" on:click={() => getMonth()} role="button" tabindex="0"
+                     on:keydown={doNothing}>This month
+                </div>
+                <div class="date-entry" on:click={() => getLastMonth()} role="button" tabindex="0"
+                     on:keydown={doNothing}>Last month
+                </div>
+                <div class="date-entry" on:click={() => getLastYear()} role="button" tabindex="0"
+                     on:keydown={doNothing}>This year
+                </div>
+            </div>
+        {/if}
+
+        {#if isCategoryDropdownExpanded}
+            <div id="date-list" transition:slide>
+                <div class="date-entry" on:click={() => getAll()} role="button"
+                     tabindex="0" on:keydown={doNothing}>All</div>
+                {#each $incomeTypes as income (income.id)}
+                    {#if income.id !== undefined}
+                        <div class="date-entry" on:click={() => filterByCategory(income.name)} role="button"
+                             tabindex="0" on:keydown={doNothing}>{income.name}</div>
+                    {/if}
+                {/each}
+            </div>
+        {/if}
+
+        {#if isCurrencyDropdownExpanded}
+            <div id="date-list" transition:slide>
+                <div class="date-entry" on:click={() => changeCurrency("MDL")} role="button"
+                     tabindex="0" on:keydown={doNothing}>MDL Leu</div>
+                <div class="date-entry" on:click={() => changeCurrency("GBP")} role="button"
+                     tabindex="0" on:keydown={doNothing}>GBP Pound</div>
+                <div class="date-entry" on:click={() => changeCurrency("USD")} role="button"
+                     tabindex="0" on:keydown={doNothing}>USD Dollar</div>
+                <div class="date-entry" on:click={() => changeCurrency("EUR")} role="button"
+                     tabindex="0" on:keydown={doNothing}>EUR Euro</div>
+            </div>
+        {/if}
+    </div>
     <div id="listContainer" style="color: {$globalStyles.color}">
         <ul>
-            {#each $incomeData.reverse() as item}
+            {#each $incomeData.toReversed() as item (item.incomeId)}
-                <li style="display:flex; justify-content: space-between; color: {$globalStyles.color}">
+                <li style="display:flex; flex-direction: column; justify-content: space-between; color: {$globalStyles.color}">
-                    <span>
+                    <div style="display:flex; flex-direction: row; justify-content: space-between; align-items: center;">
+                    <div>
                         {#if textToIcon[item.incomeCategory.name]}
                         {@html textToIcon[item.incomeCategory.name]}
                     {/if}
                         <span style="font-weight: bold">{item.incomeCategory ? `${item.incomeCategory.name}: ` : `${item.expenseCategory.name}: `}</span>
-                    <span style="font-weight:bold; margin-right: 10px; color: green; font-size: larger">{item.incomeCategory ? `+${item.amount}$` : `-${item.amount}$`}</span>
+                    <span style="font-weight:bold; margin-right: 10px; color: limegreen; font-size: larger">{item.incomeCategory ? `+${item.amount.toFixed(2)} ${$currencyLabel}` : `-${item.amount.toFixed(2)} ${$currencyLabel}`}</span>
-                    </span>
+                    </div>
-                    <span style="">{`${item.date}`}</span>
+                        <div style="margin-right: 5px; display: flex; flex-direction: row">
+
+                            <div>
+                                {`${item.date}`}
+                            </div>
+
+                            <div id="editBtnDiv" role="button" tabindex="0" on:keydown={doNothing}
+                                 on:click={() => clickItemHandler(item.incomeId)}>
+                                <span id="editBtn"><svg
+                                        xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path
+                                        d="M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160V416c0 53 43 96 96 96H352c53 0 96-43 96-96V320c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H96z"/></svg></span>
+                            </div>
+
+                            <div id="deleteBtnDiv" role="button" tabindex="0" on:keydown={doNothing}
+                                 on:click={() => clickDeleteHandler(item.incomeId)}>
+                                <span id="deleteBtn"><svg
+                                        xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path
+                                        d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z"/></svg></span>
+                            </div>
+                            </div>
+                    </div>
+
+                    {#if dropdownStates[item.incomeId]}
+                        <EditEntry {item} bind:isOn={dropdownStates[item.incomeId]}/>
+                    {/if}
+
+                    {#if deleteDropdownStates[item.incomeId]}
+                        <div style="padding: 5px; margin-top: 5px; display:flex; flex-direction: column; justify-content: space-evenly"
+                             class="inputForm" transition:slide>
+                            <span id="textf" style="text-align: center; margin-bottom: 10px">Confirm deletion?</span>
+                            <div style="display:flex; flex-direction: row; justify-content: space-evenly">
+                                <button id="confirmBtn">CONFIRM</button>
+                                <button id="cancelBtn">CANCEL</button>
+                            </div>
+
+                            <!--                            <button style="background-color: #8BD17C" on:click={() => console.log("LOL")}>Delete</button>-->
+                            <!--                            <button style="background-color: palevioletred" on:click={clickItemHandler(item.expenseId)}>Cancel</button>-->
+                        </div>
+                    {/if}
+
                 </li>
             {/each}
         </ul>
@@ -37,13 +473,108 @@
 
 <style>
 
+    #textf {
+        font-family: "Inter UI", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+        font-size: 20px;
+        font-weight: 500;
+    }
+
+    #confirmBtn {
+        background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%);
+        border-radius: 8px;
+        border-style: none;
+        box-sizing: border-box;
+        color: #FFFFFF;
+        cursor: pointer;
+        flex-shrink: 0;
+        font-family: "Inter UI", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+        font-size: 16px;
+        font-weight: 500;
+        height: 3rem;
+        padding: 0 1.6rem;
+        text-align: center;
+        text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
+        transition: all .5s;
+        user-select: none;
+        -webkit-user-select: none;
+        touch-action: manipulation;
+    }
+
+    #confirmBtn:hover {
+        box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
+        transition-duration: .1s;
+    }
+
+    #cancelBtn {
+        background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%);
+        border-radius: 8px;
+        border-style: none;
+        box-sizing: border-box;
+        color: #FFFFFF;
+        cursor: pointer;
+        flex-shrink: 0;
+        font-family: "Inter UI", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+        font-size: 16px;
+        font-weight: 500;
+        height: 3rem;
+        padding: 0 1.6rem;
+        text-align: center;
+        text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
+        transition: all .5s;
+        user-select: none;
+        -webkit-user-select: none;
+        touch-action: manipulation;
+    }
+
+    #cancelBtn:hover {
+        box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
+        transition-duration: .1s;
+    }
+
+    @media only screen and (max-width: 900px) {
+        #listContainer {
+            max-height: 50vh;
+            width: 100%;
+        }
+
         #incomeInfo {
-        min-width: 300px;
+            margin: 0;
+            width: 100%;
+        }
+    }
+
+    #editBtn {
+        margin-left: 10px;
+        margin-right: 5px;
+        fill: darkblue;
+    }
+
+    .inputForm {
+        display: flex;
+        flex-direction: column;
+        margin-bottom: 10px;
+    }
+
+    #editBtn:hover {
+        cursor: pointer;
+        fill: lightseagreen;
+    }
+
+    #deleteBtn {
+        fill: red;
+        margin-left: 5px;
+    }
+
+    #deleteBtn:hover {
+        cursor: pointer;
+        fill: palevioletred;
+    }
+
+    #incomeInfo {
+        min-width: 350px;
         min-height: 0;
         background-color: #212942;
         color: white;
-        border-radius: 0 0 10px 10px;
-        margin: 0 0 10px 0;
         display: flex;
         flex-direction: column;
         box-sizing: border-box;
@@ -54,7 +585,7 @@
         overflow-y: auto;
         min-height: 0;
         padding: 0 10px 10px;
-        margin: 0 0 10px;
+        /*margin: 0 0 10px;*/
         box-sizing: border-box;
         border-radius: 0 0 10px 10px;
     }
@@ -63,19 +594,16 @@
         width: 10px;
     }
 
-    /* Track */
     ::-webkit-scrollbar-track {
         background: #f1f1f1;
         border-radius: 10px;
     }
 
-    /* Handle */
     ::-webkit-scrollbar-thumb {
         background: #888;
         border-radius: 10px;
     }
 
-    /* Handle on hover */
     ::-webkit-scrollbar-thumb:hover {
         background: #555;
     }
@@ -98,4 +626,85 @@
     #listContainer li:hover {
         box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
     }
+
+    .button {
+        align-items: center;
+        background-color: #0A66C2;
+        border: 0;
+        border-radius: 100px;
+        box-sizing: border-box;
+        color: #ffffff;
+        cursor: pointer;
+        display: inline-flex;
+        font-family: -apple-system, system-ui, system-ui, "Segoe UI", Roboto, "Helvetica Neue", "Fira Sans", Ubuntu, Oxygen, "Oxygen Sans", Cantarell, "Droid Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Lucida Grande", Helvetica, Arial, sans-serif;
+        font-size: 16px;
+        font-weight: 600;
+        justify-content: center;
+        line-height: 20px;
+        max-width: 480px;
+        min-height: 40px;
+        min-width: 0;
+        overflow: hidden;
+        padding: 0 20px;
+        text-align: center;
+        touch-action: manipulation;
+        transition: background-color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, box-shadow 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s;
+        user-select: none;
+        -webkit-user-select: none;
+        vertical-align: middle;
+    }
+
+    .button:hover,
+    .button:focus {
+        background-color: #16437E;
+        color: #ffffff;
+    }
+
+    .button:active {
+        background: #09223b;
+        color: rgb(255, 255, 255, .7);
+    }
+
+    .button:disabled {
+        cursor: not-allowed;
+        background: rgba(0, 0, 0, .08);
+        color: rgba(0, 0, 0, .3);
+    }
+
+    #date-list {
+        background-color: black;
+        margin: 0 20px 20px;
+        max-height: 400px;
+        overflow-y: scroll;
+        border-radius: 20px;
+    }
+
+    .date-entry {
+        background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%);
+        border-radius: 8px;
+        border-style: none;
+        box-sizing: border-box;
+        color: #FFFFFF;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        font-family: "Inter UI", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+        font-size: 16px;
+        font-weight: 500;
+        height: 3rem;
+        padding: 0 1.6rem;
+        text-align: center;
+        text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
+        transition: all .3s;
+        user-select: none;
+        -webkit-user-select: none;
+        touch-action: manipulation;
+        margin: 10px;
+    }
+
+    .date-entry:hover {
+        box-shadow: rgba(255, 255, 255, 0.8) 0 0 20px;
+    }
 </style>

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/infolists/Modal.svelte

@@ -1,57 +0,0 @@
-<script>
-    export let showModal;
-
-    let dialog;
-
-    $: if (dialog && showModal) dialog.showModal();
-</script>
-
-<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
-<dialog
-        bind:this={dialog}
-        on:close={() => (showModal = false)}
-        on:click|self={() => dialog.close()}
->
-    <!-- svelte-ignore a11y-no-static-element-interactions -->
-    <div on:click|stopPropagation>
-        <slot name="header" />
-        <slot />
-    </div>
-</dialog>
-
-<style>
-    dialog {
-        max-width: 32em;
-        border-radius: 20px;
-        border: none;
-        padding: 0;
-    }
-    dialog::backdrop {
-        background: rgba(0, 0, 0, 0.3);
-    }
-    dialog > div {
-        padding: 1em;
-    }
-    dialog[open] {
-        animation: zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-    }
-    @keyframes zoom {
-        from {
-            transform: scale(0.95);
-        }
-        to {
-            transform: scale(1);
-        }
-    }
-    dialog[open]::backdrop {
-        animation: fade 0.2s ease-out;
-    }
-    @keyframes fade {
-        from {
-            opacity: 0;
-        }
-        to {
-            opacity: 1;
-        }
-    }
-</style>

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/other/DashHeader.svelte

@@ -1,19 +1,19 @@
 <script>
+
 import {globalStyles} from "../../../styles.js";
 </script>
 
 <div id="header">
-    <div id="dashboardTitleWrapper" style="color: {$globalStyles.dashTextColor}">
+    <div id="dashboardTitleWrapper" style="color: white">
-        <h5>Hello, welcome to your</h5>
+        <h1 id="dashboardTitle">Dashboard - Incomes</h1>
-        <h1 id="dashboardTitle">Dashboard</h1>
     </div>
 
     <div id="icons">
         <div class="headerbtn searchButton">
-            <svg xmlns="http://www.w3.org/2000/svg" height="1.3em" viewBox="0 0 512 512"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>
+            <svg style="fill: white" xmlns="http://www.w3.org/2000/svg" height="1.3em" viewBox="0 0 512 512"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>
         </div>
         <div class="headerbtn notificationButton">
-            <svg xmlns="http://www.w3.org/2000/svg" height="1.3em" viewBox="0 0 448 512"><path d="M224 0c-17.7 0-32 14.3-32 32V49.9C119.5 61.4 64 124.2 64 200v33.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416H424c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4V200c0-75.8-55.5-138.6-128-150.1V32c0-17.7-14.3-32-32-32zm0 96h8c57.4 0 104 46.6 104 104v33.4c0 47.9 13.9 94.6 39.7 134.6H72.3C98.1 328 112 281.3 112 233.4V200c0-57.4 46.6-104 104-104h8zm64 352H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z"/></svg>
+            <svg style="fill: white" xmlns="http://www.w3.org/2000/svg" height="1.3em" viewBox="0 0 448 512"><path d="M224 0c-17.7 0-32 14.3-32 32V49.9C119.5 61.4 64 124.2 64 200v33.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416H424c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4V200c0-75.8-55.5-138.6-128-150.1V32c0-17.7-14.3-32-32-32zm0 96h8c57.4 0 104 46.6 104 104v33.4c0 47.9 13.9 94.6 39.7 134.6H72.3C98.1 328 112 281.3 112 233.4V200c0-57.4 46.6-104 104-104h8zm64 352H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z"/></svg>
         </div>
     </div>
 </div>
@@ -29,12 +29,7 @@
     #dashboardTitleWrapper {
         display: flex;
         flex-direction: column;
-        margin:20px;
+        margin: 20px 20px 0;
-        margin-bottom: 0px;
-    }
-
-    #dashboardTitleWrapper h5 {
-        margin: 0;
     }
 
     #dashboardTitleWrapper h1 {

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/other/DataMenu.svelte

@@ -1,437 +0,0 @@
-<script>
-    import Graph1 from '../graphs/Graph1.svelte';
-    import Graph3 from '../graphs/Graph3.svelte';
-    import Incomes from "../infolists/Incomes.svelte";
-    import {globalStyles} from "../../../styles.js";
-    import { slide } from 'svelte/transition'
-    import {dateText, expenseData, incomeData, incomeTypes, tempIncome, tempExpense} from "../../../stores.js";
-    import axios from "axios";
-    import {getCookie} from "svelte-cookie";
-    import {onMount} from "svelte";
-
-    let isDateDropdownExpanded = false
-    let isCategoryDropdownExpanded = false
-    let incomeAnalysisText = "REVENUE ANALYSIS: ";
-    $ : {
-        incomeAnalysisText = "REVENUE ANALYSIS: " + $dateText;
-    }
-
-    function clickHandlerDate() {
-        isDateDropdownExpanded = !isDateDropdownExpanded
-    }
-
-    function clickHandlerCategory() {
-        isCategoryDropdownExpanded = !isCategoryDropdownExpanded;
-    }
-
-    function clickOutsideHandler(event) {
-        const isDateButton = event.target.closest("#btn1");
-        const isCategoryButton = event.target.closest("#btn2");
-
-        if (!isDateButton) {
-            isDateDropdownExpanded = false;
-        }
-
-        if (!isCategoryButton) {
-            isCategoryDropdownExpanded = false;
-        }
-    }
-
-    onMount(() => {
-        document.body.addEventListener("click", clickOutsideHandler);
-
-        return () => {
-            document.body.removeEventListener("click", clickOutsideHandler);
-        };
-    });
-
-    async function getToday() {
-        var currentDate = new Date();
-        var currentDay = currentDate.toISOString().split('T')[0];
-        try {
-            const response1 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?date=' + currentDay, {
-                headers: {
-                    'Authorization': `Bearer ${getCookie('access_token')}`
-                }
-            });
-            incomeData.set(response1.data);
-            tempIncome.set(response1.data);
-            const response2 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?date=' + currentDay, {
-                headers: {
-                    'Authorization': `Bearer ${getCookie('access_token')}`
-                }
-            });
-            expenseData.set(response2.data);
-            tempExpense.set(response2.data);
-            $dateText = "Today"
-        } catch (error) {
-            console.error("Error fetching expenses:", error);
-        }
-    }
-
-    async function getYesterday() {
-        var currentDate = new Date();
-
-        var yesterday = new Date(currentDate);
-        yesterday.setDate(currentDate.getDate() - 1);
-
-        var yesterdayString = yesterday.toISOString().split('T')[0];
-
-        try {
-            const response1 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?date=' + yesterdayString, {
-                headers: {
-                    'Authorization': `Bearer ${getCookie('access_token')}`
-                }
-            });
-            incomeData.set(response1.data);
-            tempIncome.set(response1.data);
-            const response2 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?date=' + yesterdayString, {
-                headers: {
-                    'Authorization': `Bearer ${getCookie('access_token')}`
-                }
-            });
-            expenseData.set(response2.data);
-            tempExpense.set(response2.data);
-            $dateText = "Yesterday"
-        } catch (error) {
-            console.error("Error fetching expenses:", error);
-        }
-    }
-
-    async function getMonth() {
-        var currentDate = new Date();
-        var year = currentDate.getMonth() + 1;
-
-        try {
-            const response1 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?month=' + year, {
-                headers: {
-                    'Authorization': `Bearer ${getCookie('access_token')}`
-                }
-            });
-
-            incomeData.set(response1.data);
-            tempIncome.set(response1.data);
-
-            const response2 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?month=' + year, {
-                headers: {
-                    'Authorization': `Bearer ${getCookie('access_token')}`
-                }
-            });
-
-            expenseData.set(response2.data);
-            tempExpense.set(response2.data);
-            $dateText = "This Month"
-        } catch (error) {
-            console.error("Error fetching expenses:", error);
-        }
-    }
-
-    async function getLastMonth() {
-        var currentDate = new Date();
-        var year = currentDate.getMonth();
-
-        try {
-            const response1 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?month=' + year, {
-                headers: {
-                    'Authorization': `Bearer ${getCookie('access_token')}`
-                }
-            });
-
-            expenseData.set(response1.data);
-            tempExpense.set(response1.data);
-            const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?month=' + year, {
-                headers: {
-                    'Authorization': `Bearer ${getCookie('access_token')}`
-                }
-            });
-
-            incomeData.set(response2.data);
-            tempIncome.set(response2.data);
-            $dateText = "Last Month"
-        } catch (error) {
-            console.error("Error fetching expenses:", error);
-        }
-    }
-
-    async function getLastYear() {
-        var currentDate = new Date();
-        var year = currentDate.getFullYear();
-
-        try {
-            const response1 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?year=' + year, {
-                headers: {
-                    'Authorization': `Bearer ${getCookie('access_token')}`
-                }
-            });
-
-            incomeData.set(response1.data);
-            tempIncome.set(response1.data);
-            const response2 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?year=' + year, {
-                headers: {
-                    'Authorization': `Bearer ${getCookie('access_token')}`
-                }
-            });
-
-            expenseData.set(response2.data);
-            tempExpense.set(response2.data);
-            $dateText = "This Year"
-        } catch (error) {
-            console.error("Error fetching expenses:", error);
-        }
-    }
-
-    function filterByCategory(category) {
-        console.log(category)
-        let tempArr = $tempIncome.filter(income => income.incomeCategory.name === category);
-        incomeData.set(tempArr);
-    }
-
-</script>
-
-<div id="main-data" style="background-color: {$globalStyles.dashColor}; color: {$globalStyles.color}">
-    <div id="data-header" style="background-color:{$globalStyles.mainColor}; color: {$globalStyles.altColor}">
-        <span style="color: {$globalStyles.altColor}" contenteditable="false" bind:innerHTML={incomeAnalysisText}></span>
-
-        <div id="dropdown-date">
-            <button id="btn1" class="button" on:click={clickHandlerDate}>Filter by Date ▼</button>
-            {#if isDateDropdownExpanded}
-                <div id="date-list" transition:slide>
-                    <div class="date-entry" on:click={() => getToday()}>Today</div>
-                    <div class="date-entry" on:click={() => getYesterday()}>Yesterday</div>
-                    <div class="date-entry" on:click={() => getMonth()}>This month</div>
-                    <div class="date-entry" on:click={() => getLastMonth()}>Last month</div>
-                    <!--                    <div on:click={() => console.log("Current quarter")}>Current quarter</div>-->
-                    <div class="date-entry" on:click={() => getLastYear()}>This year</div>
-                </div>
-            {/if}
-        </div>
-
-        <div id="dropdown-category">
-            <button id="btn2" class="button" on:click={clickHandlerCategory}>Filter by Category ▼</button>
-            {#if isCategoryDropdownExpanded}
-                <div id="date-list" transition:slide>
-                    {#each $incomeTypes as income (income.id)}
-                        {#if income.id !== undefined}
-                            <div class="date-entry" on:click={() => filterByCategory(income.name)} value={income.id}>{income.name}</div>
-                        {/if}
-                    {/each}
-                </div>
-            {/if}
-        </div>
-    </div>
-    <div id="data-menu">
-        <div id="first-graph">
-            <Graph1 />
-        </div>
-        <div id="second-graph">
-            <Graph3 />
-        </div>
-        <Incomes />
-    </div>
-
-</div>
-
-<style>
-    #main-data {
-        border-bottom-left-radius: 20px;
-        border-bottom-right-radius: 20px;
-        padding:0;
-        display: flex;
-        min-height: 0;
-        height: 0;
-        flex-direction: column;
-        justify-content: stretch;
-        align-items: stretch;
-        flex: 1 1 auto;
-    }
-
-    /*#button {*/
-    /*    background-color: #fff000;*/
-    /*    border-radius: 12px;*/
-    /*    color: #000;*/
-    /*    cursor: pointer;*/
-    /*    font-weight: bold;*/
-    /*    padding: 10px 15px;*/
-    /*    text-align: center;*/
-    /*    transition: 200ms;*/
-    /*    width: 100%;*/
-    /*    box-sizing: border-box;*/
-    /*    border: 0;*/
-    /*    font-size: 16px;*/
-    /*    user-select: none;*/
-    /*    -webkit-user-select: none;*/
-    /*    touch-action: manipulation;*/
-    /*}*/
-
-    /*#button:not(:disabled):hover,*/
-    /*#button:not(:disabled):focus {*/
-    /*    outline: 0;*/
-    /*    background: #f4e603;*/
-    /*    box-shadow: 0 0 0 2px rgba(0,0,0,.2), 0 3px 8px 0 rgba(0,0,0,.15);*/
-    /*}*/
-
-    /*#button:disabled {*/
-    /*    filter: saturate(0.2) opacity(0.5);*/
-    /*    -webkit-filter: saturate(0.2) opacity(0.5);*/
-    /*    cursor: not-allowed;*/
-    /*}*/
-
-    #date-list {
-        background-color: #007BFF;
-        position:absolute;
-        margin-top: 20px;
-        max-height: 400px;
-        overflow-y: scroll;
-        border-radius: 20px;
-        z-index:1;
-    }
-
-    .date-entry {
-        padding: 10px;
-        margin: 10px;
-        background-color: black;
-        color: white;
-        border-radius: 20px;
-        cursor: pointer;
-    }
-
-    .date-entry:hover {
-        background-color: rgb(128, 128, 128);
-    }
-
-
-    /*.button {*/
-    /*    font-size: large;*/
-    /*    margin: 10px;*/
-    /*    background-color: #007BFF;*/
-    /*    color: #fff;*/
-    /*    border: none;*/
-    /*    border-radius: 20px;*/
-    /*    line-height: 40px;*/
-    /*    cursor: pointer;*/
-    /*}*/
-
-    /*.button:hover {*/
-    /*    background-color: #0056b3;*/
-    /*}*/
-
-    .button {
-        align-items: center;
-        background-color: #0A66C2;
-        border: 0;
-        border-radius: 100px;
-        box-sizing: border-box;
-        color: #ffffff;
-        cursor: pointer;
-        display: inline-flex;
-        font-family: -apple-system, system-ui, system-ui, "Segoe UI", Roboto, "Helvetica Neue", "Fira Sans", Ubuntu, Oxygen, "Oxygen Sans", Cantarell, "Droid Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Lucida Grande", Helvetica, Arial, sans-serif;
-        font-size: 16px;
-        font-weight: 600;
-        justify-content: center;
-        line-height: 20px;
-        max-width: 480px;
-        min-height: 40px;
-        min-width: 0px;
-        overflow: hidden;
-        padding: 0px;
-        padding-left: 20px;
-        padding-right: 20px;
-        text-align: center;
-        touch-action: manipulation;
-        transition: background-color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, box-shadow 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s;
-        user-select: none;
-        -webkit-user-select: none;
-        vertical-align: middle;
-    }
-
-    .button:hover,
-    .button:focus {
-        background-color: #16437E;
-        color: #ffffff;
-    }
-
-    .button:active {
-        background: #09223b;
-        color: rgb(255, 255, 255, .7);
-    }
-
-    .button:disabled {
-        cursor: not-allowed;
-        background: rgba(0, 0, 0, .08);
-        color: rgba(0, 0, 0, .3);
-    }
-
-    /*#category-list {*/
-    /*    background-color: #8BD17C;*/
-    /*    position:absolute;*/
-    /*    z-index:1;*/
-    /*}*/
-
-    ::-webkit-scrollbar {
-        width: 10px;
-    }
-
-    /* Track */
-    ::-webkit-scrollbar-track {
-        background: #f1f1f1;
-        border-radius: 10px;
-    }
-
-    /* Handle */
-    ::-webkit-scrollbar-thumb {
-        background: #888;
-        border-radius: 10px;
-    }
-
-    /* Handle on hover */
-    ::-webkit-scrollbar-thumb:hover {
-        background: #555;
-    }
-
-    #data-header {
-        background-color: black;
-        min-height: 50px;
-        padding-left: 30px;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: space-around;
-        border-top-left-radius: 20px;
-        border-top-right-radius: 20px;
-        font-size: larger;
-        margin-bottom: 5px;
-        /*border: #8BD17C 2px solid;*/
-    }
-
-    #data-menu {
-        border-bottom-left-radius: 20px;
-        border-bottom-right-radius: 20px;
-        display:flex;
-        /*padding:10px;*/
-        flex-direction: row-reverse;
-        justify-content: space-between;
-        align-items: stretch;
-        flex: 1;
-        height: 0;
-        min-height: 0;
-    }
-
-    #first-graph {
-        display: flex;
-        flex-direction: column;
-        align-self: stretch;
-        flex-grow: 1;
-        min-width: 0;
-        min-height:0;
-    }
-
-    #second-graph {
-        display: flex;
-        flex-direction: column;
-        align-self: stretch;
-        flex-grow: 1;
-        min-width: 0;
-        min-height:0;
-    }
-
-</style>

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/other/QuickInfobar.svelte

@@ -1,43 +1,52 @@
 <script>
     import { onMount } from 'svelte';
-    import { incomeData, expenseData } from "../../../stores.js";
+    import { incomeData, expenseData, currencyLabel } from "../../../stores.js";
     import {globalStyles} from "../../../styles.js";
 
-    let componentStyles;
-
-    $: {
-        console.log("got here")
-        componentStyles = $globalStyles;
-    }
-
     let infobar1, infobar2, infobar3, infobar4;
     let totalExpenses = 0;
     let totalIncomes = 0;
-    let lastMonthIncome = 800; // Dummy last month's income
+    let lastMonthIncome = 800;
-    let lastMonthExpense = 200; // Dummy last month's expense
+    let lastMonthExpense = 200;
+    let incomeDifference;
+    let expenseDifference;
 
     function updateInfo() {
         totalExpenses = $expenseData.reduce((total, item) => total + parseInt(item.amount), 0);
         totalIncomes = $incomeData.reduce((total, item) => total + parseInt(item.amount), 0);
 
-        const incomeDifference = ((totalIncomes - lastMonthIncome) / lastMonthIncome) * 100;
+        incomeDifference = ((totalIncomes - lastMonthIncome) / lastMonthIncome) * 100;
-        const expenseDifference = ((lastMonthExpense - totalExpenses) / lastMonthExpense) * 100;
+        expenseDifference = ((lastMonthExpense - totalExpenses) / lastMonthExpense) * 100;
-
-        try {
-            infobar1.innerHTML = `<span style="font-size: larger">Total expenses:</span><br><span style="color:red;font-size: xxx-large">${totalExpenses.toFixed(2)}$</span>`;
-            infobar2.innerHTML = `<span style="font-size: larger">Total incomes:</span><br><span style="color:green;font-size: xxx-large">${totalIncomes.toFixed(2)}$</span>`;
-
-            infobar3.innerHTML = `<span style="font-size: larger">Income by last month:</span><br><span style="color:blue;font-size: xxx-large">${incomeDifference.toFixed(2)}%</span>`;
-            infobar4.innerHTML = `<span style="font-size: larger">Expense by last month:</span><br><span style="color:orange;font-size: xxx-large">${expenseDifference.toFixed(2)}%</span>`;
-        } catch {
-            console.log("not yet loaded");
-        }
     }
 
     $: {
+        if ($currencyLabel) {
+            if ($currencyLabel === 'USD') {
+                lastMonthIncome = 800;
+                lastMonthExpense = 200;
+            }
+
+            if ($currencyLabel === 'MDL') {
+                lastMonthIncome = 800 / 0.056;
+                lastMonthExpense = 200 / 0.056;
+            }
+
+            if ($currencyLabel === 'EUR') {
+                lastMonthIncome = 800 / 1.08;
+                lastMonthExpense = 200 / 1.08;
+            }
+
+            if ($currencyLabel === 'GBP') {
+                lastMonthIncome = 800 / 1.26;
+                lastMonthExpense = 200 / 1.26;
+            }
+        }
+
         if ($incomeData || $expenseData) {
             updateInfo();
         }
+
+
     }
 
     onMount(() => {
@@ -46,24 +55,76 @@
 </script>
 
 <div id="quickInfobar">
-    <div class="infobarElement" bind:this={infobar1} style="background-color: {componentStyles.mainColor}"></div>
+    <div class="firstTwo">
-    <div class="infobarElement" bind:this={infobar2} style="background-color: {componentStyles.mainColor}"></div>
+        <div class="infobarElement" bind:this={infobar1} style="background-color: {$globalStyles.mainColor}">
-    <div class="infobarElement" bind:this={infobar3} style="background-color: {componentStyles.mainColor}"></div>
+            <span class="infobarSpan">Total expenses:</span><br><span class="dataSpan" style="color:#ab1a3c">{totalExpenses.toFixed(2)} {$currencyLabel}</span>
-    <div class="infobarElement" bind:this={infobar4} style="background-color: {componentStyles.mainColor}"></div>
+        </div>
+        <div class="infobarElement" bind:this={infobar2} style="background-color: {$globalStyles.mainColor}">
+            <span class="infobarSpan">Total incomes:</span><br><span class="dataSpan" style="color:#38cc1b">{totalIncomes.toFixed(2)} {$currencyLabel}</span>
+        </div>
+    </div>
+
+    <div class="secondTwo">
+        <div class="infobarElement" bind:this={infobar3} style="background-color: {$globalStyles.mainColor}">
+            <span class="infobarSpan">Income by last month:</span><br><span class="dataSpan" style="color:#2763db">{incomeDifference.toFixed(2)}%</span>
+        </div>
+        <div class="infobarElement" bind:this={infobar4} style="background-color: {$globalStyles.mainColor}">
+            <span class="infobarSpan">Expense by last month:</span><br><span class="dataSpan" style="color:#dba527">{expenseDifference.toFixed(2)}%</span>
+        </div>
+    </div>
+
 </div>
 
 <style>
-    #quickInfobar {
+
+    .firstTwo {
         display: flex;
+        flex-wrap: wrap;
         justify-content: space-between;
+    }
+
+    .secondTwo {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+    }
+
+    .infobarSpan {
+        font-size: larger;
+        color: #00FEFC
+    }
+
+    .dataSpan {
+        color:#ab1a3c;
+        font-size: xxx-large;
+    }
+
+    #quickInfobar {
+        /*display: flex;*/
+        /*justify-content: space-between;*/
+        /*flex-wrap: wrap;*/
+        min-height: 0;
+        flex: 1 1 auto;
         margin: 20px;
     }
 
+    @media only screen and (min-width: 768px) and (max-width: 1200px) {
+        .infobarSpan {
+            font-size: medium;
+        }
+
+        .dataSpan {
+            font-size: large;
+        }
+    }
+
     .infobarElement {
+        font-family: Inconsolata,"Source Sans Pro",sans-serif;
+        font-size: larger;
         margin: 10px;
-        width: 200px;
+        min-width: 0;
-        min-width: 100px;
+        min-height: 0;
-        height: 100px;
+        flex: 1 1 auto;
         color: white;
         padding: 10px;
         border-radius: 10px;

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/util/EditEntry.svelte

@@ -0,0 +1,114 @@
+<script>
+    import {incomeTypes} from "../../../stores.js";
+    import { slide } from 'svelte/transition'
+    export let item;
+    export let isOn;
+
+    function handleSave() {
+        const amount = document.getElementById('amountInput').value;
+        const expenseCategory = document.getElementById('incomeCategory').value;
+
+        console.log("tryna save: " + item.incomeId + " " + amount + " " + expenseCategory)
+        // saveFunction(item.expenseId, amount, expenseCategory);
+    }
+</script>
+
+<div style="display: flex; flex-direction: column" transition:slide>
+    <span id="textf" style="margin-top: 10px; text-align: center">Edit Entry</span>
+    <input type="text" id="amountInput" bind:value={item.amount}>
+    <select id="incomeCategory" class="form-control">
+        {#each $incomeTypes as income (income.id)}
+            {#if income.id !== undefined}
+                {#if income.id === item.incomeCategory.id}
+                    <option value={income.id} selected>{income.name}</option>
+                {:else}
+                    <option value={income.id}>{income.name}</option>
+                {/if}
+            {/if}
+        {/each}
+    </select>
+    <div style="margin: 10px; display:flex; flex-direction: row; justify-content: space-evenly">
+        <button class="buttonCL" id="saveBtn" on:click={handleSave}>SAVE</button>
+        <button class="buttonCL" id="cancelBtn" on:click={() => isOn = false}>CANCEL</button>
+    </div>
+</div>
+
+<style>
+
+    #textf {
+        font-family: "Inter UI","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
+        font-size: 20px;
+        font-weight: 500;
+    }
+
+    input[type=text] {
+        padding: 12px 20px;
+        margin: 8px 0;
+        display: inline-block;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        box-sizing: border-box;
+    }
+
+    select {
+        padding: 12px 20px;
+        margin: 8px 0;
+        display: inline-block;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        box-sizing: border-box;
+        font-size: 16px;
+    }
+
+    #saveBtn {
+        background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%);
+        border-radius: 8px;
+        border-style: none;
+        box-sizing: border-box;
+        color: #FFFFFF;
+        cursor: pointer;
+        flex-shrink: 0;
+        font-family: "Inter UI","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
+        font-size: 16px;
+        font-weight: 500;
+        height: 3rem;
+        padding: 0 1.6rem;
+        text-align: center;
+        text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
+        transition: all .5s;
+        user-select: none;
+        -webkit-user-select: none;
+        touch-action: manipulation;
+    }
+
+    #saveBtn:hover {
+        box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
+        transition-duration: .1s;
+    }
+
+    #cancelBtn {
+        background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%);
+        border-radius: 8px;
+        border-style: none;
+        box-sizing: border-box;
+        color: #FFFFFF;
+        cursor: pointer;
+        flex-shrink: 0;
+        font-family: "Inter UI","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
+        font-size: 16px;
+        font-weight: 500;
+        height: 3rem;
+        padding: 0 1.6rem;
+        text-align: center;
+        text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
+        transition: all .5s;
+        user-select: none;
+        -webkit-user-select: none;
+        touch-action: manipulation;
+    }
+
+    #cancelBtn:hover {
+        box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
+        transition-duration: .1s;
+    }
+</style>

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/menu/SideMenu.svelte

@@ -1,32 +1,8 @@
 <script>
-    import { onMount } from 'svelte';
+    import {deleteCookie} from "svelte-cookie";
-    import axios from 'axios';
+    import {isAdmin, username} from "../stores.js";
-    import {deleteCookie, getCookie} from "svelte-cookie";
-
     export let onTabClick;
 
-    let username;
-    let isAdmin = true;
-
-    onMount(async () => {
-        const token = getCookie('access_token');
-
-        const config = {
-            headers: {
-                'Authorization': `Bearer ${token}`
-            }
-        };
-
-        try {
-            const response = await axios.get('https://trackio.online:8081/users/get-user-data', config);
-            const data = response.data;
-            username = data.username;
-
-        } catch (error) {
-            console.error('Error:', error);
-        }
-    });
-
     function doNothing() {
     }
 
@@ -74,7 +50,7 @@
     </div>
 
     <div id="profileSpace">
-        <div id="profileInfo">Hello, {username}</div>
+        <div id="profileInfo">Hello, {$username}</div>
         <div id="logout" role="button"
         tabindex="0"
         on:click={() => {

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/menu/StickyMenu.svelte

@@ -3,32 +3,11 @@
     import axios from 'axios';
     import {deleteCookie, getCookie} from "svelte-cookie";
     import { slide } from 'svelte/transition'
+    import {isAdmin, username} from "../stores.js";
 
     export let onTabClick;
 
     let isMenuDown = false;
-    let isAdmin = true;
-    let username;
-
-    onMount(async () => {
-        const token = getCookie('access_token');
-
-        const config = {
-            headers: {
-                'Authorization': `Bearer ${token}`
-            }
-        };
-
-        try {
-            const response = await axios.get('https://trackio.online:8081/users/get-user-data', config);
-            const data = response.data;
-            username = data.username;
-            console.log(username)
-
-        } catch (error) {
-            console.error('Error:', error);
-        }
-    });
 
     function toggleMenu() {
         isMenuDown = !isMenuDown;
@@ -81,7 +60,7 @@
             {/if}
 
             <div id="profileSpace">
-                <div id="profileInfo">Hello, {username}</div>
+                <div id="profileInfo">Hello, {$username}</div>
                 <div id="logout" role="button"
                      tabindex="0"
                      on:click={() => {

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/stores.js

@@ -1,9 +1,16 @@
 import {writable} from "svelte/store";
 
+export const isAdmin = writable(false);
+
+export const username = writable("");
 export const incomeData = writable([]);
 
 export const expenseData = writable([]);
 
+export const copyExpenseData = writable([]);
+
+export const copyIncomeData = writable([]);
+
 export const incomeTypes = writable([]);
 
 export const expenseTypes = writable([]);
@@ -24,6 +31,12 @@ export let isCategorizedExpense = writable(false);
 
 export let isCategorizedIncome = writable(false);
 
+export let expenseCategoryLabel = writable();
+
+export let incomeCategoryLabel = writable();
+
 export let selectedTab = writable('expenses');
 
 export let dateText = writable("This Month");
+
+export let currencyLabel = writable('USD');

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/main/+page.svelte

@@ -0,0 +1,7 @@
+<script>
+    import { onMount } from "svelte";
+
+    onMount(() => {
+        window.location.href = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ';
+    });
+</script>

src/main/java/com/faf223/expensetrackerfaf/web/vite.config.js

@@ -12,4 +12,4 @@ export default defineConfig({
 			proxy: {}
 		}
 	},
-});
+})

src/main/resources/fullchain.pem

@@ -0,0 +1,86 @@
+-----BEGIN CERTIFICATE-----
+MIIEHTCCAwWgAwIBAgISBGYC3YGfvdZxQg6y2YUSjvzLMA0GCSqGSIb3DQEBCwUA
+MDIxCzAJBgNVBAYTAlVTMRYwFAYDVQQKEw1MZXQncyBFbmNyeXB0MQswCQYDVQQD
+EwJSMzAeFw0yMzEyMTIxOTAxNTVaFw0yNDAzMTExOTAxNTRaMBkxFzAVBgNVBAMT
+DnRyYWNraW8ub25saW5lMFkwEwYHKoZIzj0CAQYIKoZIzj0DAQcDQgAEirToCuVv
+qNiT3Rxqsyu2+OmD7TYBW+CV9639OW4FhwHaFxyzoCWI3/w3gZNVE/5Y1CvwHAsw
+qfuam0LjfbnKOKOCAg8wggILMA4GA1UdDwEB/wQEAwIHgDAdBgNVHSUEFjAUBggr
+BgEFBQcDAQYIKwYBBQUHAwIwDAYDVR0TAQH/BAIwADAdBgNVHQ4EFgQUmUFyQf+b
+b16jD80QRaO9ipw7h9kwHwYDVR0jBBgwFoAUFC6zF7dYVsuuUAlA5h+vnYsUwsYw
+VQYIKwYBBQUHAQEESTBHMCEGCCsGAQUFBzABhhVodHRwOi8vcjMuby5sZW5jci5v
+cmcwIgYIKwYBBQUHMAKGFmh0dHA6Ly9yMy5pLmxlbmNyLm9yZy8wGQYDVR0RBBIw
+EIIOdHJhY2tpby5vbmxpbmUwEwYDVR0gBAwwCjAIBgZngQwBAgEwggEDBgorBgEE
+AdZ5AgQCBIH0BIHxAO8AdQA7U3d1Pi25gE6LMFsG/kA7Z9hPw/THvQANLXJv4frU
+FwAAAYxfnyo6AAAEAwBGMEQCIBqYq5pa2GE7UNJHzN+1AAbw///s8PtWNkauU9UO
+igWZAiAktf1uf/O90k1l/+ihkPxJXToxcH5yeOiqATqDMol5PwB2AHb/iD8KtvuV
+UcJhzPWHujS0pM27KdxoQgqf5mdMWjp0AAABjF+fKoMAAAQDAEcwRQIgfNyTycHQ
+D1OMAOBA8vHAyu//5SjnY0BtCxOITyY/W1oCIQCCHFH+VKTFCglsqcp2hwQJHGq/
+jiSj4tR0jYIm5xMlaTANBgkqhkiG9w0BAQsFAAOCAQEAqu7cvsrkAnyrBgQHovQ4
+r+F1S/H6vu/Bvt9x+d125uDa/pT55JO/wG1IvdT9fxws2oYcc/nc8DjvW9U7+peu
+5K675kH09QTi+GhBAU4gZBhx3PohA6qG0Wm/6gC4lOq+S7o32x6RpoptcSvB3UXQ
+9BkgbO6LgDu99jPm6Acv4wre6trXAbPOpSlruSKSENnda7l/CamfiOX0cRKHjZdX
+PNpIfqWXokXNNYDAdrcXbOm7mFVMo1WcjBQM6E++IXfDRqHQ82Y94YVhEdH/hCo6
+3ce9uSrgL9+HcwhHzlZj20rTHFJ6iX/+Ffk8wbYfR4Eu7MXDg8ULT0z93yIvDxgy
+uw==
+-----END CERTIFICATE-----
+-----BEGIN CERTIFICATE-----
+MIIFFjCCAv6gAwIBAgIRAJErCErPDBinU/bWLiWnX1owDQYJKoZIhvcNAQELBQAw
+TzELMAkGA1UEBhMCVVMxKTAnBgNVBAoTIEludGVybmV0IFNlY3VyaXR5IFJlc2Vh
+cmNoIEdyb3VwMRUwEwYDVQQDEwxJU1JHIFJvb3QgWDEwHhcNMjAwOTA0MDAwMDAw
+WhcNMjUwOTE1MTYwMDAwWjAyMQswCQYDVQQGEwJVUzEWMBQGA1UEChMNTGV0J3Mg
+RW5jcnlwdDELMAkGA1UEAxMCUjMwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEK
+AoIBAQC7AhUozPaglNMPEuyNVZLD+ILxmaZ6QoinXSaqtSu5xUyxr45r+XXIo9cP
+R5QUVTVXjJ6oojkZ9YI8QqlObvU7wy7bjcCwXPNZOOftz2nwWgsbvsCUJCWH+jdx
+sxPnHKzhm+/b5DtFUkWWqcFTzjTIUu61ru2P3mBw4qVUq7ZtDpelQDRrK9O8Zutm
+NHz6a4uPVymZ+DAXXbpyb/uBxa3Shlg9F8fnCbvxK/eG3MHacV3URuPMrSXBiLxg
+Z3Vms/EY96Jc5lP/Ooi2R6X/ExjqmAl3P51T+c8B5fWmcBcUr2Ok/5mzk53cU6cG
+/kiFHaFpriV1uxPMUgP17VGhi9sVAgMBAAGjggEIMIIBBDAOBgNVHQ8BAf8EBAMC
+AYYwHQYDVR0lBBYwFAYIKwYBBQUHAwIGCCsGAQUFBwMBMBIGA1UdEwEB/wQIMAYB
+Af8CAQAwHQYDVR0OBBYEFBQusxe3WFbLrlAJQOYfr52LFMLGMB8GA1UdIwQYMBaA
+FHm0WeZ7tuXkAXOACIjIGlj26ZtuMDIGCCsGAQUFBwEBBCYwJDAiBggrBgEFBQcw
+AoYWaHR0cDovL3gxLmkubGVuY3Iub3JnLzAnBgNVHR8EIDAeMBygGqAYhhZodHRw
+Oi8veDEuYy5sZW5jci5vcmcvMCIGA1UdIAQbMBkwCAYGZ4EMAQIBMA0GCysGAQQB
+gt8TAQEBMA0GCSqGSIb3DQEBCwUAA4ICAQCFyk5HPqP3hUSFvNVneLKYY611TR6W
+PTNlclQtgaDqw+34IL9fzLdwALduO/ZelN7kIJ+m74uyA+eitRY8kc607TkC53wl
+ikfmZW4/RvTZ8M6UK+5UzhK8jCdLuMGYL6KvzXGRSgi3yLgjewQtCPkIVz6D2QQz
+CkcheAmCJ8MqyJu5zlzyZMjAvnnAT45tRAxekrsu94sQ4egdRCnbWSDtY7kh+BIm
+lJNXoB1lBMEKIq4QDUOXoRgffuDghje1WrG9ML+Hbisq/yFOGwXD9RiX8F6sw6W4
+avAuvDszue5L3sz85K+EC4Y/wFVDNvZo4TYXao6Z0f+lQKc0t8DQYzk1OXVu8rp2
+yJMC6alLbBfODALZvYH7n7do1AZls4I9d1P4jnkDrQoxB3UqQ9hVl3LEKQ73xF1O
+yK5GhDDX8oVfGKF5u+decIsH4YaTw7mP3GFxJSqv3+0lUFJoi5Lc5da149p90Ids
+hCExroL1+7mryIkXPeFM5TgO9r0rvZaBFOvV2z0gp35Z0+L4WPlbuEjN/lxPFin+
+HlUjr8gRsI3qfJOQFy/9rKIJR0Y/8Omwt/8oTWgy1mdeHmmjk7j1nYsvC9JSQ6Zv
+MldlTTKB3zhThV1+XWYp6rjd5JW1zbVWEkLNxE7GJThEUG3szgBVGP7pSWTUTsqX
+nLRbwHOoq7hHwg==
+-----END CERTIFICATE-----
+-----BEGIN CERTIFICATE-----
+MIIFYDCCBEigAwIBAgIQQAF3ITfU6UK47naqPGQKtzANBgkqhkiG9w0BAQsFADA/
+MSQwIgYDVQQKExtEaWdpdGFsIFNpZ25hdHVyZSBUcnVzdCBDby4xFzAVBgNVBAMT
+DkRTVCBSb290IENBIFgzMB4XDTIxMDEyMDE5MTQwM1oXDTI0MDkzMDE4MTQwM1ow
+TzELMAkGA1UEBhMCVVMxKTAnBgNVBAoTIEludGVybmV0IFNlY3VyaXR5IFJlc2Vh
+cmNoIEdyb3VwMRUwEwYDVQQDEwxJU1JHIFJvb3QgWDEwggIiMA0GCSqGSIb3DQEB
+AQUAA4ICDwAwggIKAoICAQCt6CRz9BQ385ueK1coHIe+3LffOJCMbjzmV6B493XC
+ov71am72AE8o295ohmxEk7axY/0UEmu/H9LqMZshftEzPLpI9d1537O4/xLxIZpL
+wYqGcWlKZmZsj348cL+tKSIG8+TA5oCu4kuPt5l+lAOf00eXfJlII1PoOK5PCm+D
+LtFJV4yAdLbaL9A4jXsDcCEbdfIwPPqPrt3aY6vrFk/CjhFLfs8L6P+1dy70sntK
+4EwSJQxwjQMpoOFTJOwT2e4ZvxCzSow/iaNhUd6shweU9GNx7C7ib1uYgeGJXDR5
+bHbvO5BieebbpJovJsXQEOEO3tkQjhb7t/eo98flAgeYjzYIlefiN5YNNnWe+w5y
+sR2bvAP5SQXYgd0FtCrWQemsAXaVCg/Y39W9Eh81LygXbNKYwagJZHduRze6zqxZ
+Xmidf3LWicUGQSk+WT7dJvUkyRGnWqNMQB9GoZm1pzpRboY7nn1ypxIFeFntPlF4
+FQsDj43QLwWyPntKHEtzBRL8xurgUBN8Q5N0s8p0544fAQjQMNRbcTa0B7rBMDBc
+SLeCO5imfWCKoqMpgsy6vYMEG6KDA0Gh1gXxG8K28Kh8hjtGqEgqiNx2mna/H2ql
+PRmP6zjzZN7IKw0KKP/32+IVQtQi0Cdd4Xn+GOdwiK1O5tmLOsbdJ1Fu/7xk9TND
+TwIDAQABo4IBRjCCAUIwDwYDVR0TAQH/BAUwAwEB/zAOBgNVHQ8BAf8EBAMCAQYw
+SwYIKwYBBQUHAQEEPzA9MDsGCCsGAQUFBzAChi9odHRwOi8vYXBwcy5pZGVudHJ1
+c3QuY29tL3Jvb3RzL2RzdHJvb3RjYXgzLnA3YzAfBgNVHSMEGDAWgBTEp7Gkeyxx
++tvhS5B1/8QVYIWJEDBUBgNVHSAETTBLMAgGBmeBDAECATA/BgsrBgEEAYLfEwEB
+ATAwMC4GCCsGAQUFBwIBFiJodHRwOi8vY3BzLnJvb3QteDEubGV0c2VuY3J5cHQu
+b3JnMDwGA1UdHwQ1MDMwMaAvoC2GK2h0dHA6Ly9jcmwuaWRlbnRydXN0LmNvbS9E
+U1RST09UQ0FYM0NSTC5jcmwwHQYDVR0OBBYEFHm0WeZ7tuXkAXOACIjIGlj26Ztu
+MA0GCSqGSIb3DQEBCwUAA4IBAQAKcwBslm7/DlLQrt2M51oGrS+o44+/yQoDFVDC
+5WxCu2+b9LRPwkSICHXM6webFGJueN7sJ7o5XPWioW5WlHAQU7G75K/QosMrAdSW
+9MUgNTP52GE24HGNtLi1qoJFlcDyqSMo59ahy2cI2qBDLKobkx/J3vWraV0T9VuG
+WCLKTVXkcGdtwlfFRjlBz4pYg1htmf5X6DYO8A4jqv2Il9DjXA6USbW1FzXSLr9O
+he8Y4IWS6wY7bCkjCWDcRQJMEhg76fsO3txE+FiYruq9RUWhiF1myv4Q6W+CyBFC
+Dfvp7OOGAN6dEOM4+qR9sdjoSYKEBpsr6GtPAQw4dy753ec5
+-----END CERTIFICATE-----

src/main/resources/privkey.pem

@@ -0,0 +1,5 @@
+-----BEGIN PRIVATE KEY-----
+MIGHAgEAMBMGByqGSM49AgEGCCqGSM49AwEHBG0wawIBAQQg9kCIfgqNqFYgYU0Q
+HGi/jc5nLxhZxoXST5qeXBGtOAehRANCAASKtOgK5W+o2JPdHGqzK7b46YPtNgFb
+4JX3rf05bgWHAdoXHLOgJYjf/DeBk1UT/ljUK/AcCzCp+5qbQuN9uco4
+-----END PRIVATE KEY-----