Update dependency node to v23.6.1

Reviewed-on: #180

.dockerignore

@@ -0,0 +1,13 @@
+node_modules
+npm-debug.log
+Dockerfile*
+docker-compose*
+.dockerignore
+.git
+.gitignore
+README.md
+LICENSE
+.vscode
+.next
+*.swp
+/scripts

.github/workflows/build.yml

@@ -0,0 +1,53 @@
+name: Build Nginx-based docker image
+on:
+  push:
+concurrency:
+  group: ${{ github.ref }}
+  cancel-in-progress: true
+jobs:
+  build-static-assets:
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+      
+      - name: Login to the private Docker registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ secrets.PRIVATE_REGISTRY_HOST }}
+          username: ${{ secrets.PRIVATE_REGISTRY_USERNAME }}
+          password: ${{ secrets.PRIVATE_REGISTRY_TOKEN }}
+
+      - name: Build and push intermediate stages (deps)
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          target: deps
+          push: ${{ github.ref == 'refs/heads/main' }}
+          tags: ${{ secrets.PRIVATE_REGISTRY_HOST }}/${{ env.GITHUB_REPOSITORY }}:deps
+          cache-from: type=registry,ref=${{ secrets.PRIVATE_REGISTRY_HOST }}/${{ env.GITHUB_REPOSITORY }}:deps
+          cache-to: type=inline
+
+      - name: Build and push intermediate stages (builder)
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          target: builder
+          push: ${{ github.ref == 'refs/heads/main' }}
+          tags: ${{ secrets.PRIVATE_REGISTRY_HOST }}/${{ env.GITHUB_REPOSITORY }}:builder
+          cache-from: type=registry,ref=${{ secrets.PRIVATE_REGISTRY_HOST }}/${{ env.GITHUB_REPOSITORY }}:builder
+          cache-to: type=inline
+        
+      - name: Build and push (final)
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          push: ${{ github.ref == 'refs/heads/main' }}
+          tags: ${{ secrets.PRIVATE_REGISTRY_HOST }}/${{ env.GITHUB_REPOSITORY }}:latest
+          cache-from: type=registry,ref=${{ secrets.PRIVATE_REGISTRY_HOST }}/${{ env.GITHUB_REPOSITORY }}:latest
+          cache-to: type=inline

.github/workflows/copyright_notice.yml

@@ -0,0 +1,35 @@
+name: Add copyright notice
+on:
+  pull_request:
+permissions:
+  contents: write
+concurrency:
+  group: ${{ github.ref }}
+  cancel-in-progress: true
+jobs:
+  copyright_notice:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          token: ${{ secrets.ACTIONS_TOKEN }}
+          ref: ${{ github.head_ref }}
+      - uses: VinnyBabuManjaly/copyright-action@v1.0.0
+        with:
+          CopyrightString: '/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/\n\n'
+          FileType: '.tsx, .jsx, .ts'
+          Path: 'app/, config/, db/'
+          IgnorePath: 'testfolder1/a/, testfolder3'
+      - name: Commit changes
+        run: |
+          git config --local user.email "bustikiller@bustikiller.com"
+          git config --local user.name "Manuel Bustillo"
+          git add .
+
+          if [ -n "$(git status --porcelain)" ]; then
+            echo "there are changes";
+            git commit -m "Add copyright notice"
+            git push
+          else
+            echo "no changes";
+          fi

.github/workflows/license_finder.yml

@@ -0,0 +1,23 @@
+name: Check usage of free licenses
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+concurrency:
+  group: ${{ github.ref }}
+  cancel-in-progress: true
+jobs:
+  build-static-assets:
+    runs-on: ubuntu-latest
+    steps:
+        - uses: actions/checkout@v4
+          with:
+            token: ${{ secrets.GITHUB_TOKEN }}
+        - uses: ruby/setup-ruby@v1
+          with:
+            ruby-version: '3.3'
+        - name: Install license finder gem
+          run: gem install license_finder
+        - name: Run license finder
+          run: license_finder

.github/workflows/playwright.yml

@@ -0,0 +1,31 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+concurrency:
+  group: ${{ github.ref }}
+  cancel-in-progress: true
+jobs:
+  test:
+    if: false
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+    - name: Install dependencies
+      run: npm install -g pnpm && pnpm install
+    - name: Build the service that will be tested
+      run: npm run build
+    - name: Install Playwright Browsers
+      run: pnpm exec playwright install --with-deps
+    - name: Run the service that will be tested
+      run: npm run start &
+    - name: Run Playwright tests
+      run: pnpm exec playwright test

.gitignore

@@ -34,3 +34,7 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

.nvmrc

@@ -0,0 +1 @@
+23.6.1

COPYING.md

@@ -0,0 +1,660 @@
+# GNU AFFERO GENERAL PUBLIC LICENSE
+
+Version 3, 19 November 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 Affero General Public License is a free, copyleft license for
+software and other kinds of works, specifically designed to ensure
+cooperation with the community in the case of network server software.
+
+The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works. By contrast,
+our General Public Licenses are 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.
+
+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.
+
+Developers that use our General Public Licenses protect your rights
+with two steps: (1) assert copyright on the software, and (2) offer
+you this License which gives you legal permission to copy, distribute
+and/or modify the software.
+
+A secondary benefit of defending all users' freedom is that
+improvements made in alternate versions of the program, if they
+receive widespread use, become available for other developers to
+incorporate. Many developers of free software are heartened and
+encouraged by the resulting cooperation. However, in the case of
+software used on network servers, this result may fail to come about.
+The GNU General Public License permits making a modified version and
+letting the public access it on a server without ever releasing its
+source code to the public.
+
+The GNU Affero General Public License is designed specifically to
+ensure that, in such cases, the modified source code becomes available
+to the community. It requires the operator of a network server to
+provide the source code of the modified version running there to the
+users of that server. Therefore, public use of a modified version, on
+a publicly accessible server, gives the public access to the source
+code of the modified version.
+
+An older license, called the Affero General Public License and
+published by Affero, was designed to accomplish similar goals. This is
+a different license, not a version of the Affero GPL, but Affero has
+released a new version of the Affero GPL which permits relicensing
+under this license.
+
+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 Affero 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. Remote Network Interaction; Use with the GNU General Public License.
+
+Notwithstanding any other provision of this License, if you modify the
+Program, your modified version must prominently offer all users
+interacting with it remotely through a computer network (if your
+version supports such interaction) an opportunity to receive the
+Corresponding Source of your version by providing access to the
+Corresponding Source from a network server at no charge, through some
+standard or customary means of facilitating copying of software. This
+Corresponding Source shall include the Corresponding Source for any
+work covered by version 3 of the GNU General Public License that is
+incorporated pursuant to the following paragraph.
+
+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 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 work with which it is combined will remain governed by version
+3 of the GNU General Public License.
+
+### 14. Revised Versions of this License.
+
+The Free Software Foundation may publish revised and/or new versions
+of the GNU Affero 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 Affero 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 Affero 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 Affero 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 Affero 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 Affero General Public License for more details.
+
+        You should have received a copy of the GNU Affero 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 your software can interact with users remotely through a computer
+network, you should also make sure that it provides a way for users to
+get its source. For example, if your program is a web application, its
+interface could display a "Source" link that leads users to an archive
+of the code. There are many ways you could offer source, and different
+solutions will be better for different programs; see section 13 for
+the specific requirements.
+
+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 AGPL, see <https://www.gnu.org/licenses/>.

Dockerfile

@@ -0,0 +1,69 @@
+# Based on https://github.com/vercel/next.js/blob/canary/examples/with-docker/Dockerfile
+
+FROM node:23-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+RUN \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+  elif [ -f package-lock.json ]; then npm ci; \
+  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN \
+  if [ -f yarn.lock ]; then yarn run build; \
+  elif [ -f package-lock.json ]; then npm run build; \
+  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm run build; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# Set the correct permission for prerender cache
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT=3000
+
+# server.js is created by next build from the standalone output
+# https://nextjs.org/docs/pages/api-reference/next-config-js/output
+CMD HOSTNAME="0.0.0.0" node server.js

Dockerfile.dev

@@ -0,0 +1,28 @@
+# Based on https://github.com/vercel/next.js/blob/canary/examples/with-docker/Dockerfile
+
+FROM node:23-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+RUN \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+  elif [ -f package-lock.json ]; then npm ci; \
+  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+COPY . /app/
+
+ENV NODE_ENV development
+ENV NEXT_TELEMETRY_DISABLED 1
+
+EXPOSE 3000
+ENV PORT=3000
+
+CMD HOSTNAME="0.0.0.0" pnpm run dev

app/[slug]/dashboard/expenses/page.tsx

@@ -0,0 +1,45 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+'use client'
+
+import { AbstractApi } from '@/app/api/abstract-api';
+import { Expense, ExpenseSerializer } from '@/app/lib/expense';
+import { classNames } from '@/app/ui/components/button';
+import ExpenseFormDialog from '@/app/ui/components/expense-form-dialog';
+import ExpensesTable from '@/app/ui/expenses/table';
+import SkeletonTable from '@/app/ui/guests/skeleton-row';
+import { Suspense, useEffect, useState } from 'react';
+
+export default function Page() {
+  const refreshExpenses = () => {
+    new AbstractApi<Expense>().getAll(new ExpenseSerializer(), (expenses: Expense[]) => {
+      setExpenses(expenses);
+    });
+  }
+
+  const [expenses, setExpenses] = useState<Expense[]>([]);
+  const [expenseBeingEdited, setExpenseBeingEdited] = useState<Expense | undefined>(undefined);
+  useEffect(() => { refreshExpenses() }, []);
+
+  return (
+    <div className="w-full">
+      <div className="flex flex-col w-full items-center justify-between">
+        <button onClick={() => setExpenseBeingEdited({})} className={classNames('primary')}>Add new</button>
+        <ExpenseFormDialog
+          key={expenseBeingEdited?.id}
+          onCreate={() => { refreshExpenses(); setExpenseBeingEdited(undefined) }}
+          expense={expenseBeingEdited}
+          visible={expenseBeingEdited !== undefined}
+          onHide={() => { setExpenseBeingEdited(undefined) }}
+        />
+        <Suspense fallback={<SkeletonTable />}>
+          <ExpensesTable
+            expenses={expenses}
+            onUpdate={refreshExpenses}
+            onEdit={(expense) => setExpenseBeingEdited(expense)}
+          />
+        </Suspense>
+      </div>
+    </div>
+  );
+}

app/[slug]/dashboard/guests/page.tsx

@@ -0,0 +1,119 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+'use client';
+
+import { AbstractApi, } from '@/app/api/abstract-api';
+import { Group, GroupSerializer } from '@/app/lib/group';
+import { Guest, GuestSerializer } from '@/app/lib/guest';
+import { getCsrfToken, getSlug } from '@/app/lib/utils';
+import AffinitiesFormDialog from '@/app/ui/components/affinities-form-dialog';
+import { classNames } from '@/app/ui/components/button';
+import GroupFormDialog from '@/app/ui/components/group-form-dialog';
+import GuestFormDialog from '@/app/ui/components/guest-form-dialog';
+import GroupsTable from '@/app/ui/groups/table';
+import SkeletonTable from '@/app/ui/guests/skeleton-row';
+import GuestsTable from '@/app/ui/guests/table';
+import { TabPanel, TabView } from 'primereact/tabview';
+import { Suspense, useState } from 'react';
+
+
+export default function Page() {
+  function refreshGuests() {
+    new AbstractApi<Guest>().getAll(new GuestSerializer(), (objects: Guest[]) => {
+      setGuests(objects);
+      setGuestsLoaded(true);
+    });
+  }
+
+  function refreshGroups() {
+    new AbstractApi<Group>().getAll(new GroupSerializer(), (objects: Group[]) => {
+      setGroups(objects);
+      setGroupsLoaded(true);
+    });
+  }
+
+  function resetAffinities() {
+    fetch(`/api/${getSlug()}/groups/affinities/reset`, {
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'X-CSRF-TOKEN': getCsrfToken(),
+      }
+    })
+  }
+
+  const [groupsLoaded, setGroupsLoaded] = useState(false);
+  const [groups, setGroups] = useState<Array<Group>>([]);
+  const [groupBeingEdited, setGroupBeingEdited] = useState<Group | undefined>(undefined);
+
+  const [groupAffinitiesBeingEditted, setGroupAffinitiesBeingEditted] = useState<Group | undefined>(undefined);
+
+  const [guestsLoaded, setGuestsLoaded] = useState(false);
+  const [guests, setGuests] = useState<Array<Guest>>([]);
+  const [guestBeingEdited, setGuestBeingEdited] = useState<Guest | undefined>(undefined);
+
+  !groupsLoaded && refreshGroups();
+  !guestsLoaded && refreshGuests();
+
+  return (
+    <div className="w-full">
+      <TabView>
+        <TabPanel header="Guests" leftIcon="pi pi-users mx-2">
+          <div className="flex flex-col w-full items-center justify-between">
+            <button onClick={() => setGuestBeingEdited({})} className={classNames('primary')}>Add new</button>
+            <GuestFormDialog
+              key={guestBeingEdited?.id}
+              groups={groups}
+              onCreate={() => { refreshGuests(); setGuestBeingEdited(undefined) }}
+              guest={guestBeingEdited}
+              visible={guestBeingEdited !== undefined}
+              onHide={() => { setGuestBeingEdited(undefined) }}
+            />
+            <Suspense fallback={<SkeletonTable />}>
+              <GuestsTable
+                guests={guests}
+                onUpdate={refreshGuests}
+                onEdit={(guest) => setGuestBeingEdited(guest)}
+              />
+            </Suspense>
+          </div>
+        </ TabPanel>
+        <TabPanel header="Groups" leftIcon="pi pi-sitemap mx-2">
+          <div className="flex flex-col w-full items-center justify-between">
+
+            <div>
+              <button onClick={() => setGroupBeingEdited({})} className={classNames('primary')}>Add new</button>
+              <button onClick={resetAffinities} className={classNames('yellow')}>Reset affinities</button>
+            </div>
+
+            <GroupFormDialog
+              key={groupBeingEdited?.id}
+              groups={groups}
+              onCreate={() => { refreshGroups(); setGroupBeingEdited(undefined) }}
+              group={groupBeingEdited}
+              visible={groupBeingEdited !== undefined}
+              onHide={() => { setGroupBeingEdited(undefined) }}
+            />
+
+            <AffinitiesFormDialog
+              groups={groups}
+              group={groupAffinitiesBeingEditted}
+              visible={groupAffinitiesBeingEditted !== undefined}
+              onHide={() => { setGroupAffinitiesBeingEditted(undefined) }}
+            />
+
+            <Suspense fallback={<SkeletonTable />}>
+              <GroupsTable
+                groups={groups}
+                onUpdate={refreshGroups}
+                onEdit={(group) => setGroupBeingEdited(group)}
+                onEditAffinities={(group) => setGroupAffinitiesBeingEditted(group)}
+              />
+            </Suspense>
+          </div>
+        </ TabPanel>
+      </ TabView>
+    </div>
+
+  );
+}

app/[slug]/dashboard/layout.tsx

@@ -1,3 +1,5 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
 import SideNav from '@/app/ui/dashboard/sidenav';
  
 export default function Layout({ children }: { children: React.ReactNode }) {
@@ -6,7 +8,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
       <div className="w-full flex-none md:w-64">
         <SideNav />
       </div>
-      <div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
+      <div data-testid="main-container" className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
     </div>
   );
 }

app/[slug]/dashboard/page.tsx

@@ -0,0 +1,26 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+'use client'
+
+import { GlobalSummary as Summary } from '@/app/lib/definitions';
+import { getSlug } from '@/app/lib/utils';
+import GlobalSummary from '@/app/ui/dashboard/global-summary';
+import { useEffect, useState } from 'react';
+
+export default function Page() {
+  const [globalSummary, setGlobalSummary] = useState<Summary | undefined>(undefined);
+
+  function refreshSummary() {
+    fetch(`/api/${getSlug()}/summary`)
+      .then((response) => response.json())
+      .then((data) => {
+        setGlobalSummary(data);
+      })
+  }
+
+  useEffect(refreshSummary, []);
+
+  return (
+    globalSummary && <GlobalSummary summary={globalSummary} />
+  );
+}

app/[slug]/dashboard/tables/page.tsx

@@ -0,0 +1,18 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+'use client';
+
+import Arrangement from '@/app/ui/arrangements/arrangement';
+import React, { useState } from 'react';
+import ArrangementsTable from '@/app/ui/arrangements/arrangements-table';
+
+export default function Page() {
+  const [currentArrangement, setCurrentArrangement] = useState<string | null>(null);
+
+  return (
+    <>
+      <ArrangementsTable onArrangementSelected={setCurrentArrangement} />
+      {currentArrangement && <Arrangement key={currentArrangement} id={currentArrangement} />}
+    </>
+  )
+}

app/[slug]/page.tsx

@@ -0,0 +1,40 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+'use client';
+
+import LoginForm from '@/app/ui/components/login-form';
+import RegistrationForm from '@/app/ui/components/registration-form';
+import { useParams } from 'next/navigation'
+import { useEffect } from 'react';
+import { retrieveCSRFToken } from '../api/authentication';
+import { getCsrfToken } from '../lib/utils';
+
+export default async function Page() {
+  const params = useParams<{ slug: string }>()
+
+  useEffect(() => {
+    if (getCsrfToken() == 'unknown') {
+      retrieveCSRFToken();
+    }
+  }, []);
+
+  if (typeof window !== 'undefined') {
+    localStorage.setItem('slug', await params.slug);
+  }
+
+  return (
+    <main className="flex min-h-screen flex-col p-6">
+      <div className="flex flex-row">
+        <div className="w-1/2">
+          Already have an account? Sign in
+          <LoginForm />
+        </div>
+
+        <div className="w-1/2">
+          Don't have an account? Register now!
+          <RegistrationForm />
+        </div>
+      </div>
+    </main>
+  );
+}

app/api/abstract-api.tsx

@@ -0,0 +1,76 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+import { Entity } from '@/app/lib/definitions';
+import { getCsrfToken, getSlug } from '@/app/lib/utils';
+
+export interface Api<T extends Entity> {
+  getAll(serializable: Serializable<T> ,callback: (objets: T[]) => void): void;
+  get(serializable: Serializable<T>, id: string, callback: (object: T) => void): void;
+  create(serializable: Serializable<T>, object: T, callback: () => void): void;
+  update(serializable: Serializable<T>, object: T, callback: () => void): void;
+  destroy(serializable: Serializable<T>, object: T, callback: () => void): void;
+}
+
+export interface Serializable<T> {
+  fromJson(json: any): T;
+  toJson(object: T): string;
+  apiPath(): string;
+}
+
+export class AbstractApi<T extends Entity> implements Api<T> {
+  getAll(serializable: Serializable<T>, callback: (objets: T[]) => void): void {
+    fetch(`/api/${getSlug()}/${serializable.apiPath()}`)
+      .then((response) => response.json())
+      .then((data) => {
+        callback(data.map((record: any) => {
+          return serializable.fromJson(record);
+        }));
+      }, (error) => {
+        return [];
+      });
+  }
+
+  get(serializable: Serializable<T>, id: string, callback: (object: T) => void): void {
+    fetch(`/api/${getSlug()}/${serializable.apiPath()}/${id}`)
+      .then((response) => response.json())
+      .then((data) => {
+        callback(serializable.fromJson(data));
+      }, (error) => {
+        return [];
+      });
+  }
+
+  update(serializable: Serializable<T>, object: T, callback: () => void): void {
+    fetch(`/api/${getSlug()}/${serializable.apiPath()}/${object.id}`, {
+      method: 'PUT',
+      body: serializable.toJson(object),
+      headers: {
+        'Content-Type': 'application/json',
+        'X-CSRF-TOKEN': getCsrfToken(),
+      }
+    }).then(callback)
+      .catch((error) => console.error(error));
+  }
+
+  create(serializable: Serializable<T>, object: T, callback: () => void): void {
+    fetch(`/api/${getSlug()}/${serializable.apiPath()}`, {
+      method: 'POST',
+      body: serializable.toJson(object),
+      headers: {
+        'Content-Type': 'application/json',
+        'X-CSRF-TOKEN': getCsrfToken(),
+      }
+    }).then(callback)
+      .catch((error) => console.error(error));
+  }
+
+  destroy(serializable: Serializable<T>, object: T, callback: () => void): void {
+    fetch(`/api/${getSlug()}/${serializable.apiPath()}/${object.id}`, {
+      method: 'DELETE',
+      headers: {
+        'X-CSRF-TOKEN': getCsrfToken(),
+      }
+    }).then(callback)
+      .catch((error) => console.error(error));
+  }
+}

app/api/authentication.tsx

@@ -0,0 +1,86 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+import { asArray, getCsrfToken, getSlug } from '@/app/lib/utils';
+import { Captcha, StructuredErrors, User } from '@/app/lib/definitions';
+
+export function login({ email, password, onLogin }: { email: string, password: string, onLogin: (user: User) => void }) {
+  return fetch(`/api/${getSlug()}/users/sign_in`, {
+    method: 'POST',
+    body: JSON.stringify({ user: { email, password } }),
+    headers: {
+      'Accept': 'application/json',
+      'Content-Type': 'application/json',
+      'X-CSRF-TOKEN': getCsrfToken(),
+    }
+  })
+    .then((response) => response.json())
+    .then((data: any) => {
+      console.log(data);
+      onLogin({
+        id: data.id || '',
+        email: data.email || '',
+      });
+    })
+    .catch((error) => console.error(error));
+}
+
+export function logout({ onLogout }: { onLogout: () => void }) {
+  fetch(`/api/${getSlug()}/users/sign_out`, {
+    method: 'DELETE',
+    headers: {
+      'X-CSRF-TOKEN': getCsrfToken(),
+    }
+  }).then(onLogout)
+    .catch((error) => console.error(error));
+}
+
+function flattenErrors(errors: StructuredErrors): string[] {
+  if (errors instanceof Array) {
+    return errors;
+  }
+  return Object.keys(errors).map((key) => {
+    return `${key}: ${asArray(errors[key]).join(', ')}`;
+  });
+}
+
+// At this moment we're making an initial request to get a valid CSRF token
+export function retrieveCSRFToken() {
+  return fetch(`/api/token`, {
+    headers: {
+      'Accept': 'application/json',
+    }
+  }).then((response) => { return null });
+}
+
+export function register({ slug, email, password, passwordConfirmation, captcha, onRegister, onError }: {
+  slug: string,
+  email: string,
+  password: string,
+  passwordConfirmation: string,
+  captcha: Captcha,
+  onRegister: () => void,
+  onError: (errors: string[]) => void
+}) {
+  fetch(`/api/${slug}/users`, {
+    method: 'POST',
+    body: JSON.stringify(
+      {
+        user: { email, password, password_confirmation: passwordConfirmation },
+        captcha: { id: captcha.id, answer: captcha.answer }
+      }
+    ),
+    headers: {
+      'Accept': 'application/json',
+      'Content-Type': 'application/json',
+      'X-CSRF-TOKEN': getCsrfToken(),
+    }
+  }).then((response) => {
+    if (response.ok) {
+      response.json().then(onRegister);
+    } else {
+      response.json().then((data: any) => {
+        onError(data.errors && flattenErrors(data.errors) || [data.error]);
+      });
+    }
+  })
+}

app/api/captcha.tsx

@@ -0,0 +1,19 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+import { data } from "autoprefixer";
+import { getCsrfToken } from "../lib/utils";
+
+export function getCaptchaChallenge({onRetrieve}: {onRetrieve: (id: string, url: string) => void}){
+  return fetch('/api/captcha', {
+    method: 'POST',
+    headers: {
+      'Accept': 'application/json',
+      'X-CSRF-TOKEN': getCsrfToken(),
+    }
+  })
+    .then((response) => response.json())
+    .then((data: any) => {
+      onRetrieve(data.id, data.media_url)
+    })
+    .catch((error) => console.error(error));
+}

app/api/health/route.ts

@@ -0,0 +1,7 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+import { NextResponse } from "next/server";
+
+export function GET() {
+  return NextResponse.json({});
+}

app/api/tableSimulations.tsx

@@ -0,0 +1,20 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+import { TableArrangement } from '@/app/lib/definitions';
+import { getSlug } from '../lib/utils';
+
+export function loadTableSimulations(onLoad?: (tableSimulations: TableArrangement[]) => void) {
+  fetch(`/api/${getSlug()}/tables_arrangements`)
+    .then((response) => response.json())
+    .then((data) => {
+      onLoad && onLoad(data.map((record: any) => {
+        return ({
+          id: record.id,
+          name: record.name,
+          discomfort: record.discomfort,
+        });
+      }));
+    }, (error) => {
+      return [];
+    });
+}

app/dashboard/expenses/page.tsx

@@ -1,11 +0,0 @@
-import { lusitana } from '@/app/ui/fonts';
- 
-export default  function Page () {
-  return (
-    <div className="w-full">
-      <div className="flex w-full items-center justify-between">
-        <h1 className={`${lusitana.className} text-2xl`}>Expenses</h1>
-      </div>
-    </div>
-  );
-}

app/dashboard/guests/page.tsx

@@ -1,20 +0,0 @@
-import { lusitana } from '@/app/ui/fonts';
-import AffinityGroupsTree from '@/app/ui/guests/affinity-groups-tree';
-import GuestsTable from '@/app/ui/guests/table';
-import { Tree } from 'primereact/tree';
-import React, { useState, useEffect } from 'react';
-
-
-
-export default function Page() {
-  return (
-    <div className="w-full">
-      <AffinityGroupsTree />
-      
-      <h1 className={`${lusitana.className} text-2xl py-4`}>Guests</h1>
-      <div className="flex w-full items-center justify-between">
-        <GuestsTable />
-      </div>
-    </div>
-  );
-}

app/dashboard/page.tsx

@@ -1,3 +0,0 @@
-export default function Page() {
-  return <p>Dashboard Page</p>;
-}

app/dashboard/tables/page.tsx

@@ -1,11 +0,0 @@
-import { lusitana } from '@/app/ui/fonts';
- 
-export default  function Page () {
-  return (
-    <div className="w-full">
-      <div className="flex w-full items-center justify-between">
-        <h1 className={`${lusitana.className} text-2xl`}>Table distributions</h1>
-      </div>
-    </div>
-  );
-}

app/layout.tsx

@@ -1,3 +1,5 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
 import '@/app/ui/global.css'
 
 import 'primereact/resources/themes/lara-light-cyan/theme.css';

app/lib/affinities.tsx

@@ -0,0 +1,5 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+export class Affinities {
+  [key:string]: number;
+}

app/lib/definitions.ts

@@ -1,104 +1,49 @@
-// This file contains type definitions for your data.
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
-// It describes the shape of the data, and what data type each property should accept.
-// For simplicity of teaching, we're manually defining these types.
-// However, these types are generated automatically if you're using an ORM such as Prisma.
-export type User = {
-  id: string;
-  name: string;
-  email: string;
-  password: string;
-};
 
-export type Customer = {
+import { AttendanceSummary } from "./group";
-  id: string;
+import { Guest } from "./guest";
-  name: string;
-  email: string;
-  image_url: string;
-};
 
-export type Guest = {
+export interface Entity {
-  id: string;
+  id?: string;
-  name: string;
-  email: string;
-  group_name: string;
-  status: 'Considered' | 'Invited' | 'Confirmed' | 'Declined';
 }
 
-export type Group = {
+export type TableArrangement = {
   id: string;
+  number: number;
   name: string;
-  guest_count: number;
+  guests?: Guest[];
-  icon: string;
+  discomfort?: number
-  children: Group[];
+}
-};
 
-export type Invoice = {
+export type User = {
   id: string;
-  customer_id: string;
-  amount: number;
-  date: string;
-  // In TypeScript, this is called a string union type.
-  // It means that the "status" property can only be one of the two strings: 'pending' or 'paid'.
-  status: 'pending' | 'paid';
-};
-
-export type Revenue = {
-  month: string;
-  revenue: number;
-};
-
-export type LatestInvoice = {
-  id: string;
-  name: string;
-  image_url: string;
   email: string;
-  amount: string;
+}
-};
 
-// The database returns a number for amount, but we later format it to a string with the formatCurrency function
+export type Captcha = {
-export type LatestInvoiceRaw = Omit<LatestInvoice, 'amount'> & {
-  amount: number;
-};
-
-export type guestsTable = {
   id: string;
-  customer_id: string;
+  answer: string;
-  name: string;
+}
-  email: string;
+
-  image_url: string;
+export type StructuredErrors = {
-  date: string;
+  [key: string]: string[] | string;
-  amount: number;
-  status: 'pending' | 'paid';
 };
 
-export type CustomersTableType = {
+export type GlobalSummary = {
-  id: string;
+  expenses: ExpenseSummary; 
-  name: string;
+  guests: AttendanceSummary
-  email: string;
+}
-  image_url: string;
-  total_guests: number;
-  total_pending: number;
-  total_paid: number;
-};
 
-export type FormattedCustomersTable = {
+export type ExpenseSummary = {
-  id: string;
+  projected: ExpensePossibleSummary;
-  name: string;
+  confirmed: ExpensePossibleSummary;
-  email: string;
+  status: StatusSummary;
-  image_url: string;
+}
-  total_guests: number;
-  total_pending: string;
-  total_paid: string;
-};
 
-export type CustomerField = {
+export type ExpensePossibleSummary = {
-  id: string;
+  total: number;
-  name: string;
+  guests: number;
-};
+}
-
+export type StatusSummary = {
-export type InvoiceForm = {
+  paid: number;
-  id: string;
+}
-  customer_id: string;
-  amount: number;
-  status: 'pending' | 'paid';
-};

app/lib/expense.tsx

@@ -0,0 +1,41 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+import { Serializable } from "../api/abstract-api";
+import { Entity } from "./definitions";
+
+export const pricingTypes = ['fixed', 'per_person'] as const;
+export type PricingType = typeof pricingTypes[number];
+
+export class Expense implements Entity {
+  id?: string;
+  name?: string;
+  amount?: number;
+  pricingType?: PricingType;
+
+  constructor(id?: string, name?: string, amount?: number, pricingType?: PricingType) {
+    this.id = id;
+    this.name = name || '';
+    this.amount = amount || 0;
+    this.pricingType = pricingType || 'fixed';
+  }
+}
+
+export class ExpenseSerializer implements Serializable<Expense>{
+  fromJson(data: any): Expense {
+    return new Expense(data.id, data.name, data.amount, data.pricing_type);
+  }
+
+  toJson(expense: Expense): string {
+    return JSON.stringify({
+      expense: {
+        name: expense.name,
+        amount: expense.amount,
+        pricing_type: expense.pricingType
+      }
+    });
+  }
+
+  apiPath(): string {
+    return 'expenses';
+  }
+}

app/lib/group.tsx

@@ -0,0 +1,64 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+import { Entity } from "./definitions";
+
+export type AttendanceSummary = {
+  considered: number;
+  invited: number;
+  confirmed: number;
+  declined: number;
+  tentative: number;
+  total: number;
+}
+
+export class Group implements Entity {
+  id?: string;
+  name?: string;
+  guest_count?: number;
+  icon?: string;
+  children?: Group[];
+  parentId?: string;
+  color?: string;
+  attendance?: AttendanceSummary
+
+  constructor(id?: string, name?: string, guest_count?: number, icon?: string, children?: Group[], parentId?: string, color?: string, attendance?: AttendanceSummary) {
+    this.id = id;
+    this.name = name;
+    this.guest_count = guest_count;
+    this.icon = icon;
+    this.children = children;
+    this.parentId = parentId;
+    this.color = color;
+    this.attendance = attendance;
+  }
+}
+
+export class GroupSerializer {
+  fromJson(data: any): Group {
+    return new Group(
+      data.id,
+      data.name,
+      data.guest_count,
+      data.icon,
+      data.children,
+      data.parent_id,
+      data.color,
+      data.attendance
+    );
+  }
+
+  toJson(group: Group): string {
+    return JSON.stringify({
+      group: {
+        name: group.name,
+        color: group.color,
+        icon: group.icon,
+        parent_id: group.parentId
+      }
+    });
+  }
+
+  apiPath(): string {
+    return 'groups';
+  }
+}

app/lib/guest.tsx

@@ -0,0 +1,42 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+import { Serializable } from "../api/abstract-api";
+import { Entity } from "./definitions";
+
+export const guestStatuses = ['considered', 'invited', 'confirmed', 'declined', 'tentative'] as const;
+export type GuestStatus = typeof guestStatuses[number];
+
+export class Guest implements Entity {
+  id?: string;
+  name?: string;
+  group_name?: string;
+  groupId?: string;
+  color?: string;
+  status?: GuestStatus;
+  children?: Guest[];
+
+  constructor(id?: string, name?: string, group_name?: string, groupId?: string, color?: string, status?: GuestStatus, children?: Guest[]) {
+    this.id = id;
+    this.name = name;
+    this.group_name = group_name;
+    this.groupId = groupId;
+    this.color = color;
+    this.status = status;
+    this.children = children;
+  }
+}
+
+export class GuestSerializer implements Serializable<Guest> {
+  fromJson(data: any): Guest {
+    return new Guest(data.id, data.name, data.group?.name, data.group?.id, data.color, data.status, data.children);
+  }
+
+  toJson(guest: Guest): string {
+    return JSON.stringify({ guest: { name: guest.name, status: guest.status, group_id: guest.groupId } });
+  }
+
+  apiPath(): string {
+    return 'guests';
+  }
+}
+

app/lib/placeholder-data.ts

@@ -1,147 +0,0 @@
-// This file contains placeholder data that you'll be replacing with real data in the Data Fetching chapter:
-// https://nextjs.org/learn/dashboard-app/fetching-data
-const users = [
-  {
-    id: '410544b2-4001-4271-9855-fec4b6a6442a',
-    name: 'User',
-    email: 'user@nextmail.com',
-    password: '123456',
-  },
-];
-
-const customers = [
-  {
-    id: 'd6e15727-9fe1-4961-8c5b-ea44a9bd81aa',
-    name: 'Evil Rabbit',
-    email: 'evil@rabbit.com',
-    image_url: '/customers/evil-rabbit.png',
-  },
-  {
-    id: '3958dc9e-712f-4377-85e9-fec4b6a6442a',
-    name: 'Delba de Oliveira',
-    email: 'delba@oliveira.com',
-    image_url: '/customers/delba-de-oliveira.png',
-  },
-  {
-    id: '3958dc9e-742f-4377-85e9-fec4b6a6442a',
-    name: 'Lee Robinson',
-    email: 'lee@robinson.com',
-    image_url: '/customers/lee-robinson.png',
-  },
-  {
-    id: '76d65c26-f784-44a2-ac19-586678f7c2f2',
-    name: 'Michael Novotny',
-    email: 'michael@novotny.com',
-    image_url: '/customers/michael-novotny.png',
-  },
-  {
-    id: 'CC27C14A-0ACF-4F4A-A6C9-D45682C144B9',
-    name: 'Amy Burns',
-    email: 'amy@burns.com',
-    image_url: '/customers/amy-burns.png',
-  },
-  {
-    id: '13D07535-C59E-4157-A011-F8D2EF4E0CBB',
-    name: 'Balazs Orban',
-    email: 'balazs@orban.com',
-    image_url: '/customers/balazs-orban.png',
-  },
-];
-
-const guests = [
-  {
-    customer_id: customers[0].id,
-    amount: 15795,
-    status: 'pending',
-    date: '2022-12-06',
-  },
-  {
-    customer_id: customers[1].id,
-    amount: 20348,
-    status: 'pending',
-    date: '2022-11-14',
-  },
-  {
-    customer_id: customers[4].id,
-    amount: 3040,
-    status: 'paid',
-    date: '2022-10-29',
-  },
-  {
-    customer_id: customers[3].id,
-    amount: 44800,
-    status: 'paid',
-    date: '2023-09-10',
-  },
-  {
-    customer_id: customers[5].id,
-    amount: 34577,
-    status: 'pending',
-    date: '2023-08-05',
-  },
-  {
-    customer_id: customers[2].id,
-    amount: 54246,
-    status: 'pending',
-    date: '2023-07-16',
-  },
-  {
-    customer_id: customers[0].id,
-    amount: 666,
-    status: 'pending',
-    date: '2023-06-27',
-  },
-  {
-    customer_id: customers[3].id,
-    amount: 32545,
-    status: 'paid',
-    date: '2023-06-09',
-  },
-  {
-    customer_id: customers[4].id,
-    amount: 1250,
-    status: 'paid',
-    date: '2023-06-17',
-  },
-  {
-    customer_id: customers[5].id,
-    amount: 8546,
-    status: 'paid',
-    date: '2023-06-07',
-  },
-  {
-    customer_id: customers[1].id,
-    amount: 500,
-    status: 'paid',
-    date: '2023-08-19',
-  },
-  {
-    customer_id: customers[5].id,
-    amount: 8945,
-    status: 'paid',
-    date: '2023-06-03',
-  },
-  {
-    customer_id: customers[2].id,
-    amount: 1000,
-    status: 'paid',
-    date: '2022-06-05',
-  },
-];
-
-const revenue = [
-  { month: 'Jan', revenue: 2000 },
-  { month: 'Feb', revenue: 1800 },
-  { month: 'Mar', revenue: 2200 },
-  { month: 'Apr', revenue: 2500 },
-  { month: 'May', revenue: 2300 },
-  { month: 'Jun', revenue: 3200 },
-  { month: 'Jul', revenue: 3500 },
-  { month: 'Aug', revenue: 3700 },
-  { month: 'Sep', revenue: 2500 },
-  { month: 'Oct', revenue: 2800 },
-  { month: 'Nov', revenue: 3000 },
-  { month: 'Dec', revenue: 4800 },
-];
-
-export { users, customers, guests, revenue };

app/lib/tableSimulation.tsx

@@ -0,0 +1,71 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+import { Serializable } from "../api/abstract-api";
+import { Entity } from "./definitions";
+import { Guest } from "./guest";
+
+export type Discomfort = {
+  discomfort: number;
+  breakdown: {
+    tableSizePenalty: number;
+    cohesionPenalty: number;
+  }
+}
+
+export type Table = {
+  number: number;
+  guests: Guest[];
+  discomfort: Discomfort;
+}
+
+export class TableSimulation implements Entity {
+  id: string;
+  tables: Table[];
+
+  constructor(id: string, tables: Table[]) {
+    this.id = id;
+    this.tables = tables;
+  }
+}
+
+export class TableSimulationSerializer implements Serializable<TableSimulation> {
+  fromJson(data: any): TableSimulation {
+    return new TableSimulation(data.id, data.tables.map((table: any) => {
+      return {
+        number: table.number,
+        guests: table.guests.map((guest: any) => new Guest(guest.id, guest.name, guest.group?.name, guest.group?.id, guest.color)),
+        discomfort: {
+          discomfort: table.discomfort.discomfort,
+          breakdown: {
+            tableSizePenalty: table.discomfort.breakdown.table_size_penalty,
+            cohesionPenalty: table.discomfort.breakdown.cohesion_penalty,
+          }
+        },
+      }
+    }));
+  }
+
+  toJson(simulation: TableSimulation): string {
+    return JSON.stringify({ simulation: { tables: simulation.tables.map((table) => {
+      return {
+        number: table.number,
+        guests: table.guests.map((guest) => {
+          return {
+            id: guest.id,
+            name: guest.name,
+            group_id: guest.groupId,
+            color: guest.color,
+            status: guest.status,
+            children: guest.children,
+          }
+        }),
+        discomfort: table.discomfort,
+      }
+    }) } });
+  }
+
+  apiPath(): string {
+    return 'tables_arrangements';
+  }
+}
+

app/lib/utils.ts

@@ -1,69 +1,20 @@
-import { Revenue } from './definitions';
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
 
-export const formatCurrency = (amount: number) => {
+export const getCsrfToken = () => {
-  return (amount / 100).toLocaleString('en-US', {
+  return document.cookie
-    style: 'currency',
+      .split("; ")
-    currency: 'USD',
+      .find((row) => row.startsWith("csrf-token"))
-  });
+      ?.split("=")[1] || 'unknown';
-};
+}
 
-export const formatDateToLocal = (
+export const getSlug = () => localStorage.getItem('slug') || 'default';
-  dateStr: string,
-  locale: string = 'en-US',
-) => {
-  const date = new Date(dateStr);
-  const options: Intl.DateTimeFormatOptions = {
-    day: 'numeric',
-    month: 'short',
-    year: 'numeric',
-  };
-  const formatter = new Intl.DateTimeFormat(locale, options);
-  return formatter.format(date);
-};
 
-export const generateYAxis = (revenue: Revenue[]) => {
+// From https://stackoverflow.com/a/1026087/3607039
-  // Calculate what labels we need to display on the y-axis
+export const capitalize = (val:string) => {
-  // based on highest record and in 1000s
+  return String(val).charAt(0).toUpperCase() + String(val).slice(1);
-  const yAxisLabels = [];
+}
-  const highestRecord = Math.max(...revenue.map((month) => month.revenue));
-  const topLabel = Math.ceil(highestRecord / 1000) * 1000;
 
-  for (let i = topLabel; i >= 0; i -= 1000) {
+// From https://stackoverflow.com/a/62118163/3607039
-    yAxisLabels.push(`$${i / 1000}K`);
+export function asArray<T>(value: T | T[]): T[] {
-  }
+  return ([] as T[]).concat(value)
-
+}
-  return { yAxisLabels, topLabel };
-};
-
-export const generatePagination = (currentPage: number, totalPages: number) => {
-  // If the total number of pages is 7 or less,
-  // display all pages without any ellipsis.
-  if (totalPages <= 7) {
-    return Array.from({ length: totalPages }, (_, i) => i + 1);
-  }
-
-  // If the current page is among the first 3 pages,
-  // show the first 3, an ellipsis, and the last 2 pages.
-  if (currentPage <= 3) {
-    return [1, 2, 3, '...', totalPages - 1, totalPages];
-  }
-
-  // If the current page is among the last 3 pages,
-  // show the first 2, an ellipsis, and the last 3 pages.
-  if (currentPage >= totalPages - 2) {
-    return [1, 2, '...', totalPages - 2, totalPages - 1, totalPages];
-  }
-
-  // If the current page is somewhere in the middle,
-  // show the first page, an ellipsis, the current page and its neighbors,
-  // another ellipsis, and the last page.
-  return [
-    1,
-    '...',
-    currentPage - 1,
-    currentPage,
-    currentPage + 1,
-    '...',
-    totalPages,
-  ];
-};

app/page.tsx

@@ -1,10 +0,0 @@
-import Link from 'next/link';
-import styles from '@/app/ui/home.module.css';
-
-export default function Page() {
-  return (
-    <main className="flex min-h-screen flex-col p-6">
-     
-    </main>
-  );
-}

app/seed/route.ts

@@ -1,122 +0,0 @@
-// import bcrypt from 'bcrypt';
-// import { db } from '@vercel/postgres';
-// import { guests, customers, revenue, users } from '../lib/placeholder-data';
-
-// const client = await db.connect();
-
-// async function seedUsers() {
-//   await client.sql`CREATE EXTENSION IF NOT EXISTS "uuid-ossp"`;
-//   await client.sql`
-//     CREATE TABLE IF NOT EXISTS users (
-//       id UUID DEFAULT uuid_generate_v4() PRIMARY KEY,
-//       name VARCHAR(255) NOT NULL,
-//       email TEXT NOT NULL UNIQUE,
-//       password TEXT NOT NULL
-//     );
-//   `;
-
-//   const insertedUsers = await Promise.all(
-//     users.map(async (user) => {
-//       const hashedPassword = await bcrypt.hash(user.password, 10);
-//       return client.sql`
-//         INSERT INTO users (id, name, email, password)
-//         VALUES (${user.id}, ${user.name}, ${user.email}, ${hashedPassword})
-//         ON CONFLICT (id) DO NOTHING;
-//       `;
-//     }),
-//   );
-
-//   return insertedUsers;
-// }
-
-// async function seedguests() {
-//   await client.sql`CREATE EXTENSION IF NOT EXISTS "uuid-ossp"`;
-
-//   await client.sql`
-//     CREATE TABLE IF NOT EXISTS guests (
-//       id UUID DEFAULT uuid_generate_v4() PRIMARY KEY,
-//       customer_id UUID NOT NULL,
-//       amount INT NOT NULL,
-//       status VARCHAR(255) NOT NULL,
-//       date DATE NOT NULL
-//     );
-//   `;
-
-//   const insertedguests = await Promise.all(
-//     guests.map(
-//       (invoice) => client.sql`
-//         INSERT INTO guests (customer_id, amount, status, date)
-//         VALUES (${invoice.customer_id}, ${invoice.amount}, ${invoice.status}, ${invoice.date})
-//         ON CONFLICT (id) DO NOTHING;
-//       `,
-//     ),
-//   );
-
-//   return insertedguests;
-// }
-
-// async function seedCustomers() {
-//   await client.sql`CREATE EXTENSION IF NOT EXISTS "uuid-ossp"`;
-
-//   await client.sql`
-//     CREATE TABLE IF NOT EXISTS customers (
-//       id UUID DEFAULT uuid_generate_v4() PRIMARY KEY,
-//       name VARCHAR(255) NOT NULL,
-//       email VARCHAR(255) NOT NULL,
-//       image_url VARCHAR(255) NOT NULL
-//     );
-//   `;
-
-//   const insertedCustomers = await Promise.all(
-//     customers.map(
-//       (customer) => client.sql`
-//         INSERT INTO customers (id, name, email, image_url)
-//         VALUES (${customer.id}, ${customer.name}, ${customer.email}, ${customer.image_url})
-//         ON CONFLICT (id) DO NOTHING;
-//       `,
-//     ),
-//   );
-
-//   return insertedCustomers;
-// }
-
-// async function seedRevenue() {
-//   await client.sql`
-//     CREATE TABLE IF NOT EXISTS revenue (
-//       month VARCHAR(4) NOT NULL UNIQUE,
-//       revenue INT NOT NULL
-//     );
-//   `;
-
-//   const insertedRevenue = await Promise.all(
-//     revenue.map(
-//       (rev) => client.sql`
-//         INSERT INTO revenue (month, revenue)
-//         VALUES (${rev.month}, ${rev.revenue})
-//         ON CONFLICT (month) DO NOTHING;
-//       `,
-//     ),
-//   );
-
-//   return insertedRevenue;
-// }
-
-export async function GET() {
-  return Response.json({
-    message:
-      'Uncomment this file and remove this line. You can delete this file when you are finished.',
-  });
-  // try {
-  //   await client.sql`BEGIN`;
-  //   await seedUsers();
-  //   await seedCustomers();
-  //   await seedguests();
-  //   await seedRevenue();
-  //   await client.sql`COMMIT`;
-
-  //   return Response.json({ message: 'Database seeded successfully' });
-  // } catch (error) {
-  //   await client.sql`ROLLBACK`;
-  //   return Response.json({ error }, { status: 500 });
-  // }
-}

app/types.tsx

@@ -0,0 +1,13 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+import * as HeroIcon from '@heroicons/react/24/outline'
+import { ComponentProps } from 'react'
+
+type Props = {
+  name: keyof typeof HeroIcon
+} & ComponentProps<typeof HeroIcon.AcademicCapIcon>
+
+export const Icon = ({ name, ...props }: Props) => {
+  const IconComponent = HeroIcon[name]
+  return <IconComponent {...props} />
+}

app/ui/arrangements/arrangement.tsx

@@ -0,0 +1,38 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+'use client';
+
+import { AbstractApi } from '@/app/api/abstract-api';
+import { TableArrangement } from '@/app/lib/definitions';
+import { TableSimulation, TableSimulationSerializer } from '@/app/lib/tableSimulation';
+import { getSlug } from '@/app/lib/utils';
+import { Table } from '@/app/ui/components/table';
+import { lusitana } from '@/app/ui/fonts';
+import { useState, useEffect } from 'react';
+
+export default function Arrangement({ id }: { id: string }) {
+
+  const [simulation, setSimulation] = useState<TableSimulation | undefined>(undefined);
+
+  function loadSimulation() {
+    new AbstractApi<TableSimulation>().get(new TableSimulationSerializer(), id, (object: TableSimulation) => {
+      setSimulation(object);
+    });
+  }
+
+  useEffect(loadSimulation, []);
+
+  return (
+    <div className="w-full">
+      <div className="w-full items-center justify-between">
+        <h1 className={`${lusitana.className} text-2xl my-5`}>Table distributions</h1>
+        <div className="flex flex-row flex-wrap justify-around">
+          {simulation && simulation.tables.map((table) => (
+            <Table key={table.number} table={table} style="rounded" />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+
+}

app/ui/arrangements/arrangements-table.tsx

@@ -0,0 +1,48 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+'use client'
+
+import React, { useState } from "react"
+import { TableArrangement } from '@/app/lib/definitions';
+import { classNames } from "../components/button";
+import TableOfContents from "../components/table-of-contents";
+import { loadTableSimulations } from "@/app/api/tableSimulations";
+
+export default function ArrangementsTable ({onArrangementSelected}: {onArrangementSelected: (arrangementId: string) => void}) {
+    const [arrangements, setArrangements] = useState<Array<TableArrangement>>([]);
+    const [arrangementsLoaded, setArrangementsLoaded] = useState(false);
+
+    function refreshSimulations() {
+      loadTableSimulations((arrangements) => {
+        setArrangements(arrangements);
+        setArrangementsLoaded(true);
+      });
+    }
+
+    function arrangementClicked(e: React.MouseEvent<HTMLElement>) {
+        onArrangementSelected(e.currentTarget.getAttribute('data-arrangement-id') || '');
+    }
+  
+    !arrangementsLoaded && refreshSimulations();
+
+    return(
+      <TableOfContents
+        headers={['Name', 'Discomfort', 'Actions']}
+        caption='Simulations'
+        elements={arrangements}
+        rowRender={(arrangement) => (
+          <tr key={arrangement.id} className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
+            <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+              {arrangement.name}
+            </th>
+            <td className="px-6 py-4">
+              {arrangement.discomfort}
+            </td>
+            <td>
+                <button data-arrangement-id={arrangement.id} onClick={arrangementClicked} className={classNames('primary')}>Load</button>
+            </td>
+          </tr>
+        )}
+      />
+    );
+}

app/ui/button.tsx

@@ -1,3 +1,5 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
 import clsx from 'clsx';
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {

app/ui/components/affinities-form-dialog.tsx

@@ -0,0 +1,82 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+'use client';
+
+import { Affinities } from '@/app/lib/affinities';
+import { Group } from '@/app/lib/group';
+import { getCsrfToken, getSlug } from '@/app/lib/utils';
+import { classNames } from '@/app/ui/components/button';
+import { Dialog } from 'primereact/dialog';
+import { useEffect, useState } from 'react';
+import AffinitySlider from './form/affinitySlider';
+
+export default function AffinitiesFormDialog({ groups, group, visible, onHide }: {
+  groups: Group[],
+  group?: Group,
+  visible: boolean,
+  onHide: () => void,
+}) {
+  const [affinities, setAffinities] = useState<Affinities>({});
+  const [isLoadingAffinities, setIsLoadingAffinities] = useState(true);
+
+  useEffect(() => {
+    setIsLoadingAffinities(true);
+    if (group?.id === undefined) {
+      setAffinities({});
+      setIsLoadingAffinities(false)
+    } else {
+      fetch(`/api/${getSlug()}/groups/${group?.id}/affinities`)
+        .then((response) => response.json())
+        .then((data) => {
+          setAffinities(data);
+          setIsLoadingAffinities(false)
+        });
+    }
+  }, [group]);
+
+  function submitAffinities() {
+    const formattedAffinities = Object.entries(affinities).map(([groupId, affinity]) => ({ group_id: groupId, affinity: affinity }));
+    fetch(`/api/${getSlug()}/groups/${group?.id}/affinities/bulk_update`, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-CSRF-TOKEN': getCsrfToken(),
+      },
+      body: JSON.stringify({ affinities: formattedAffinities })
+    }).then(() => {
+      onHide();
+    });
+  }
+
+  function resetAffinities() {
+    fetch(`/api/${getSlug()}/groups/${group?.id}/affinities/default`, {
+      method: 'GET',
+      headers: {
+        'Accept': 'application/json',
+      }
+    }).then((response) => response.json())
+      .then(setAffinities);
+  }
+
+  return (
+    <Dialog header="Update affinities" visible={visible} style={{ width: '60vw' }} onHide={onHide}>
+      {!isLoadingAffinities && <div className="card justify-evenly py-5 bg-gray-200 flex flex-col">
+        <span className="text-center p-4">Describe the affinity with the rest of the groups</span>
+
+        {
+          groups.filter((currentGroup) => currentGroup.id !== group?.id).map((group) =>
+            <div key={group.id} className="flex flex-row hover:bg-gray-300 px-3 py-2 items-center">
+              <span className="w-1/3 text-right px-4">{group.name}</span>
+              <AffinitySlider value={group.id && affinities[group.id] || 1} onChange={(value) => setAffinities({ ...affinities, [group.id || "default"]: value })} />
+            </div>)
+        }
+
+        <div className="flex justify-center">
+          <button className={classNames('gray')} onClick={resetAffinities} >Reset</button>
+          <button className={classNames('primary')} onClick={submitAffinities} >Update</button>
+        </div>
+      </div>
+      }
+    </Dialog>
+  );
+}

app/ui/components/button.tsx

@@ -0,0 +1,15 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+import clsx from "clsx";
+
+type ButtonColor = 'primary' | 'blue' | 'green' | 'red' | 'yellow' | 'gray';
+
+export function classNames(type: ButtonColor) {
+    return (clsx("text-white py-1 px-2 mx-1 rounded disabled:opacity-50 disabled:cursor-not-allowed", {
+        'bg-blue-400 hover:bg-blue-600': type === 'primary' || type === 'blue',
+        'bg-green-500 hover:bg-green-600': type === 'green',
+        'bg-red-500 hover:bg-red-600': type === 'red',
+        'bg-yellow-500 hover:bg-yellow-700': type === 'yellow',
+        'bg-gray-500 hover:bg-gray-700': type === 'gray'
+    }))
+}

app/ui/components/dashboard-cards.tsx

@@ -0,0 +1,53 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+import clsx from "clsx"
+import { Icon } from "../../types";
+import * as HeroIcon from '@heroicons/react/24/outline'
+
+type Style = "green" | "blue" | "red" | "orange" | "gray"
+
+const colorClasses = (style: Style) => {
+    switch (style) {
+        case "green":
+            return "bg-green-700 hover:bg-green-800"
+        case "blue":
+            return "bg-blue-500 hover:bg-blue-700"
+        case "red":
+            return "bg-red-600 hover:bg-red-700"
+        case "orange":
+            return "bg-orange-600 hover:bg-orange-700"
+        case "gray":
+            return "bg-gray-600 hover:bg-gray-700"
+    }
+}
+
+export function MainCard({ amount, title, subtitle, style, iconName }:
+    {
+        amount: string,
+        title: string,
+        subtitle?: string,
+        style: Style,
+        iconName: keyof typeof HeroIcon
+    }) {
+
+    return (
+        <div className={`w-80 m-1 py-2 px-6 text-white flex flex-row items-center ${colorClasses(style)}`}>
+            <Icon className="m-3 h-14 w-14" name={iconName} />
+            <div className="flex flex-col justify-evenly">
+                <div className="text-4xl font-medium">{amount}</div>
+                <div className="text-xl">{title}</div>
+                <div className="text-sm">{subtitle || 'ㅤ'}</div>
+            </div>
+        </div>
+    );
+}
+
+export function SecondaryCard({ amount, title, iconName, style }: { amount: string, title: string, iconName: keyof typeof HeroIcon, style: Style }) {
+    return (
+        <div className={`h-12 w-80 m-1 p-2 text-white flex flex-row items-center ${colorClasses(style)}`}>
+            <Icon className="m-3 h-7 w-7" name={iconName} />
+            <span className="text-2xl font-medium mx-1">{amount}</span>
+            <span className="text-l mx-1">{title}</span>
+        </div>
+    );
+}

app/ui/components/expense-form-dialog.tsx

@@ -0,0 +1,83 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+'use client';
+
+import { AbstractApi } from '@/app/api/abstract-api';
+import { Expense, ExpenseSerializer, PricingType, pricingTypes } from '@/app/lib/expense';
+import { capitalize } from '@/app/lib/utils';
+import { classNames } from '@/app/ui/components/button';
+import { Dialog } from 'primereact/dialog';
+import { Dropdown } from 'primereact/dropdown';
+import { FloatLabel } from 'primereact/floatlabel';
+import { InputText } from 'primereact/inputtext';
+import { useState } from 'react';
+
+export default function ExpenseFormDialog({ onCreate, onHide, expense, visible }: {
+  onCreate?: () => void,
+  onHide: () => void,
+  expense?: Expense,
+  visible: boolean,
+}) {
+
+  const [name, setName] = useState<string>(expense?.name || '');
+  const [amount, setAmount] = useState<number>(expense?.amount || 0);
+  const [pricingType, setPricingType] = useState<PricingType>(expense?.pricingType || 'fixed');
+
+  const api = new AbstractApi<Expense>();
+  const serializer = new ExpenseSerializer();
+
+  function resetForm() {
+    setName('');
+    setAmount(0);
+    setPricingType('fixed');
+  }
+
+  function submitGroup() {
+    if (expense?.id !== undefined) {
+      expense.name = name;
+      expense.amount = amount;
+      expense.pricingType = pricingType;
+
+      api.update(serializer, expense, () => {
+        resetForm();
+        onCreate && onCreate();
+      });
+    } else {
+
+      api.create(serializer, new Expense(undefined, name, amount, pricingType), () => {
+        resetForm();
+        onCreate && onCreate();
+      });
+    }
+  }
+
+  return (
+    <>
+
+      <Dialog header="Add/edit expense" visible={visible} style={{ width: '60vw' }} onHide={onHide}>
+        <div className="card flex justify-evenly py-5">
+          <FloatLabel>
+            <InputText id="name" className='rounded-sm' value={name} onChange={(e) => setName(e.target.value)} />
+            <label htmlFor="name">Name</label>
+          </FloatLabel>
+          <FloatLabel>
+            <InputText id="amount" className='rounded-sm' value={amount.toString()} onChange={(e) => setAmount(parseFloat(e.target.value))} />
+            <label htmlFor="amount">Amount</label>
+          </FloatLabel>
+          <FloatLabel>
+            <Dropdown id="pricingType" className='rounded-sm min-w-32' value={pricingType} onChange={(e) => setPricingType(e.target.value)} options={
+              pricingTypes.map((type) => {
+                return { label: capitalize(type), value: type };
+              })
+            } />
+            <label htmlFor="pricingType">Pricing type</label>
+          </FloatLabel>
+
+          <button className={classNames('primary')} onClick={submitGroup} disabled={!(name.length > 0)}>
+            {expense?.id !== undefined ? 'Update' : 'Create'}
+          </button>
+        </div>
+      </Dialog>
+    </>
+  );
+}

app/ui/components/form/affinitySlider.tsx

@@ -0,0 +1,40 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+import { Slider } from 'primereact/slider';
+
+export default function AffinitySlider({ value, onChange }: { value: number, onChange: (value: number) => void }) {
+
+  const toNumber = (value : number | [number, number])  => {
+    if(value instanceof Array) {
+      return value[0];
+    }
+    return value;
+  }
+
+  const label = (value: number) => {
+    if (value < 0.2) {
+      return 'Nemesis';
+    } else if (value < 0.5) {
+      return 'Enemies';
+    } else if (value < 0.9) {
+      return 'Bad vibes';
+    } else if (value < 1.1) {
+      return 'Neutral';
+    } else if (value < 1.5) {
+      return 'Good vibes';
+    } else if (value < 1.8) {
+      return 'Good friends';
+    } else {
+      return 'Besties';
+    }
+  }
+
+  return (
+    <>
+      <Slider value={value} min={0} max={2} step={.1} onChange={(e) => onChange(toNumber(e.value))} className='w-80 bg-gray-400' />
+      <span className="px-4 w-1/5">
+        {label(value)}
+      </span>
+    </>
+  )
+}

app/ui/components/form/inlineTextField.tsx

@@ -0,0 +1,34 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+import React, { useState } from 'react';
+
+export default function InlineTextField({ initialValue, onChange }: { initialValue: string, onChange: (value: string) => void }) {
+    const [editing, setEditing] = useState(false);
+    const [value, setValue] = useState(initialValue);
+
+    const renderText = () => <span onClick={() => setEditing(true)}>{value}</span>
+
+    const onConfirm = () => {
+        onChange(value);
+        setEditing(false);
+    }
+
+    function renderForm() {
+        return (
+            <div className="flex flex-row">
+                <input
+                    type="text"
+                    value={value}
+                    className="px-2 py-0 h-5 max-w-48"
+                    onChange={(e) => setValue(e.target.value)}
+                    onBlur={onConfirm}
+                    autoFocus
+                />
+            </div>
+        )
+    }
+
+    return (
+        editing ? (renderForm()) : (renderText())
+    );
+}

app/ui/components/group-form-dialog.tsx

@@ -0,0 +1,95 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+'use client';
+
+import { AbstractApi } from '@/app/api/abstract-api';
+import { Group, GroupSerializer } from '@/app/lib/group';
+import { classNames } from '@/app/ui/components/button';
+import { ColorPicker } from 'primereact/colorpicker';
+import { Dialog } from 'primereact/dialog';
+import { Dropdown } from 'primereact/dropdown';
+import { FloatLabel } from 'primereact/floatlabel';
+import { InputText } from 'primereact/inputtext';
+import { useState } from 'react';
+
+export default function GroupFormDialog({ groups, onCreate, onHide, group, visible }: {
+  groups: Group[],
+  onCreate?: () => void,
+  onHide: () => void,
+  group?: Group,
+  visible: boolean,
+}) {
+
+  const [name, setName] = useState(group?.name || '');
+  const [icon, setIcon] = useState(group?.icon || '');
+  const [color, setColor] = useState<string>(group?.color || '');
+  const [parentId, setParentId] = useState(group?.parentId || '');
+
+  const api = new AbstractApi<Group>();
+  const serializer = new GroupSerializer();
+
+  function resetForm() {
+    setName('');
+    setIcon('');
+    setColor('');
+    setParentId('');
+  }
+
+  function submitGroup() {
+    if (!(name)) {
+      return
+    }
+
+    if (group?.id !== undefined) {
+      group.name = name;
+      group.icon = icon;
+      group.color = color;
+      group.parentId = parentId;
+
+      api.update(serializer, group, () => {
+        resetForm();
+        onCreate && onCreate();
+      });
+    } else {
+
+      api.create(serializer, new Group(undefined, name, undefined, icon, undefined, parentId, color), () => {
+        resetForm();
+        onCreate && onCreate();
+      });
+    }
+  }
+
+  return (
+    <>
+
+      <Dialog header="Add group" visible={visible} style={{ width: '60vw' }} onHide={onHide}>
+        <div className="card flex justify-evenly py-5">
+          <FloatLabel>
+            <InputText id="name" className='rounded-sm' value={name} onChange={(e) => setName(e.target.value)} />
+            <label htmlFor="name">Name</label>
+          </FloatLabel>
+          <FloatLabel>
+            <InputText id="icon" className='rounded-sm' value={icon} onChange={(e) => setIcon(e.target.value)} />
+            <label htmlFor="icon">Icon</label>
+          </FloatLabel>
+          <FloatLabel>
+            <ColorPicker value={color} format='hex' onChange={(e) => setColor(`#${e.value}`)} />
+            <label htmlFor="color" />
+          </FloatLabel>
+          <FloatLabel>
+            <Dropdown id="parentId" className='rounded-sm min-w-32' value={parentId} onChange={(e) => setParentId(e.target.value)} options={
+              groups.map((group) => {
+                return { label: group.name, value: group.id };
+              })
+            } />
+            <label htmlFor="parentId">Parent</label>
+          </FloatLabel>
+
+          <button className={classNames('primary')} onClick={submitGroup} disabled={!(name.length > 0)}>
+            {group?.id !== undefined ? 'Update' : 'Create'}
+          </button>
+        </div>
+      </Dialog>
+    </>
+  );
+}

app/ui/components/guest-form-dialog.tsx

@@ -0,0 +1,91 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+'use client';
+
+import { AbstractApi } from '@/app/api/abstract-api';
+import { Group } from '@/app/lib/group';
+import { Guest, GuestSerializer, GuestStatus, guestStatuses } from '@/app/lib/guest';
+import { capitalize } from '@/app/lib/utils';
+import { classNames } from '@/app/ui/components/button';
+import { Dialog } from 'primereact/dialog';
+import { Dropdown } from 'primereact/dropdown';
+import { FloatLabel } from 'primereact/floatlabel';
+import { InputText } from 'primereact/inputtext';
+import { useState } from 'react';
+
+export default function GuestFormDialog({ groups, onCreate, onHide, guest, visible }: {
+  groups: Group[],
+  onCreate?: () => void,
+  onHide: () => void,
+  guest?: Guest,
+  visible: boolean,
+}) {
+
+  const [name, setName] = useState(guest?.name || '');
+  const [group, setGroup] = useState(guest?.groupId || null);
+  const [status, setStatus] = useState<GuestStatus | null>(guest?.status || null);
+
+  const api = new AbstractApi<Guest>();
+  const serializer = new GuestSerializer();
+
+  function resetForm() {
+    setName('');
+    setGroup(null);
+    setStatus(null);
+  }
+
+  function submitGuest() {
+    if (!(name && group && status)) {
+      return
+    }
+
+    if (guest?.id !== undefined) {
+      guest.name = name;
+      guest.groupId = group;  
+      guest.status = status;
+     
+      api.update(serializer, guest, () => {
+        resetForm();
+        onCreate && onCreate();
+      });
+    } else {
+      api.create(serializer, new Guest(undefined, name, undefined, group, undefined, status), ()=> {
+        resetForm();
+        onCreate && onCreate();
+      });
+    }
+  }
+
+  return (
+    <>
+
+      <Dialog header="Add guest" visible={visible} style={{ width: '60vw' }} onHide={onHide}>
+        <div className="card flex justify-evenly py-5">
+          <FloatLabel>
+            <InputText id="username" className='rounded-sm' value={name} onChange={(e) => setName(e.target.value)} />
+            <label htmlFor="username">Username</label>
+          </FloatLabel>
+          <FloatLabel>
+            <Dropdown id="group" className='rounded-sm min-w-32' value={group} onChange={(e) => setGroup(e.target.value)} options={
+              groups.map((group) => {
+                return { label: group.name, value: group.id };
+              })
+            } />
+            <label htmlFor="group">Group</label>
+          </FloatLabel>
+          <FloatLabel>
+            <Dropdown id="status" className='rounded-sm min-w-32' value={status} onChange={(e) => setStatus(e.target.value)} options={
+              guestStatuses.map((status) => {
+                return { label: capitalize(status), value: status };
+              })
+            } />
+            <label htmlFor="status">Status</label>
+          </FloatLabel>
+          <button className={classNames('primary')} onClick={submitGuest} disabled={!(name.length > 0 && group && status)}>
+            {guest?.id !== undefined ? 'Update' : 'Create'}
+          </button>
+        </div>
+      </Dialog>
+    </>
+  );
+}

app/ui/components/login-form.tsx

@@ -0,0 +1,51 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+'use client';
+
+import { FloatLabel } from 'primereact/floatlabel';
+import { InputText } from 'primereact/inputtext';
+import { login } from '../../api/authentication';
+import { useState, useEffect } from 'react';
+import { classNames } from './button';
+import { useRouter } from 'next/navigation'
+import { User } from '../../lib/definitions';
+import { getSlug } from '@/app/lib/utils';
+
+export default function LoginForm() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const router = useRouter();
+
+  const [currentUser, setCurrentUser] = useState<User | null>(null);
+
+  useEffect(() => {
+    localStorage.setItem('currentUser', JSON.stringify(currentUser));
+  }, [currentUser]);
+
+  return (
+    <div className="card flex justify-evenly py-5">
+      <FloatLabel>
+        <InputText id="email" type="email" className='rounded-sm' onChange={(e) => setEmail(e.target.value)} />
+        <label htmlFor="email">Email</label>
+      </FloatLabel>
+      <FloatLabel>
+        <InputText id="password" type="password" className='rounded-sm' onChange={(e) => setPassword(e.target.value)} />
+        <label htmlFor="password">Password</label>
+      </FloatLabel>
+      <button
+        className={classNames('primary')}
+        disabled={email.length == 0 || password.length == 0}
+        onClick={() => login({
+          email: email,
+          password: password,
+          onLogin: (user) => {
+            setCurrentUser(user);
+            router.push(`${getSlug()}/dashboard`)
+          }
+        })}>
+        Sign in
+      </button>
+    </div>
+  )
+}

app/ui/components/registration-form.tsx

@@ -0,0 +1,98 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+'use client';
+
+import { FloatLabel } from 'primereact/floatlabel';
+import { InputText } from 'primereact/inputtext';
+import { useState, useEffect } from 'react';
+import { classNames } from './button';
+import { getSlug } from '@/app/lib/utils';
+import { register } from '@/app/api/authentication';
+import { getCaptchaChallenge } from '@/app/api/captcha';
+
+export default function RegistrationForm() {
+  const [submitted, setSubmitted] = useState<boolean>(false);
+  const [errors, setErrors] = useState<string[]>([]);
+
+  const [email, setEmail] = useState<string>("");
+  const [password, setPassword] = useState<string>("");
+  const [passwordConfirmation, setPasswordConfirmation] = useState<string>("");
+  const [slug, setSlug] = useState<string>(getSlug());
+
+  const [captchaId, setCaptchaId] = useState<string>("");
+  const [captchaUrl, setCaptchaUrl] = useState<string>("");
+  const [captchaAnswer, setCaptchaAnswer] = useState<string>("");
+
+  const refreshCaptcha = () => {
+    getCaptchaChallenge({
+      onRetrieve: (id, url) => {
+        console.log(id, url);
+        setCaptchaId(id);
+        setCaptchaUrl(url);
+        setCaptchaAnswer("");
+      }
+    });
+  }
+
+  useEffect(refreshCaptcha, [])
+
+  return (
+    submitted ? (
+      <div className="card flex justify-evenly py-5 flex-col">
+        <div className="text-green-500">Registration successful. Check your email for a confirmation link.</div>
+      </div>
+    ) : (
+
+      <div className="card flex justify-evenly py-5 flex-col">
+        <FloatLabel className="my-4">
+          <InputText id="email" type="email" className='rounded-sm' onChange={(e) => setEmail(e.target.value)} />
+          <label htmlFor="email">Email</label>
+        </FloatLabel>
+        <FloatLabel className="my-4">
+          <InputText id="password" type="password" className='rounded-sm' onChange={(e) => setPassword(e.target.value)} />
+          <label htmlFor="password">Password</label>
+        </FloatLabel>
+        <FloatLabel className="my-4">
+          <InputText id="passwordConfirmation" type="password" className='rounded-sm' onChange={(e) => setPasswordConfirmation(e.target.value)} />
+          <label htmlFor="passwordConfirmation">Confirm Password</label>
+        </FloatLabel>
+        <FloatLabel className="my-4">
+          <InputText id="slug" type="text" className='rounded-sm' onChange={(e) => setSlug(e.target.value)} />
+          <label htmlFor="slug">Slug</label>
+        </FloatLabel>
+        <img className="w-96" src={captchaUrl} alt="captcha" />
+        <FloatLabel className="my-4">
+          <InputText id="captcha" type="text" className='rounded-sm' value={captchaAnswer} onChange={(e) => setCaptchaAnswer(e.target.value)} />
+          <label htmlFor="captcha">Captcha</label>
+        </FloatLabel>
+
+        {errors.map((error, index) => (
+          <div key={index} className="text-red-500">{error}</div>
+        ))}
+
+
+        <button
+          className={classNames('primary')}
+          disabled={!(email && password && passwordConfirmation && slug && captchaAnswer)}
+          onClick={() => register(
+            {
+              slug: slug,
+              email: email,
+              password: password,
+              passwordConfirmation: passwordConfirmation,
+              captcha: {
+                id: captchaId,
+                answer: captchaAnswer
+              },
+              onRegister: () => { setErrors([]); setSubmitted(true) },
+              onError: (errors) => { refreshCaptcha(); setErrors(errors) }
+            }
+          )}
+        >
+          Register
+        </button>
+      </div>
+    )
+
+  );
+}

app/ui/components/table-of-contents.tsx

@@ -0,0 +1,28 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+export default function TableOfContents<Type>({ headers, caption, elements, rowRender }: { headers: string[], caption: string, elements: Type[], rowRender: (element: Type) => JSX.Element }) {
+    return (
+        <div className="w-full relative overflow-x-auto shadow-md sm:rounded-lg">
+            <table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+                <caption className="p-5 text-lg font-semibold text-left rtl:text-right text-gray-900 bg-white dark:text-white dark:bg-gray-800">
+                    {caption}
+                    <p className="mt-1 text-sm font-normal text-gray-500 dark:text-gray-400">
+                        There are {elements.length} elements in the list
+                    </p>
+                </caption>
+                <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+                    <tr>
+                        {headers.map((header) => (
+                            <th scope="col" className="px-6 py-3">
+                                {header}
+                            </th>
+                        ))}
+                    </tr>
+                </thead>
+                <tbody>
+                    {elements.map((element) => rowRender(element))}
+                </tbody>
+            </table>
+        </div>
+    )
+}

app/ui/components/table.tsx

@@ -0,0 +1,107 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+import { Guest } from "@/app/lib/guest";
+import { Table as TableType } from "@/app/lib/tableSimulation";
+import { RectangleGroupIcon, UserGroupIcon } from "@heroicons/react/24/outline";
+import { v4 as uuidv4 } from 'uuid';
+import { Tooltip } from "primereact/tooltip";
+import clsx from "clsx";
+
+
+function Dish({ guest, rotation }: { guest: Guest, rotation?: number }) {
+  rotation = rotation || 0
+  return (
+    <div className={`m-3 w-24 h-24 rounded-full content-center text-center cursor-default`} style={{
+      rotate: `${360 - rotation}deg`,
+      backgroundColor: guest.color,
+    }}>
+      {guest.name}
+    </div>
+  )
+}
+
+function GuestRow({ guests }: { guests: Guest[] }) {
+  return (
+    <div className="justify-around flex flex-row">
+      {guests.map((guest) => <Dish key={guest.id} guest={guest} />)}
+    </div>
+  )
+}
+
+function RectangularTable({ table }: { table: TableType }) {
+  const guests = table.guests;
+  const halfwayThrough = Math.floor(guests.length / 2)
+  const arrayFirstHalf = guests.slice(0, halfwayThrough);
+  const arraySecondHalf = guests.slice(halfwayThrough, guests.length);
+
+  return (
+    <div className="m-12 h-64 bg-cyan-800 flex flex-col justify-between">
+      <GuestRow guests={arrayFirstHalf} />
+      <GuestRow guests={arraySecondHalf} />
+    </div>
+  )
+}
+
+function RoundedTable({ table }: { table: TableType }) {
+  const guests = table.guests;
+  const size = 500
+  const rotation = 360 / guests.length
+
+  const className = (penalty: number) => {
+    return clsx("px-2 tooltip-cohesion", {
+      "hidden": penalty === 0,
+      "text-orange-300": penalty <= 5,
+      "text-orange-500": penalty > 5 && penalty <= 10,
+      "text-orange-700": penalty > 10,
+    })
+  }
+
+
+  return (
+    <div className={`m-12 rounded-full bg-cyan-800 relative z-0 grid flex items-center justify-items-center`} style={{ width: `${size}px`, height: `${size}px` }}>
+
+      {
+        guests.map((guest, index) => {
+          return (
+            <div key={guest.id} className={`border-dashed grid justify-items-center absolute inset-0`} style={{
+              rotate: `${index * rotation}deg`,
+              height: `${size}px`,
+              width: `${size}px`,
+            }}>
+              <Dish guest={guest} rotation={index * rotation} />
+            </div>
+          )
+        })
+      }
+
+      <div className="bg-zinc-200 w-48 h-12 p-3 flex flex-row rounded z-10">
+        <div className="px-2 text-slate-800">{`Table #${table.number}`}</div>
+
+
+        <Tooltip target=".tooltip-cohesion" />
+        <Tooltip target=".tooltip-size" />
+
+        <RectangleGroupIcon
+          className={className(table.discomfort.breakdown.cohesionPenalty)}
+          data-pr-tooltip={`Cohesion penalty: ${Math.round(table.discomfort.breakdown.cohesionPenalty)}`}
+          data-pr-position="top"
+        />
+
+        <UserGroupIcon
+          className={className(table.discomfort.breakdown.tableSizePenalty)}
+          data-pr-tooltip={`Table size penalty: ${Math.round(table.discomfort.breakdown.tableSizePenalty)}`}
+          data-pr-position="top"
+        />
+      </div>
+    </div>
+  )
+}
+
+export function Table({ table, style }: { table: TableType, style: "rectangular" | "rounded" }) {
+  return (
+    <>
+      {style === "rectangular" && <RectangularTable table={table} />}
+      {style === "rounded" && <RoundedTable table={table} />}
+    </>
+  )
+}

app/ui/customers/table.tsx

@@ -1,123 +0,0 @@
-import Image from 'next/image';
-import { lusitana } from '@/app/ui/fonts';
-import Search from '@/app/ui/search';
-import {
-  CustomersTableType,
-  FormattedCustomersTable,
-} from '@/app/lib/definitions';
-
-export default async function CustomersTable({
-  customers,
-}: {
-  customers: FormattedCustomersTable[];
-}) {
-  return (
-    <div className="w-full">
-      <h1 className={`${lusitana.className} mb-8 text-xl md:text-2xl`}>
-        Customers
-      </h1>
-      <Search placeholder="Search customers..." />
-      <div className="mt-6 flow-root">
-        <div className="overflow-x-auto">
-          <div className="inline-block min-w-full align-middle">
-            <div className="overflow-hidden rounded-md bg-gray-50 p-2 md:pt-0">
-              <div className="md:hidden">
-                {customers?.map((customer) => (
-                  <div
-                    key={customer.id}
-                    className="mb-2 w-full rounded-md bg-white p-4"
-                  >
-                    <div className="flex items-center justify-between border-b pb-4">
-                      <div>
-                        <div className="mb-2 flex items-center">
-                          <div className="flex items-center gap-3">
-                            <Image
-                              src={customer.image_url}
-                              className="rounded-full"
-                              alt={`${customer.name}'s profile picture`}
-                              width={28}
-                              height={28}
-                            />
-                            <p>{customer.name}</p>
-                          </div>
-                        </div>
-                        <p className="text-sm text-gray-500">
-                          {customer.email}
-                        </p>
-                      </div>
-                    </div>
-                    <div className="flex w-full items-center justify-between border-b py-5">
-                      <div className="flex w-1/2 flex-col">
-                        <p className="text-xs">Pending</p>
-                        <p className="font-medium">{customer.total_pending}</p>
-                      </div>
-                      <div className="flex w-1/2 flex-col">
-                        <p className="text-xs">Paid</p>
-                        <p className="font-medium">{customer.total_paid}</p>
-                      </div>
-                    </div>
-                    <div className="pt-4 text-sm">
-                      <p>{customer.total_guests} guests</p>
-                    </div>
-                  </div>
-                ))}
-              </div>
-              <table className="hidden min-w-full rounded-md text-gray-900 md:table">
-                <thead className="rounded-md bg-gray-50 text-left text-sm font-normal">
-                  <tr>
-                    <th scope="col" className="px-4 py-5 font-medium sm:pl-6">
-                      Name
-                    </th>
-                    <th scope="col" className="px-3 py-5 font-medium">
-                      Email
-                    </th>
-                    <th scope="col" className="px-3 py-5 font-medium">
-                      Total guests
-                    </th>
-                    <th scope="col" className="px-3 py-5 font-medium">
-                      Total Pending
-                    </th>
-                    <th scope="col" className="px-4 py-5 font-medium">
-                      Total Paid
-                    </th>
-                  </tr>
-                </thead>
-
-                <tbody className="divide-y divide-gray-200 text-gray-900">
-                  {customers.map((customer) => (
-                    <tr key={customer.id} className="group">
-                      <td className="whitespace-nowrap bg-white py-5 pl-4 pr-3 text-sm text-black group-first-of-type:rounded-md group-last-of-type:rounded-md sm:pl-6">
-                        <div className="flex items-center gap-3">
-                          <Image
-                            src={customer.image_url}
-                            className="rounded-full"
-                            alt={`${customer.name}'s profile picture`}
-                            width={28}
-                            height={28}
-                          />
-                          <p>{customer.name}</p>
-                        </div>
-                      </td>
-                      <td className="whitespace-nowrap bg-white px-4 py-5 text-sm">
-                        {customer.email}
-                      </td>
-                      <td className="whitespace-nowrap bg-white px-4 py-5 text-sm">
-                        {customer.total_guests}
-                      </td>
-                      <td className="whitespace-nowrap bg-white px-4 py-5 text-sm">
-                        {customer.total_pending}
-                      </td>
-                      <td className="whitespace-nowrap bg-white px-4 py-5 text-sm group-first-of-type:rounded-md group-last-of-type:rounded-md">
-                        {customer.total_paid}
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

app/ui/dashboard/cards.tsx

@@ -1,58 +0,0 @@
-import {
-  BanknotesIcon,
-  ClockIcon,
-  UserGroupIcon,
-  InboxIcon,
-} from '@heroicons/react/24/outline';
-import { lusitana } from '@/app/ui/fonts';
-
-const iconMap = {
-  collected: BanknotesIcon,
-  customers: UserGroupIcon,
-  pending: ClockIcon,
-  guests: InboxIcon,
-};
-
-export default async function CardWrapper() {
-  return (
-    <>
-      {/* NOTE: Uncomment this code in Chapter 9 */}
-
-      {/* <Card title="Collected" value={totalPaidguests} type="collected" />
-      <Card title="Pending" value={totalPendingguests} type="pending" />
-      <Card title="Total guests" value={numberOfguests} type="guests" />
-      <Card
-        title="Total Customers"
-        value={numberOfCustomers}
-        type="customers"
-      /> */}
-    </>
-  );
-}
-
-export function Card({
-  title,
-  value,
-  type,
-}: {
-  title: string;
-  value: number | string;
-  type: 'guests' | 'customers' | 'pending' | 'collected';
-}) {
-  const Icon = iconMap[type];
-
-  return (
-    <div className="rounded-xl bg-gray-50 p-2 shadow-sm">
-      <div className="flex p-4">
-        {Icon ? <Icon className="h-5 w-5 text-gray-700" /> : null}
-        <h3 className="ml-2 text-sm font-medium">{title}</h3>
-      </div>
-      <p
-        className={`${lusitana.className}
-          truncate rounded-xl bg-white px-4 py-8 text-center text-2xl`}
-      >
-        {value}
-      </p>
-    </div>
-  );
-}

app/ui/dashboard/global-summary.tsx

@@ -0,0 +1,41 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+import { GlobalSummary as Summary} from '@/app/lib/definitions';
+import { MainCard, SecondaryCard } from '../components/dashboard-cards';
+
+export default function GlobalSummary({ summary }: { summary: Summary }) {
+  return (
+    <div className="my-4">
+      <div className="flex flex-row w-full my-2">
+        <div className="flex flex-col">
+          <MainCard amount={`${summary.expenses.projected.total}€`} title="Projected" subtitle={`${summary.expenses.projected.guests} guests`} style="blue" iconName="ArrowTrendingUpIcon" />
+          <MainCard amount={`${Math.round(summary.expenses.projected.total / summary.expenses.projected.guests)}€`} title="/ guest" iconName="UserIcon" style='blue' />
+        </div>
+        <div className="flex flex-col">
+          <MainCard amount={`${summary.expenses.confirmed.total}€`} title="Min." subtitle={`${summary.expenses.confirmed.guests} guests`} iconName="ChevronDoubleDownIcon" style="green" />
+          <MainCard amount={`${Math.round(summary.expenses.confirmed.total / summary.expenses.confirmed.guests)}€`} title="/ guest" iconName="UserIcon" style='green' />
+
+        </div>
+        <div className="flex flex-col">
+          <MainCard amount={`${summary.expenses.status.paid}€`} title="Paid already" subtitle={`${Math.round(summary.expenses.status.paid / summary.expenses.projected.total * 100)}% of projected`} iconName="CheckIcon" style='blue' />
+          <MainCard amount={`${summary.expenses.projected.total - summary.expenses.status.paid}€`} title="To pay" subtitle={`${100 - Math.round(summary.expenses.status.paid / summary.expenses.projected.total * 100)}% of projected`} iconName="BanknotesIcon" style="orange" />
+        </div>
+
+      </div>
+
+      <div className="flex flex-row w-full my-2">
+        <MainCard style="blue" amount={summary.guests.total.toString()} title="Invites sent" iconName="UsersIcon" />
+
+        <div className="flex flex-col">
+          <SecondaryCard amount={`${Math.round(summary.guests.confirmed / summary.guests.total * 100)}%`} title={`confirmed (${summary.guests.confirmed} guests)`} iconName="CheckIcon" style='green' />
+          <SecondaryCard amount={`${Math.round(summary.guests.declined / summary.guests.total * 100)}%`} title={`declined (${summary.guests.declined} guests)`} iconName="XMarkIcon" style='red' />
+        </div>
+
+        <div className="flex flex-col">
+          <SecondaryCard amount={`${Math.round(summary.guests.tentative / summary.guests.total * 100)}%`} title={`tentative (${summary.guests.tentative} guests)`} iconName="QuestionMarkCircleIcon" style='orange' />
+          <SecondaryCard amount={`${Math.round(summary.guests.invited / summary.guests.total * 100)}%`} title={`awaiting (${summary.guests.invited} guests)`} iconName="EllipsisHorizontalIcon" style='gray' />
+        </div>
+      </div>
+    </div>
+  );
+}

app/ui/dashboard/latest-invoices.tsx

@@ -1,64 +0,0 @@
-import { ArrowPathIcon } from '@heroicons/react/24/outline';
-import clsx from 'clsx';
-import Image from 'next/image';
-import { lusitana } from '@/app/ui/fonts';
-import { LatestInvoice } from '@/app/lib/definitions';
-export default async function Latestguests({
-  latestguests,
-}: {
-  latestguests: LatestInvoice[];
-}) {
-  return (
-    <div className="flex w-full flex-col md:col-span-4">
-      <h2 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}>
-        Latest guests
-      </h2>
-      <div className="flex grow flex-col justify-between rounded-xl bg-gray-50 p-4">
-        {/* NOTE: Uncomment this code in Chapter 7 */}
-
-        {/* <div className="bg-white px-6">
-          {latestguests.map((invoice, i) => {
-            return (
-              <div
-                key={invoice.id}
-                className={clsx(
-                  'flex flex-row items-center justify-between py-4',
-                  {
-                    'border-t': i !== 0,
-                  },
-                )}
-              >
-                <div className="flex items-center">
-                  <Image
-                    src={invoice.image_url}
-                    alt={`${invoice.name}'s profile picture`}
-                    className="mr-4 rounded-full"
-                    width={32}
-                    height={32}
-                  />
-                  <div className="min-w-0">
-                    <p className="truncate text-sm font-semibold md:text-base">
-                      {invoice.name}
-                    </p>
-                    <p className="hidden text-sm text-gray-500 sm:block">
-                      {invoice.email}
-                    </p>
-                  </div>
-                </div>
-                <p
-                  className={`${lusitana.className} truncate text-sm font-medium md:text-base`}
-                >
-                  {invoice.amount}
-                </p>
-              </div>
-            );
-          })}
-        </div> */}
-        <div className="flex items-center pb-2 pt-6">
-          <ArrowPathIcon className="h-5 w-5 text-gray-500" />
-          <h3 className="ml-2 text-sm text-gray-500 ">Updated just now</h3>
-        </div>
-      </div>
-    </div>
-  );
-}

app/ui/dashboard/loading.tsx

@@ -1,3 +1,5 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
 export default function Loading() {
     return <div>Loading...</div>;
 }

app/ui/dashboard/nav-links.tsx

@@ -1,3 +1,5 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
 'use client'
 
 import {
@@ -8,13 +10,14 @@ import {
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import clsx from 'clsx';
+import { getSlug } from '@/app/lib/utils';
 
 // Map of links to display in the side navigation.
 // Depending on the size of the application, this would be stored in a database.
 const links = [
-  { name: 'Guests', href: '/dashboard/guests', icon: UserGroupIcon },
+  { name: 'Guests', href: `/${getSlug()}/dashboard/guests`, icon: UserGroupIcon },
-  { name: 'Expenses', href: '/dashboard/expenses', icon: BanknotesIcon },
+  { name: 'Expenses', href: `/${getSlug()}/dashboard/expenses`, icon: BanknotesIcon },
-  { name: 'Table distributions', href: '/dashboard/tables', icon: RectangleGroupIcon },
+  { name: 'Table distributions', href: `/${getSlug()}/dashboard/tables`, icon: RectangleGroupIcon },
 ];
 
 

app/ui/dashboard/revenue-chart.tsx

@@ -1,65 +0,0 @@
-import { generateYAxis } from '@/app/lib/utils';
-import { CalendarIcon } from '@heroicons/react/24/outline';
-import { lusitana } from '@/app/ui/fonts';
-import { Revenue } from '@/app/lib/definitions';
-
-// This component is representational only.
-// For data visualization UI, check out:
-// https://www.tremor.so/
-// https://www.chartjs.org/
-// https://airbnb.io/visx/
-
-export default async function RevenueChart({
-  revenue,
-}: {
-  revenue: Revenue[];
-}) {
-  const chartHeight = 350;
-  // NOTE: Uncomment this code in Chapter 7
-
-  // const { yAxisLabels, topLabel } = generateYAxis(revenue);
-
-  // if (!revenue || revenue.length === 0) {
-  //   return <p className="mt-4 text-gray-400">No data available.</p>;
-  // }
-
-  return (
-    <div className="w-full md:col-span-4">
-      <h2 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}>
-        Recent Revenue
-      </h2>
-      {/* NOTE: Uncomment this code in Chapter 7 */}
-
-      {/* <div className="rounded-xl bg-gray-50 p-4">
-        <div className="sm:grid-cols-13 mt-0 grid grid-cols-12 items-end gap-2 rounded-md bg-white p-4 md:gap-4">
-          <div
-            className="mb-6 hidden flex-col justify-between text-sm text-gray-400 sm:flex"
-            style={{ height: `${chartHeight}px` }}
-          >
-            {yAxisLabels.map((label) => (
-              <p key={label}>{label}</p>
-            ))}
-          </div>
-
-          {revenue.map((month) => (
-            <div key={month.month} className="flex flex-col items-center gap-2">
-              <div
-                className="w-full rounded-md bg-blue-300"
-                style={{
-                  height: `${(chartHeight / topLabel) * month.revenue}px`,
-                }}
-              ></div>
-              <p className="-rotate-90 text-sm text-gray-400 sm:rotate-0">
-                {month.month}
-              </p>
-            </div>
-          ))}
-        </div>
-        <div className="flex items-center pb-2 pt-6">
-          <CalendarIcon className="h-5 w-5 text-gray-500" />
-          <h3 className="ml-2 text-sm text-gray-500 ">Last 12 months</h3>
-        </div>
-      </div> */}
-    </div>
-  );
-}

app/ui/dashboard/sidenav.tsx

@@ -1,28 +1,46 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+'use client';
+
 import Link from 'next/link';
 import NavLinks from '@/app/ui/dashboard/nav-links';
 import { PowerIcon } from '@heroicons/react/24/outline';
 import { gloriaHallelujah } from '@/app/ui/fonts';
+import { logout } from '@/app/api/authentication';
+import { useRouter } from 'next/navigation';
+import { getSlug } from '@/app/lib/utils';
 
 export default function SideNav() {
+  const router = useRouter();
+
   return (
     <div className="flex h-full flex-col px-3 py-4 md:px-2">
       <Link
         className="mb-2 flex h-20 items-center justify-start rounded-md bg-blue-600 p-4 md:h-20"
-        href="/dashboard/guests"
+        href={`/${getSlug()}/dashboard`}
       >
-        <div className={`${gloriaHallelujah.className} "w-32 text-white md:w-40 antialiased` }>
+        <div className={`${gloriaHallelujah.className} "w-32 text-white md:w-40 antialiased`}>
           <h1>Wedding Planner</h1>
         </div>
       </Link>
       <div className="flex grow flex-row justify-between space-x-2 md:flex-col md:space-x-0 md:space-y-2">
         <NavLinks />
         <div className="hidden h-auto w-full grow rounded-md bg-gray-50 md:block"></div>
-        <form>
+        <span>Logged in as {JSON.parse(localStorage.getItem('currentUser') || '{}').email}</span>
-          <button className="flex h-[48px] w-full grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3">
+        <button
-            <PowerIcon className="w-6" />
+          className="flex h-[48px] w-full grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3"
-            <div className="hidden md:block">Sign Out</div>
+          onClick={() => {
-          </button>
+            logout({
-        </form>
+              onLogout: () => {
+                localStorage.clear();
+                router.push(`/${getSlug()}`);
+              }
+            });
+          }}
+        >
+          <PowerIcon className="w-6" />
+          <div className="hidden md:block">Sign Out</div>
+        </button>
       </div>
     </div>
   );

app/ui/expenses/table.tsx

@@ -0,0 +1,46 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+'use client'
+
+import { AbstractApi } from '@/app/api/abstract-api';
+import { Expense, ExpenseSerializer } from '@/app/lib/expense';
+import { PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
+import TableOfContents from "../components/table-of-contents";
+
+
+export default function ExpensesTable({ expenses, onUpdate, onEdit }: {
+  expenses: Expense[],
+  onUpdate: () => void,
+  onEdit: (expense: Expense) => void,
+}) {
+
+  const api = new AbstractApi<Expense>();
+  const serializer = new ExpenseSerializer();
+
+  return (
+    <TableOfContents
+      headers={['Name', 'Amount (€)', 'Pricing Type', 'Actions']}
+      caption='Expenses'
+      elements={expenses}
+      rowRender={(expense) => (
+        <tr key={expense.id} className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
+          <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+            {expense.name}
+          </th>
+          <td className="px-6 py-4">
+            {expense.amount}
+          </td>
+          <td>
+            {expense.pricingType}
+          </td>
+          <td>
+            <div className="flex flex-row items-center">
+              <TrashIcon className='size-6 cursor-pointer' onClick={() => { api.destroy(serializer, expense, onUpdate) }} />
+              <PencilIcon className='size-6 cursor-pointer' onClick={() => onEdit(expense)} />
+            </div>
+          </td>
+        </tr>
+      )}
+    />
+  );
+}

app/ui/fonts.ts

@@ -1,3 +1,5 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
 import { Inter, Lusitana, Gloria_Hallelujah} from 'next/font/google';
  
 export const inter = Inter({ subsets: ['latin'] });

app/ui/groups/table.tsx

@@ -0,0 +1,105 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+'use client';
+
+import { AbstractApi } from '@/app/api/abstract-api';
+import { Group, GroupSerializer } from '@/app/lib/group';
+import { AdjustmentsHorizontalIcon, PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
+import { Column } from 'primereact/column';
+import { TreeNode } from 'primereact/treenode';
+import { TreeTable } from 'primereact/treetable';
+
+export default function GroupsTable({ groups, onUpdate, onEdit, onEditAffinities }: {
+  groups: Group[],
+  onUpdate: () => void,
+  onEdit: (group: Group) => void,
+  onEditAffinities: (group: Group) => void,
+}) {
+
+  const api = new AbstractApi<Group>();
+  const serializer = new GroupSerializer();
+
+  const actions = (group: Group) => (
+    <div className="flex flex-row items-center">
+      <TrashIcon className='size-6 cursor-pointer' onClick={() => { api.destroy(serializer, group, onUpdate) }} />
+      <PencilIcon className='size-6 cursor-pointer' onClick={() => onEdit(group)} />
+      <AdjustmentsHorizontalIcon className='size-6 cursor-pointer' onClick={() => onEditAffinities(group)} />
+    </div>
+  );
+
+  const index = groups.reduce((acc, group) => {
+    if (group.id) {
+      acc.set(group.id, group)
+    }
+
+    return acc;
+  }, new Map());
+
+  groups.forEach(group => group.children = []);
+  groups.forEach(group => {
+    if (group.parentId) {
+      const parent = index.get(group.parentId);
+      if (parent) {
+        if (!parent.children) {
+          parent.children = [];
+        }
+        parent.children.push(group);
+      }
+    }
+  });
+
+  const renderTree = (group: Group): TreeNode => {
+    const childrenAttendance = (group.children || []).reduce((acc, child) => {
+      acc.confirmed += child.attendance?.confirmed || 0;
+      acc.tentative += child.attendance?.tentative || 0;
+      acc.invited += child.attendance?.invited || 0;
+      acc.declined += child.attendance?.declined || 0;
+      acc.considered += child.attendance?.considered || 0;
+      acc.total += child.attendance?.total || 0;
+      return acc;
+    }, { confirmed: 0, tentative: 0, invited: 0, declined: 0, considered: 0, total: 0 });
+
+    return {
+      id: group.id,
+      key: group.id,
+      label: group.name,
+      data: {
+        name: group.name,
+        color: <div className="w-8 h-8 rounded-full" style={{ backgroundColor: group.color }} />,
+        confirmed: childrenAttendance.confirmed + (group.attendance?.confirmed || 0),
+        tentative: childrenAttendance.tentative + (group.attendance?.tentative || 0),
+        pending: childrenAttendance.invited + (group.attendance?.invited || 0),
+        declined: childrenAttendance.declined + (group.attendance?.declined || 0),
+        considered: childrenAttendance.considered + (group.attendance?.considered || 0),
+        total: childrenAttendance.total + (group.attendance?.total || 0),
+        actions: actions(group),
+      },
+      children: group.children?.map(renderTree),
+    }
+  }
+
+  const nodes: TreeNode[] = groups
+    .filter(group => !group.parentId)
+    .map(renderTree)
+
+  const headers = ['Name', 'Color', 'Confirmed', 'Tentative', 'Pending', 'Declined', 'Considered', 'Total', 'Actions'];
+  const rowClassName = () => {
+    return { 'border-b odd:bg-white even:bg-gray-50 hover:bg-gray-100': true };
+  }
+
+  return (
+    <>
+      <TreeTable value={nodes} rowClassName={rowClassName} className='py-4'>
+        <Column expander field="name" header="Name" className='w-2/5' />
+        <Column field="color" header="Color" bodyClassName="text-sm" />
+        <Column field="confirmed" header="Confirmed" bodyClassName="text-sm" />
+        <Column field="tentative" header="Tentative" bodyClassName="text-sm" />
+        <Column field="pending" header="Pending" bodyClassName="text-sm" />
+        <Column field="declined" header="Declined" bodyClassName="text-sm" />
+        <Column field="considered" header="Considered" bodyClassName="text-sm" />
+        <Column field="total" header="Total" bodyClassName="text-sm" />
+        <Column field="actions" header="Actions" />
+      </TreeTable>
+    </>
+  )
+}

app/ui/guests/affinity-groups-tree.tsx

@@ -1,63 +0,0 @@
-'use client'
-
-import React, { useState, useEffect, Suspense } from 'react';
-import { Tree, TreeNode } from 'primereact/tree';
-import { PrimeIcons } from 'primereact/api';
-import { debug } from 'console';
-import { Group } from '@/app/lib/definitions';
-
-export default function AffinityGroupsTree() {
-    const [nodes, setNodes] = useState([]);
-
-    const groupToNode = (group: Group): TreeNode => {
-        return({
-            key: group.id,
-            label: `${group.name} (${group.guest_count})`,
-            icon: group.icon,
-            children: group.children.map((child) => groupToNode(child)),
-            className: "px-4",
-        })
-    }
-
-    const parseNode = (record: any, included: any[]): Group => {
-        if (!record.attributes) {
-            record = included.find((a) => a.id === record.id);
-        }
-        
-        const children: Group[] = (record?.relationships?.children?.data || []).map((child: any) => {
-            return (parseNode(child, included));
-        });
-
-        const children_guest_count: number = children.reduce((acc: number, child: Group) => acc + child.guest_count, 0);
-
-        return ({
-            id: record.id,
-            name: record.attributes.name,
-            guest_count: record.attributes.guest_count + children_guest_count,
-            icon: record.attributes.icon,
-            children: children,
-        })
-    }
-
-
-    useEffect(() => {
-        if (nodes.length > 0) {
-            return;
-        }
-        fetch("http://localhost:3001/groups.json")
-            .then((response) => response.json())
-            .then((data) => {
-                setNodes(data.data.map((record: any) => {
-                    return (groupToNode(parseNode(record, data.included)));
-                }))
-            });
-    });
-
-    return (
-        <div className="card flex justify-content-center">
-            <Suspense>
-                <Tree value={nodes} dragdropScope="affinity-groups" onDragDrop={(e) => setNodes(e.value)} className="w-full md:w-30rem" />
-            </Suspense>
-        </div>
-    )
-}

app/ui/guests/breadcrumbs.tsx

@@ -1,36 +0,0 @@
-import { clsx } from 'clsx';
-import Link from 'next/link';
-import { lusitana } from '@/app/ui/fonts';
-
-interface Breadcrumb {
-  label: string;
-  href: string;
-  active?: boolean;
-}
-
-export default function Breadcrumbs({
-  breadcrumbs,
-}: {
-  breadcrumbs: Breadcrumb[];
-}) {
-  return (
-    <nav aria-label="Breadcrumb" className="mb-6 block">
-      <ol className={clsx(lusitana.className, 'flex text-xl md:text-2xl')}>
-        {breadcrumbs.map((breadcrumb, index) => (
-          <li
-            key={breadcrumb.href}
-            aria-current={breadcrumb.active}
-            className={clsx(
-              breadcrumb.active ? 'text-gray-900' : 'text-gray-500',
-            )}
-          >
-            <Link href={breadcrumb.href}>{breadcrumb.label}</Link>
-            {index < breadcrumbs.length - 1 ? (
-              <span className="mx-3 inline-block">/</span>
-            ) : null}
-          </li>
-        ))}
-      </ol>
-    </nav>
-  );
-}

app/ui/guests/buttons.tsx

@@ -1,36 +0,0 @@
-import { PencilIcon, PlusIcon, TrashIcon } from '@heroicons/react/24/outline';
-import Link from 'next/link';
-
-export function CreateInvoice() {
-  return (
-    <Link
-      href="/dashboard/guests/create"
-      className="flex h-10 items-center rounded-lg bg-blue-600 px-4 text-sm font-medium text-white transition-colors hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
-    >
-      <span className="hidden md:block">Create Invoice</span>{' '}
-      <PlusIcon className="h-5 md:ml-4" />
-    </Link>
-  );
-}
-
-export function UpdateInvoice({ id }: { id: string }) {
-  return (
-    <Link
-      href="/dashboard/guests"
-      className="rounded-md border p-2 hover:bg-gray-100"
-    >
-      <PencilIcon className="w-5" />
-    </Link>
-  );
-}
-
-export function DeleteInvoice({ id }: { id: string }) {
-  return (
-    <>
-      <button className="rounded-md border p-2 hover:bg-gray-100">
-        <span className="sr-only">Delete</span>
-        <TrashIcon className="w-5" />
-      </button>
-    </>
-  );
-}

app/ui/guests/create-form.tsx

@@ -1,112 +0,0 @@
-import { CustomerField } from '@/app/lib/definitions';
-import Link from 'next/link';
-import {
-  CheckIcon,
-  ClockIcon,
-  CurrencyDollarIcon,
-  UserCircleIcon,
-} from '@heroicons/react/24/outline';
-import { Button } from '@/app/ui/button';
-
-export default function Form({ customers }: { customers: CustomerField[] }) {
-  return (
-    <form>
-      <div className="rounded-md bg-gray-50 p-4 md:p-6">
-        {/* Customer Name */}
-        <div className="mb-4">
-          <label htmlFor="customer" className="mb-2 block text-sm font-medium">
-            Choose customer
-          </label>
-          <div className="relative">
-            <select
-              id="customer"
-              name="customerId"
-              className="peer block w-full cursor-pointer rounded-md border border-gray-200 py-2 pl-10 text-sm outline-2 placeholder:text-gray-500"
-              defaultValue=""
-            >
-              <option value="" disabled>
-                Select a customer
-              </option>
-              {customers.map((customer) => (
-                <option key={customer.id} value={customer.id}>
-                  {customer.name}
-                </option>
-              ))}
-            </select>
-            <UserCircleIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500" />
-          </div>
-        </div>
-
-        {/* Invoice Amount */}
-        <div className="mb-4">
-          <label htmlFor="amount" className="mb-2 block text-sm font-medium">
-            Choose an amount
-          </label>
-          <div className="relative mt-2 rounded-md">
-            <div className="relative">
-              <input
-                id="amount"
-                name="amount"
-                type="number"
-                step="0.01"
-                placeholder="Enter USD amount"
-                className="peer block w-full rounded-md border border-gray-200 py-2 pl-10 text-sm outline-2 placeholder:text-gray-500"
-              />
-              <CurrencyDollarIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
-            </div>
-          </div>
-        </div>
-
-        {/* Invoice Status */}
-        <fieldset>
-          <legend className="mb-2 block text-sm font-medium">
-            Set the invoice status
-          </legend>
-          <div className="rounded-md border border-gray-200 bg-white px-[14px] py-3">
-            <div className="flex gap-4">
-              <div className="flex items-center">
-                <input
-                  id="pending"
-                  name="status"
-                  type="radio"
-                  value="pending"
-                  className="h-4 w-4 cursor-pointer border-gray-300 bg-gray-100 text-gray-600 focus:ring-2"
-                />
-                <label
-                  htmlFor="pending"
-                  className="ml-2 flex cursor-pointer items-center gap-1.5 rounded-full bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-600"
-                >
-                  Pending <ClockIcon className="h-4 w-4" />
-                </label>
-              </div>
-              <div className="flex items-center">
-                <input
-                  id="paid"
-                  name="status"
-                  type="radio"
-                  value="paid"
-                  className="h-4 w-4 cursor-pointer border-gray-300 bg-gray-100 text-gray-600 focus:ring-2"
-                />
-                <label
-                  htmlFor="paid"
-                  className="ml-2 flex cursor-pointer items-center gap-1.5 rounded-full bg-green-500 px-3 py-1.5 text-xs font-medium text-white"
-                >
-                  Paid <CheckIcon className="h-4 w-4" />
-                </label>
-              </div>
-            </div>
-          </div>
-        </fieldset>
-      </div>
-      <div className="mt-6 flex justify-end gap-4">
-        <Link
-          href="/dashboard/guests"
-          className="flex h-10 items-center rounded-lg bg-gray-100 px-4 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-200"
-        >
-          Cancel
-        </Link>
-        <Button type="submit">Create Invoice</Button>
-      </div>
-    </form>
-  );
-}

app/ui/guests/edit-form.tsx

@@ -1,123 +0,0 @@
-'use client';
-
-import { CustomerField, InvoiceForm } from '@/app/lib/definitions';
-import {
-  CheckIcon,
-  ClockIcon,
-  CurrencyDollarIcon,
-  UserCircleIcon,
-} from '@heroicons/react/24/outline';
-import Link from 'next/link';
-import { Button } from '@/app/ui/button';
-
-export default function EditInvoiceForm({
-  invoice,
-  customers,
-}: {
-  invoice: InvoiceForm;
-  customers: CustomerField[];
-}) {
-  return (
-    <form>
-      <div className="rounded-md bg-gray-50 p-4 md:p-6">
-        {/* Customer Name */}
-        <div className="mb-4">
-          <label htmlFor="customer" className="mb-2 block text-sm font-medium">
-            Choose customer
-          </label>
-          <div className="relative">
-            <select
-              id="customer"
-              name="customerId"
-              className="peer block w-full cursor-pointer rounded-md border border-gray-200 py-2 pl-10 text-sm outline-2 placeholder:text-gray-500"
-              defaultValue={invoice.customer_id}
-            >
-              <option value="" disabled>
-                Select a customer
-              </option>
-              {customers.map((customer) => (
-                <option key={customer.id} value={customer.id}>
-                  {customer.name}
-                </option>
-              ))}
-            </select>
-            <UserCircleIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500" />
-          </div>
-        </div>
-
-        {/* Invoice Amount */}
-        <div className="mb-4">
-          <label htmlFor="amount" className="mb-2 block text-sm font-medium">
-            Choose an amount
-          </label>
-          <div className="relative mt-2 rounded-md">
-            <div className="relative">
-              <input
-                id="amount"
-                name="amount"
-                type="number"
-                step="0.01"
-                defaultValue={invoice.amount}
-                placeholder="Enter USD amount"
-                className="peer block w-full rounded-md border border-gray-200 py-2 pl-10 text-sm outline-2 placeholder:text-gray-500"
-              />
-              <CurrencyDollarIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
-            </div>
-          </div>
-        </div>
-
-        {/* Invoice Status */}
-        <fieldset>
-          <legend className="mb-2 block text-sm font-medium">
-            Set the invoice status
-          </legend>
-          <div className="rounded-md border border-gray-200 bg-white px-[14px] py-3">
-            <div className="flex gap-4">
-              <div className="flex items-center">
-                <input
-                  id="pending"
-                  name="status"
-                  type="radio"
-                  value="pending"
-                  defaultChecked={invoice.status === 'pending'}
-                  className="h-4 w-4 cursor-pointer border-gray-300 bg-gray-100 text-gray-600 focus:ring-2"
-                />
-                <label
-                  htmlFor="pending"
-                  className="ml-2 flex cursor-pointer items-center gap-1.5 rounded-full bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-600"
-                >
-                  Pending <ClockIcon className="h-4 w-4" />
-                </label>
-              </div>
-              <div className="flex items-center">
-                <input
-                  id="paid"
-                  name="status"
-                  type="radio"
-                  value="paid"
-                  defaultChecked={invoice.status === 'paid'}
-                  className="h-4 w-4 cursor-pointer border-gray-300 bg-gray-100 text-gray-600 focus:ring-2"
-                />
-                <label
-                  htmlFor="paid"
-                  className="ml-2 flex cursor-pointer items-center gap-1.5 rounded-full bg-green-500 px-3 py-1.5 text-xs font-medium text-white"
-                >
-                  Paid <CheckIcon className="h-4 w-4" />
-                </label>
-              </div>
-            </div>
-          </div>
-        </fieldset>
-      </div>
-      <div className="mt-6 flex justify-end gap-4">
-        <Link
-          href="/dashboard/guests"
-          className="flex h-10 items-center rounded-lg bg-gray-100 px-4 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-200"
-        >
-          Cancel
-        </Link>
-        <Button type="submit">Edit Invoice</Button>
-      </div>
-    </form>
-  );
-}

app/ui/guests/pagination.tsx

@@ -1,119 +0,0 @@
-'use client';
-
-import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
-import clsx from 'clsx';
-import Link from 'next/link';
-import { generatePagination } from '@/app/lib/utils';
-
-export default function Pagination({ totalPages }: { totalPages: number }) {
-  // NOTE: Uncomment this code in Chapter 11
-
-  // const allPages = generatePagination(currentPage, totalPages);
-
-  return (
-    <>
-      {/*  NOTE: Uncomment this code in Chapter 11 */}
-
-      {/* <div className="inline-flex">
-        <PaginationArrow
-          direction="left"
-          href={createPageURL(currentPage - 1)}
-          isDisabled={currentPage <= 1}
-        />
-
-        <div className="flex -space-x-px">
-          {allPages.map((page, index) => {
-            let position: 'first' | 'last' | 'single' | 'middle' | undefined;
-
-            if (index === 0) position = 'first';
-            if (index === allPages.length - 1) position = 'last';
-            if (allPages.length === 1) position = 'single';
-            if (page === '...') position = 'middle';
-
-            return (
-              <PaginationNumber
-                key={page}
-                href={createPageURL(page)}
-                page={page}
-                position={position}
-                isActive={currentPage === page}
-              />
-            );
-          })}
-        </div>
-
-        <PaginationArrow
-          direction="right"
-          href={createPageURL(currentPage + 1)}
-          isDisabled={currentPage >= totalPages}
-        />
-      </div> */}
-    </>
-  );
-}
-
-function PaginationNumber({
-  page,
-  href,
-  isActive,
-  position,
-}: {
-  page: number | string;
-  href: string;
-  position?: 'first' | 'last' | 'middle' | 'single';
-  isActive: boolean;
-}) {
-  const className = clsx(
-    'flex h-10 w-10 items-center justify-center text-sm border',
-    {
-      'rounded-l-md': position === 'first' || position === 'single',
-      'rounded-r-md': position === 'last' || position === 'single',
-      'z-10 bg-blue-600 border-blue-600 text-white': isActive,
-      'hover:bg-gray-100': !isActive && position !== 'middle',
-      'text-gray-300': position === 'middle',
-    },
-  );
-
-  return isActive || position === 'middle' ? (
-    <div className={className}>{page}</div>
-  ) : (
-    <Link href={href} className={className}>
-      {page}
-    </Link>
-  );
-}
-
-function PaginationArrow({
-  href,
-  direction,
-  isDisabled,
-}: {
-  href: string;
-  direction: 'left' | 'right';
-  isDisabled?: boolean;
-}) {
-  const className = clsx(
-    'flex h-10 w-10 items-center justify-center rounded-md border',
-    {
-      'pointer-events-none text-gray-300': isDisabled,
-      'hover:bg-gray-100': !isDisabled,
-      'mr-2 md:mr-4': direction === 'left',
-      'ml-2 md:ml-4': direction === 'right',
-    },
-  );
-
-  const icon =
-    direction === 'left' ? (
-      <ArrowLeftIcon className="w-4" />
-    ) : (
-      <ArrowRightIcon className="w-4" />
-    );
-
-  return isDisabled ? (
-    <div className={className}>{icon}</div>
-  ) : (
-    <Link className={className} href={href}>
-      {icon}
-    </Link>
-  );
-}

app/ui/guests/skeleton-row.tsx

@@ -0,0 +1,36 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+import Skeleton from '@/app/ui/skeleton';
+
+export function SkeletonRow() {
+    return (
+        <tr className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
+            <td className="px-6 py-4">{<Skeleton className="w-[45ch] h-[1rem]" />}</td>
+            <td className="px-6 py-4">{<Skeleton className="w-[45ch] h-[1rem]" />}</td>
+            <td className="px-6 py-4">{<Skeleton className="w-[20ch] h-[1rem]" />}</td>
+            <td className="px-6 py-4">{<Skeleton className="w-[10ch] h-[1rem]" />}</td>
+        </tr>
+    );
+}
+
+export default function SkeletonTable() {
+    return (
+        <div className="w-full relative overflow-x-auto shadow-md sm:rounded-lg">
+            <table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+                <caption className="p-5 text-lg font-semibold text-left rtl:text-right text-gray-900 bg-white dark:text-white dark:bg-gray-800">
+                    Guests
+                    <p className="mt-1 text-sm font-normal text-gray-500 dark:text-gray-400">
+                        Loading the list of guests...
+                    </p>
+                </caption>
+                <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+                </thead>
+                <tbody>
+                    {[...Array(20)].map((e, i) => <SkeletonRow />)}
+                </tbody>
+            </table>
+        </div>
+
+    );
+}
+

app/ui/guests/status.tsx

@@ -1,29 +0,0 @@
-import { CheckIcon, ClockIcon } from '@heroicons/react/24/outline';
-import clsx from 'clsx';
-
-export default function gueststatus({ status }: { status: string }) {
-  return (
-    <span
-      className={clsx(
-        'inline-flex items-center rounded-full px-2 py-1 text-xs',
-        {
-          'bg-gray-100 text-gray-500': status === 'pending',
-          'bg-green-500 text-white': status === 'paid',
-        },
-      )}
-    >
-      {status === 'pending' ? (
-        <>
-          Pending
-          <ClockIcon className="ml-1 w-4 text-gray-500" />
-        </>
-      ) : null}
-      {status === 'paid' ? (
-        <>
-          Paid
-          <CheckIcon className="ml-1 w-4 text-white" />
-        </>
-      ) : null}
-    </span>
-  );
-}

app/ui/guests/table.tsx

@@ -1,91 +1,59 @@
-'use client'
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
 
-import { Guest } from '@/app/lib/definitions';
+'use client';
-import { useState, Suspense, useEffect } from 'react';
+
+import { AbstractApi } from '@/app/api/abstract-api';
+import { Guest , GuestSerializer} from '@/app/lib/guest';
+import { PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
+import TableOfContents from '../components/table-of-contents';
 
-export default function guestsTable() {
+export default function guestsTable({ guests, onUpdate, onEdit }: {
+  guests: Guest[],
+  onUpdate: () => void,
+  onEdit: (guest: Guest) => void
+}) {
 
-  const [guests, setGuests] = useState<Guest[]>([]);
+  const api = new AbstractApi<Guest>();
-
+  const serializer = new GuestSerializer();
-  useEffect(() => {
-    if (guests.length > 0) {
-      return;
-    }
-    fetch("http://localhost:3001/guests.json")
-      .then((response) => response.json())
-      .then((data) => {
-        setGuests(data.data.map((record: any) => {
-          return ({
-            id: record.id,
-            name: record.attributes.name,
-            email: record.attributes.email,
-            group_name: record.attributes.group_name,
-            status: record.attributes.status
-          });
-        }))
-      });
-  });
 
   return (
-    <div className="w-full relative overflow-x-auto shadow-md sm:rounded-lg">
+    <TableOfContents
-      <table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+      headers={['Name', 'Group', 'Status', 'Actions']}
-        <caption className="p-5 text-lg font-semibold text-left rtl:text-right text-gray-900 bg-white dark:text-white dark:bg-gray-800">
+      caption='Guests'
-          Guests
+      elements={guests}
-          <p className="mt-1 text-sm font-normal text-gray-500 dark:text-gray-400">
+      rowRender={(guest) => (
-            There are {guests.length} guests in the list
+        <tr key={guest.id} className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
-          </p>
+          <td scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-        </caption>
+            {guest.name}
-        <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+          </td>
-          <tr>
+          <td className="px-6 py-4">
-            <th scope="col" className="px-6 py-3">
+            {guest.group_name}
-              Name
+          </td>
-            </th>
+          <td className="px-6 py-4">
-            <th scope="col" className="px-6 py-3">
+            <span className="flex items-center text-sm dark:text-white me-3">
-              Email
+              <span className={clsx(
-            </th>
+                'flex w-2.5 h-2.5 rounded-full me-1.5 flex-shrink-0',
-            <th scope="col" className="px-6 py-3">
+                {
-              Group
+                  'bg-gray-400': guest.status === 'considered',
-            </th>
+                  'bg-blue-400': guest.status === 'invited',
-            <th scope="col" className="px-6 py-3">
+                  'bg-green-600': guest.status === 'confirmed',
-              Status
+                  'bg-red-400': guest.status === 'declined',
-            </th>
+                  'bg-yellow-400': guest.status === 'tentative',
-          </tr>
+                }
-        </thead>
+              )}>
-        <tbody>
+              </span>
-          <Suspense>
+              {guest.status}
-            {guests.map((guest) => (
+            </span>
-              <tr key={guest.id} className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
+          </td>
-                <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+          <td>
-                  {guest.name}
+            <div className="flex flex-row items-center">
-                </th>
+              <TrashIcon className='size-6 cursor-pointer' onClick={() => { api.destroy(serializer, guest, onUpdate)}} />
-                <td className="px-6 py-4">
+              <PencilIcon className='size-6 cursor-pointer' onClick={() => onEdit(guest)} />
-                  {guest.email}
+            </div>
-                </td>
+          </td>
-                <td className="px-6 py-4">
+        </tr>
-                  {guest.group_name}
+      )}
-                </td>
+    />
-                <td className="px-6 py-4">
-                  <span className="flex items-center text-sm dark:text-white me-3">
-                    <span className={clsx(
-                      'flex w-2.5 h-2.5 rounded-full me-1.5 flex-shrink-0',
-                      {
-                        'bg-gray-400': guest.status === 'Considered',
-                        'bg-blue-400': guest.status === 'Invited',
-                        'bg-green-600': guest.status === 'Confirmed',
-                        'bg-red-400': guest.status === 'Declined',
-                      }
-                    )}>
-                      {/* <span className="flex w-2.5 h-2.5 rounded-full me-1.5 flex-shrink-0 bg-blue-600"> */}
-                    </span>
-                    {guest.status}
-                  </span>
-                </td>
-              </tr>
-            ))}
-          </Suspense>
-        </tbody>
-      </table>
-    </div>
   );
 }

app/ui/login-form.tsx

@@ -1,67 +0,0 @@
-import { lusitana } from '@/app/ui/fonts';
-import {
-  AtSymbolIcon,
-  KeyIcon,
-  ExclamationCircleIcon,
-} from '@heroicons/react/24/outline';
-import { ArrowRightIcon } from '@heroicons/react/20/solid';
-import { Button } from './button';
-
-export default function LoginForm() {
-  return (
-    <form className="space-y-3">
-      <div className="flex-1 rounded-lg bg-gray-50 px-6 pb-4 pt-8">
-        <h1 className={`${lusitana.className} mb-3 text-2xl`}>
-          Please log in to continue.
-        </h1>
-        <div className="w-full">
-          <div>
-            <label
-              className="mb-3 mt-5 block text-xs font-medium text-gray-900"
-              htmlFor="email"
-            >
-              Email
-            </label>
-            <div className="relative">
-              <input
-                className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
-                id="email"
-                type="email"
-                name="email"
-                placeholder="Enter your email address"
-                required
-              />
-              <AtSymbolIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
-            </div>
-          </div>
-          <div className="mt-4">
-            <label
-              className="mb-3 mt-5 block text-xs font-medium text-gray-900"
-              htmlFor="password"
-            >
-              Password
-            </label>
-            <div className="relative">
-              <input
-                className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
-                id="password"
-                type="password"
-                name="password"
-                placeholder="Enter password"
-                required
-                minLength={6}
-              />
-              <KeyIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
-            </div>
-          </div>
-        </div>
-        <Button className="mt-4 w-full">
-          Log in <ArrowRightIcon className="ml-auto h-5 w-5 text-gray-50" />
-        </Button>
-        <div className="flex h-8 items-end space-x-1">
-          {/* Add form errors here */}
-        </div>
-      </div>
-    </form>
-  );
-}

app/ui/search.tsx

@@ -1,3 +1,5 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
 'use client';
 
 import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';

app/ui/skeleton.tsx

@@ -0,0 +1,5 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+export default function Skeleton({ className }: { className: string }) {
+    return <div className={`bg-slate-200 motion-safe:animate-pulse rounded ${className}`} />;
+}

app/ui/skeletons.tsx

@@ -1,218 +0,0 @@
-// Loading animation
-const shimmer =
-  'before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/60 before:to-transparent';
-
-export function CardSkeleton() {
-  return (
-    <div
-      className={`${shimmer} relative overflow-hidden rounded-xl bg-gray-100 p-2 shadow-sm`}
-    >
-      <div className="flex p-4">
-        <div className="h-5 w-5 rounded-md bg-gray-200" />
-        <div className="ml-2 h-6 w-16 rounded-md bg-gray-200 text-sm font-medium" />
-      </div>
-      <div className="flex items-center justify-center truncate rounded-xl bg-white px-4 py-8">
-        <div className="h-7 w-20 rounded-md bg-gray-200" />
-      </div>
-    </div>
-  );
-}
-
-export function CardsSkeleton() {
-  return (
-    <>
-      <CardSkeleton />
-      <CardSkeleton />
-      <CardSkeleton />
-      <CardSkeleton />
-    </>
-  );
-}
-
-export function RevenueChartSkeleton() {
-  return (
-    <div className={`${shimmer} relative w-full overflow-hidden md:col-span-4`}>
-      <div className="mb-4 h-8 w-36 rounded-md bg-gray-100" />
-      <div className="rounded-xl bg-gray-100 p-4">
-        <div className="mt-0 grid h-[410px] grid-cols-12 items-end gap-2 rounded-md bg-white p-4 sm:grid-cols-13 md:gap-4" />
-        <div className="flex items-center pb-2 pt-6">
-          <div className="h-5 w-5 rounded-full bg-gray-200" />
-          <div className="ml-2 h-4 w-20 rounded-md bg-gray-200" />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export function guestskeleton() {
-  return (
-    <div className="flex flex-row items-center justify-between border-b border-gray-100 py-4">
-      <div className="flex items-center">
-        <div className="mr-2 h-8 w-8 rounded-full bg-gray-200" />
-        <div className="min-w-0">
-          <div className="h-5 w-40 rounded-md bg-gray-200" />
-          <div className="mt-2 h-4 w-12 rounded-md bg-gray-200" />
-        </div>
-      </div>
-      <div className="mt-2 h-4 w-12 rounded-md bg-gray-200" />
-    </div>
-  );
-}
-
-export function LatestguestsSkeleton() {
-  return (
-    <div
-      className={`${shimmer} relative flex w-full flex-col overflow-hidden md:col-span-4`}
-    >
-      <div className="mb-4 h-8 w-36 rounded-md bg-gray-100" />
-      <div className="flex grow flex-col justify-between rounded-xl bg-gray-100 p-4">
-        <div className="bg-white px-6">
-          <guestskeleton />
-          <guestskeleton />
-          <guestskeleton />
-          <guestskeleton />
-          <guestskeleton />
-        </div>
-        <div className="flex items-center pb-2 pt-6">
-          <div className="h-5 w-5 rounded-full bg-gray-200" />
-          <div className="ml-2 h-4 w-20 rounded-md bg-gray-200" />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default function DashboardSkeleton() {
-  return (
-    <>
-      <div
-        className={`${shimmer} relative mb-4 h-8 w-36 overflow-hidden rounded-md bg-gray-100`}
-      />
-      <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
-        <CardSkeleton />
-        <CardSkeleton />
-        <CardSkeleton />
-        <CardSkeleton />
-      </div>
-      <div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-4 lg:grid-cols-8">
-        <RevenueChartSkeleton />
-        <LatestguestsSkeleton />
-      </div>
-    </>
-  );
-}
-
-export function TableRowSkeleton() {
-  return (
-    <tr className="w-full border-b border-gray-100 last-of-type:border-none [&:first-child>td:first-child]:rounded-tl-lg [&:first-child>td:last-child]:rounded-tr-lg [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg">
-      {/* Customer Name and Image */}
-      <td className="relative overflow-hidden whitespace-nowrap py-3 pl-6 pr-3">
-        <div className="flex items-center gap-3">
-          <div className="h-8 w-8 rounded-full bg-gray-100"></div>
-          <div className="h-6 w-24 rounded bg-gray-100"></div>
-        </div>
-      </td>
-      {/* Email */}
-      <td className="whitespace-nowrap px-3 py-3">
-        <div className="h-6 w-32 rounded bg-gray-100"></div>
-      </td>
-      {/* Amount */}
-      <td className="whitespace-nowrap px-3 py-3">
-        <div className="h-6 w-16 rounded bg-gray-100"></div>
-      </td>
-      {/* Date */}
-      <td className="whitespace-nowrap px-3 py-3">
-        <div className="h-6 w-16 rounded bg-gray-100"></div>
-      </td>
-      {/* Status */}
-      <td className="whitespace-nowrap px-3 py-3">
-        <div className="h-6 w-16 rounded bg-gray-100"></div>
-      </td>
-      {/* Actions */}
-      <td className="whitespace-nowrap py-3 pl-6 pr-3">
-        <div className="flex justify-end gap-3">
-          <div className="h-[38px] w-[38px] rounded bg-gray-100"></div>
-          <div className="h-[38px] w-[38px] rounded bg-gray-100"></div>
-        </div>
-      </td>
-    </tr>
-  );
-}
-
-export function guestsMobileSkeleton() {
-  return (
-    <div className="mb-2 w-full rounded-md bg-white p-4">
-      <div className="flex items-center justify-between border-b border-gray-100 pb-8">
-        <div className="flex items-center">
-          <div className="mr-2 h-8 w-8 rounded-full bg-gray-100"></div>
-          <div className="h-6 w-16 rounded bg-gray-100"></div>
-        </div>
-        <div className="h-6 w-16 rounded bg-gray-100"></div>
-      </div>
-      <div className="flex w-full items-center justify-between pt-4">
-        <div>
-          <div className="h-6 w-16 rounded bg-gray-100"></div>
-          <div className="mt-2 h-6 w-24 rounded bg-gray-100"></div>
-        </div>
-        <div className="flex justify-end gap-2">
-          <div className="h-10 w-10 rounded bg-gray-100"></div>
-          <div className="h-10 w-10 rounded bg-gray-100"></div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export function guestsTableSkeleton() {
-  return (
-    <div className="mt-6 flow-root">
-      <div className="inline-block min-w-full align-middle">
-        <div className="rounded-lg bg-gray-50 p-2 md:pt-0">
-          <div className="md:hidden">
-            <guestsMobileSkeleton />
-            <guestsMobileSkeleton />
-            <guestsMobileSkeleton />
-            <guestsMobileSkeleton />
-            <guestsMobileSkeleton />
-            <guestsMobileSkeleton />
-          </div>
-          <table className="hidden min-w-full text-gray-900 md:table">
-            <thead className="rounded-lg text-left text-sm font-normal">
-              <tr>
-                <th scope="col" className="px-4 py-5 font-medium sm:pl-6">
-                  Customer
-                </th>
-                <th scope="col" className="px-3 py-5 font-medium">
-                  Email
-                </th>
-                <th scope="col" className="px-3 py-5 font-medium">
-                  Amount
-                </th>
-                <th scope="col" className="px-3 py-5 font-medium">
-                  Date
-                </th>
-                <th scope="col" className="px-3 py-5 font-medium">
-                  Status
-                </th>
-                <th
-                  scope="col"
-                  className="relative pb-4 pl-3 pr-6 pt-2 sm:pr-6"
-                >
-                  <span className="sr-only">Edit</span>
-                </th>
-              </tr>
-            </thead>
-            <tbody className="bg-white">
-              <TableRowSkeleton />
-              <TableRowSkeleton />
-              <TableRowSkeleton />
-              <TableRowSkeleton />
-              <TableRowSkeleton />
-              <TableRowSkeleton />
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  );
-}

doc/dependency_decisions.yml

@@ -0,0 +1,85 @@
+---
+- - :permit
+  - MIT
+  - :who: 
+    :why: 
+    :versions: []
+    :when: 2024-10-25 17:45:36.831184284 Z
+- - :permit
+  - ISC
+  - :who: 
+    :why: 
+    :versions: []
+    :when: 2024-10-25 17:48:14.527140943 Z
+- - :permit
+  - Apache 2.0
+  - :who: 
+    :why: 
+    :versions: []
+    :when: 2024-10-25 17:48:23.863998708 Z
+- - :permit
+  - Simplified BSD
+  - :who: 
+    :why: 
+    :versions: []
+    :when: 2024-10-25 17:49:01.330574375 Z
+- - :permit
+  - New BSD
+  - :who: 
+    :why: 
+    :versions: []
+    :when: 2024-10-25 17:49:53.995999923 Z
+- - :permit
+  - LGPL-3.0-or-later
+  - :who: 
+    :why: 
+    :versions: []
+    :when: 2024-10-25 17:51:16.274818102 Z
+- - :permit
+  - Python-2.0
+  - :who: 
+    :why: 
+    :versions: []
+    :when: 2024-10-25 17:51:32.610018037 Z
+- - :permit
+  - BlueOak-1.0.0
+  - :who: 
+    :why: 
+    :versions: []
+    :when: 2024-10-25 17:52:28.568966565 Z
+- - :permit
+  - BSD
+  - :who: 
+    :why: 
+    :versions: []
+    :when: 2024-10-25 17:52:37.235297087 Z
+- - :permit
+  - The Unlicense
+  - :who: 
+    :why: 
+    :versions: []
+    :when: 2024-10-25 17:52:49.646463302 Z
+- - :permit
+  - CC-BY-4.0
+  - :who: 
+    :why: 
+    :versions: []
+    :when: 2024-10-25 17:54:29.363007852 Z
+- - :permit
+  - "(MIT AND Zlib)"
+  - :who: 
+    :why: 
+    :versions: []
+    :when: 2024-10-25 17:54:49.936741134 Z
+- - :permit
+  - BSD Zero Clause License
+  - :who: 
+    :why: 
+    :versions: []
+    :when: 2024-10-25 17:55:31.968339009 Z
+- - :permit
+  - Artistic-2.0
+  - :who: 
+    :why: 
+    :versions: []
+    :when: 2024-10-25 17:55:52.371898047 Z

next.config.mjs

@@ -1,5 +1,7 @@
 /** @type {import('next').NextConfig} */
 
-const nextConfig = {};
+const nextConfig = {
+    output: 'standalone',
+};
 
 export default nextConfig;

package.json

@@ -8,29 +8,31 @@
   "dependencies": {
     "@heroicons/react": "^2.1.4",
     "@tailwindcss/forms": "^0.5.7",
-    "@vercel/postgres": "^0.8.0",
+    "autoprefixer": "10.4.20",
-    "autoprefixer": "10.4.19",
     "bcrypt": "^5.1.1",
     "clsx": "^2.1.1",
-    "next": "15.0.0-canary.56",
+    "next": "15.1.4",
-    "next-auth": "5.0.0-beta.19",
+    "next-auth": "5.0.0-beta.25",
-    "postcss": "8.4.38",
+    "postcss": "8.5.1",
     "primeicons": "^7.0.0",
     "primereact": "^10.8.2",
     "react": "19.0.0-rc-f38c22b244-20240704",
     "react-dom": "19.0.0-rc-f38c22b244-20240704",
-    "tailwindcss": "3.4.4",
+    "tailwindcss": "3.4.17",
-    "typescript": "5.5.2",
+    "typescript": "5.7.3",
     "use-debounce": "^10.0.1",
+    "uuid": "11.0.5",
     "zod": "^3.23.8"
   },
   "devDependencies": {
+    "@playwright/test": "^1.46.0",
     "@types/bcrypt": "^5.0.2",
-    "@types/node": "20.14.8",
+    "@types/node": "22.10.7",
-    "@types/react": "18.3.3",
+    "@types/react": "18.3.18",
-    "@types/react-dom": "18.3.0"
+    "@types/react-dom": "18.3.5"
   },
   "engines": {
-    "node": ">=20.12.0"
+    "node": ">=23.0.0"
-  }
+  },
+  "packageManager": "pnpm@9.15.4+sha512.b2dc20e2fc72b3e18848459b37359a32064663e5627a51e4c74b2c29dd8e8e0491483c3abb40789cfd578bf362fb6ba8261b05f0387d76792ed6e23ea3b1b6a0"
 }

playwright.config.ts

@@ -0,0 +1,78 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: 'http://127.0.0.1:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   url: 'http://127.0.0.1:3000',
+  //   reuseExistingServer: !process.env.CI,
+  // },
+});

tests-examples/demo-todo-app.spec.ts

@@ -0,0 +1,437 @@
+import { test, expect, type Page } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('https://demo.playwright.dev/todomvc');
+});
+
+const TODO_ITEMS = [
+  'buy some cheese',
+  'feed the cat',
+  'book a doctors appointment'
+] as const;
+
+test.describe('New Todo', () => {
+  test('should allow me to add todo items', async ({ page }) => {
+    // create a new todo locator
+    const newTodo = page.getByPlaceholder('What needs to be done?');
+
+    // Create 1st todo.
+    await newTodo.fill(TODO_ITEMS[0]);
+    await newTodo.press('Enter');
+
+    // Make sure the list only has one todo item.
+    await expect(page.getByTestId('todo-title')).toHaveText([
+      TODO_ITEMS[0]
+    ]);
+
+    // Create 2nd todo.
+    await newTodo.fill(TODO_ITEMS[1]);
+    await newTodo.press('Enter');
+
+    // Make sure the list now has two todo items.
+    await expect(page.getByTestId('todo-title')).toHaveText([
+      TODO_ITEMS[0],
+      TODO_ITEMS[1]
+    ]);
+
+    await checkNumberOfTodosInLocalStorage(page, 2);
+  });
+
+  test('should clear text input field when an item is added', async ({ page }) => {
+    // create a new todo locator
+    const newTodo = page.getByPlaceholder('What needs to be done?');
+
+    // Create one todo item.
+    await newTodo.fill(TODO_ITEMS[0]);
+    await newTodo.press('Enter');
+
+    // Check that input is empty.
+    await expect(newTodo).toBeEmpty();
+    await checkNumberOfTodosInLocalStorage(page, 1);
+  });
+
+  test('should append new items to the bottom of the list', async ({ page }) => {
+    // Create 3 items.
+    await createDefaultTodos(page);
+
+    // create a todo count locator
+    const todoCount = page.getByTestId('todo-count')
+  
+    // Check test using different methods.
+    await expect(page.getByText('3 items left')).toBeVisible();
+    await expect(todoCount).toHaveText('3 items left');
+    await expect(todoCount).toContainText('3');
+    await expect(todoCount).toHaveText(/3/);
+
+    // Check all items in one call.
+    await expect(page.getByTestId('todo-title')).toHaveText(TODO_ITEMS);
+    await checkNumberOfTodosInLocalStorage(page, 3);
+  });
+});
+
+test.describe('Mark all as completed', () => {
+  test.beforeEach(async ({ page }) => {
+    await createDefaultTodos(page);
+    await checkNumberOfTodosInLocalStorage(page, 3);
+  });
+
+  test.afterEach(async ({ page }) => {
+    await checkNumberOfTodosInLocalStorage(page, 3);
+  });
+
+  test('should allow me to mark all items as completed', async ({ page }) => {
+    // Complete all todos.
+    await page.getByLabel('Mark all as complete').check();
+
+    // Ensure all todos have 'completed' class.
+    await expect(page.getByTestId('todo-item')).toHaveClass(['completed', 'completed', 'completed']);
+    await checkNumberOfCompletedTodosInLocalStorage(page, 3);
+  });
+
+  test('should allow me to clear the complete state of all items', async ({ page }) => {
+    const toggleAll = page.getByLabel('Mark all as complete');
+    // Check and then immediately uncheck.
+    await toggleAll.check();
+    await toggleAll.uncheck();
+
+    // Should be no completed classes.
+    await expect(page.getByTestId('todo-item')).toHaveClass(['', '', '']);
+  });
+
+  test('complete all checkbox should update state when items are completed / cleared', async ({ page }) => {
+    const toggleAll = page.getByLabel('Mark all as complete');
+    await toggleAll.check();
+    await expect(toggleAll).toBeChecked();
+    await checkNumberOfCompletedTodosInLocalStorage(page, 3);
+
+    // Uncheck first todo.
+    const firstTodo = page.getByTestId('todo-item').nth(0);
+    await firstTodo.getByRole('checkbox').uncheck();
+
+    // Reuse toggleAll locator and make sure its not checked.
+    await expect(toggleAll).not.toBeChecked();
+
+    await firstTodo.getByRole('checkbox').check();
+    await checkNumberOfCompletedTodosInLocalStorage(page, 3);
+
+    // Assert the toggle all is checked again.
+    await expect(toggleAll).toBeChecked();
+  });
+});
+
+test.describe('Item', () => {
+
+  test('should allow me to mark items as complete', async ({ page }) => {
+    // create a new todo locator
+    const newTodo = page.getByPlaceholder('What needs to be done?');
+
+    // Create two items.
+    for (const item of TODO_ITEMS.slice(0, 2)) {
+      await newTodo.fill(item);
+      await newTodo.press('Enter');
+    }
+
+    // Check first item.
+    const firstTodo = page.getByTestId('todo-item').nth(0);
+    await firstTodo.getByRole('checkbox').check();
+    await expect(firstTodo).toHaveClass('completed');
+
+    // Check second item.
+    const secondTodo = page.getByTestId('todo-item').nth(1);
+    await expect(secondTodo).not.toHaveClass('completed');
+    await secondTodo.getByRole('checkbox').check();
+
+    // Assert completed class.
+    await expect(firstTodo).toHaveClass('completed');
+    await expect(secondTodo).toHaveClass('completed');
+  });
+
+  test('should allow me to un-mark items as complete', async ({ page }) => {
+    // create a new todo locator
+    const newTodo = page.getByPlaceholder('What needs to be done?');
+
+    // Create two items.
+    for (const item of TODO_ITEMS.slice(0, 2)) {
+      await newTodo.fill(item);
+      await newTodo.press('Enter');
+    }
+
+    const firstTodo = page.getByTestId('todo-item').nth(0);
+    const secondTodo = page.getByTestId('todo-item').nth(1);
+    const firstTodoCheckbox = firstTodo.getByRole('checkbox');
+
+    await firstTodoCheckbox.check();
+    await expect(firstTodo).toHaveClass('completed');
+    await expect(secondTodo).not.toHaveClass('completed');
+    await checkNumberOfCompletedTodosInLocalStorage(page, 1);
+
+    await firstTodoCheckbox.uncheck();
+    await expect(firstTodo).not.toHaveClass('completed');
+    await expect(secondTodo).not.toHaveClass('completed');
+    await checkNumberOfCompletedTodosInLocalStorage(page, 0);
+  });
+
+  test('should allow me to edit an item', async ({ page }) => {
+    await createDefaultTodos(page);
+
+    const todoItems = page.getByTestId('todo-item');
+    const secondTodo = todoItems.nth(1);
+    await secondTodo.dblclick();
+    await expect(secondTodo.getByRole('textbox', { name: 'Edit' })).toHaveValue(TODO_ITEMS[1]);
+    await secondTodo.getByRole('textbox', { name: 'Edit' }).fill('buy some sausages');
+    await secondTodo.getByRole('textbox', { name: 'Edit' }).press('Enter');
+
+    // Explicitly assert the new text value.
+    await expect(todoItems).toHaveText([
+      TODO_ITEMS[0],
+      'buy some sausages',
+      TODO_ITEMS[2]
+    ]);
+    await checkTodosInLocalStorage(page, 'buy some sausages');
+  });
+});
+
+test.describe('Editing', () => {
+  test.beforeEach(async ({ page }) => {
+    await createDefaultTodos(page);
+    await checkNumberOfTodosInLocalStorage(page, 3);
+  });
+
+  test('should hide other controls when editing', async ({ page }) => {
+    const todoItem = page.getByTestId('todo-item').nth(1);
+    await todoItem.dblclick();
+    await expect(todoItem.getByRole('checkbox')).not.toBeVisible();
+    await expect(todoItem.locator('label', {
+      hasText: TODO_ITEMS[1],
+    })).not.toBeVisible();
+    await checkNumberOfTodosInLocalStorage(page, 3);
+  });
+
+  test('should save edits on blur', async ({ page }) => {
+    const todoItems = page.getByTestId('todo-item');
+    await todoItems.nth(1).dblclick();
+    await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).fill('buy some sausages');
+    await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).dispatchEvent('blur');
+
+    await expect(todoItems).toHaveText([
+      TODO_ITEMS[0],
+      'buy some sausages',
+      TODO_ITEMS[2],
+    ]);
+    await checkTodosInLocalStorage(page, 'buy some sausages');
+  });
+
+  test('should trim entered text', async ({ page }) => {
+    const todoItems = page.getByTestId('todo-item');
+    await todoItems.nth(1).dblclick();
+    await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).fill('    buy some sausages    ');
+    await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).press('Enter');
+
+    await expect(todoItems).toHaveText([
+      TODO_ITEMS[0],
+      'buy some sausages',
+      TODO_ITEMS[2],
+    ]);
+    await checkTodosInLocalStorage(page, 'buy some sausages');
+  });
+
+  test('should remove the item if an empty text string was entered', async ({ page }) => {
+    const todoItems = page.getByTestId('todo-item');
+    await todoItems.nth(1).dblclick();
+    await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).fill('');
+    await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).press('Enter');
+
+    await expect(todoItems).toHaveText([
+      TODO_ITEMS[0],
+      TODO_ITEMS[2],
+    ]);
+  });
+
+  test('should cancel edits on escape', async ({ page }) => {
+    const todoItems = page.getByTestId('todo-item');
+    await todoItems.nth(1).dblclick();
+    await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).fill('buy some sausages');
+    await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).press('Escape');
+    await expect(todoItems).toHaveText(TODO_ITEMS);
+  });
+});
+
+test.describe('Counter', () => {
+  test('should display the current number of todo items', async ({ page }) => {
+    // create a new todo locator
+    const newTodo = page.getByPlaceholder('What needs to be done?');
+    
+    // create a todo count locator
+    const todoCount = page.getByTestId('todo-count')
+
+    await newTodo.fill(TODO_ITEMS[0]);
+    await newTodo.press('Enter');
+
+    await expect(todoCount).toContainText('1');
+
+    await newTodo.fill(TODO_ITEMS[1]);
+    await newTodo.press('Enter');
+    await expect(todoCount).toContainText('2');
+
+    await checkNumberOfTodosInLocalStorage(page, 2);
+  });
+});
+
+test.describe('Clear completed button', () => {
+  test.beforeEach(async ({ page }) => {
+    await createDefaultTodos(page);
+  });
+
+  test('should display the correct text', async ({ page }) => {
+    await page.locator('.todo-list li .toggle').first().check();
+    await expect(page.getByRole('button', { name: 'Clear completed' })).toBeVisible();
+  });
+
+  test('should remove completed items when clicked', async ({ page }) => {
+    const todoItems = page.getByTestId('todo-item');
+    await todoItems.nth(1).getByRole('checkbox').check();
+    await page.getByRole('button', { name: 'Clear completed' }).click();
+    await expect(todoItems).toHaveCount(2);
+    await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[2]]);
+  });
+
+  test('should be hidden when there are no items that are completed', async ({ page }) => {
+    await page.locator('.todo-list li .toggle').first().check();
+    await page.getByRole('button', { name: 'Clear completed' }).click();
+    await expect(page.getByRole('button', { name: 'Clear completed' })).toBeHidden();
+  });
+});
+
+test.describe('Persistence', () => {
+  test('should persist its data', async ({ page }) => {
+    // create a new todo locator
+    const newTodo = page.getByPlaceholder('What needs to be done?');
+
+    for (const item of TODO_ITEMS.slice(0, 2)) {
+      await newTodo.fill(item);
+      await newTodo.press('Enter');
+    }
+
+    const todoItems = page.getByTestId('todo-item');
+    const firstTodoCheck = todoItems.nth(0).getByRole('checkbox');
+    await firstTodoCheck.check();
+    await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[1]]);
+    await expect(firstTodoCheck).toBeChecked();
+    await expect(todoItems).toHaveClass(['completed', '']);
+
+    // Ensure there is 1 completed item.
+    await checkNumberOfCompletedTodosInLocalStorage(page, 1);
+
+    // Now reload.
+    await page.reload();
+    await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[1]]);
+    await expect(firstTodoCheck).toBeChecked();
+    await expect(todoItems).toHaveClass(['completed', '']);
+  });
+});
+
+test.describe('Routing', () => {
+  test.beforeEach(async ({ page }) => {
+    await createDefaultTodos(page);
+    // make sure the app had a chance to save updated todos in storage
+    // before navigating to a new view, otherwise the items can get lost :(
+    // in some frameworks like Durandal
+    await checkTodosInLocalStorage(page, TODO_ITEMS[0]);
+  });
+
+  test('should allow me to display active items', async ({ page }) => {
+    const todoItem = page.getByTestId('todo-item');
+    await page.getByTestId('todo-item').nth(1).getByRole('checkbox').check();
+
+    await checkNumberOfCompletedTodosInLocalStorage(page, 1);
+    await page.getByRole('link', { name: 'Active' }).click();
+    await expect(todoItem).toHaveCount(2);
+    await expect(todoItem).toHaveText([TODO_ITEMS[0], TODO_ITEMS[2]]);
+  });
+
+  test('should respect the back button', async ({ page }) => {
+    const todoItem = page.getByTestId('todo-item'); 
+    await page.getByTestId('todo-item').nth(1).getByRole('checkbox').check();
+
+    await checkNumberOfCompletedTodosInLocalStorage(page, 1);
+
+    await test.step('Showing all items', async () => {
+      await page.getByRole('link', { name: 'All' }).click();
+      await expect(todoItem).toHaveCount(3);
+    });
+
+    await test.step('Showing active items', async () => {
+      await page.getByRole('link', { name: 'Active' }).click();
+    });
+
+    await test.step('Showing completed items', async () => {
+      await page.getByRole('link', { name: 'Completed' }).click();
+    });
+
+    await expect(todoItem).toHaveCount(1);
+    await page.goBack();
+    await expect(todoItem).toHaveCount(2);
+    await page.goBack();
+    await expect(todoItem).toHaveCount(3);
+  });
+
+  test('should allow me to display completed items', async ({ page }) => {
+    await page.getByTestId('todo-item').nth(1).getByRole('checkbox').check();
+    await checkNumberOfCompletedTodosInLocalStorage(page, 1);
+    await page.getByRole('link', { name: 'Completed' }).click();
+    await expect(page.getByTestId('todo-item')).toHaveCount(1);
+  });
+
+  test('should allow me to display all items', async ({ page }) => {
+    await page.getByTestId('todo-item').nth(1).getByRole('checkbox').check();
+    await checkNumberOfCompletedTodosInLocalStorage(page, 1);
+    await page.getByRole('link', { name: 'Active' }).click();
+    await page.getByRole('link', { name: 'Completed' }).click();
+    await page.getByRole('link', { name: 'All' }).click();
+    await expect(page.getByTestId('todo-item')).toHaveCount(3);
+  });
+
+  test('should highlight the currently applied filter', async ({ page }) => {
+    await expect(page.getByRole('link', { name: 'All' })).toHaveClass('selected');
+    
+    //create locators for active and completed links
+    const activeLink = page.getByRole('link', { name: 'Active' });
+    const completedLink = page.getByRole('link', { name: 'Completed' });
+    await activeLink.click();
+
+    // Page change - active items.
+    await expect(activeLink).toHaveClass('selected');
+    await completedLink.click();
+
+    // Page change - completed items.
+    await expect(completedLink).toHaveClass('selected');
+  });
+});
+
+async function createDefaultTodos(page: Page) {
+  // create a new todo locator
+  const newTodo = page.getByPlaceholder('What needs to be done?');
+
+  for (const item of TODO_ITEMS) {
+    await newTodo.fill(item);
+    await newTodo.press('Enter');
+  }
+}
+
+async function checkNumberOfTodosInLocalStorage(page: Page, expected: number) {
+  return await page.waitForFunction(e => {
+    return JSON.parse(localStorage['react-todos']).length === e;
+  }, expected);
+}
+
+async function checkNumberOfCompletedTodosInLocalStorage(page: Page, expected: number) {
+  return await page.waitForFunction(e => {
+    return JSON.parse(localStorage['react-todos']).filter((todo: any) => todo.completed).length === e;
+  }, expected);
+}
+
+async function checkTodosInLocalStorage(page: Page, title: string) {
+  return await page.waitForFunction(t => {
+    return JSON.parse(localStorage['react-todos']).map((todo: any) => todo.title).includes(t);
+  }, title);
+}

tests/guests.spec.ts

@@ -0,0 +1,100 @@
+import { test, expect, Page } from '@playwright/test'
+
+const mockGuestsAPI = ({ page }: { page: Page }) => {
+  page.route('*/**/api/default/guests', async route => {
+    const json = [
+      {
+        "id": "f4a09c28-40ea-4553-90a5-96935a59cac6",
+        "status": "tentative",
+        "name": "Kristofer Rohan DVM",
+        "group": {
+          "id": "2fcb8b22-6b07-4c34-92e3-a2535dbc5b14",
+          "name": "Childhood friends",
+        }
+      },
+      {
+        "id": "bd585c40-0937-4cde-960a-bb23acfd6f18",
+        "status": "invited",
+        "name": "Olevia Quigley Jr.",
+        "group": {
+          "id": "da8edf26-3e1e-4cbb-b985-450c49fffe01",
+          "name": "Work",
+        }
+      },
+    ];
+
+    await route.fulfill({ json })
+  })
+}
+
+const mockGroupsAPI = ({ page }: { page: Page }) => {
+  page.route('*/**/api/default/groups', async route => {
+    const json = [
+      {
+        "id": "ee44ffb9-1147-4842-a378-9eaeb0f0871a",
+        "name": "Pam's family",
+        "icon": "pi pi-users",
+        "parent_id": "cd9645e1-02c6-4fb9-bba6-1a960754b01c",
+        "color": "#ff0000",
+        "total": 3,
+        "considered": 2,
+        "invited": 1,
+        "confirmed": 0,
+        "declined": 0,
+        "tentative": 0
+      },
+      {
+        "id": "c8bda6ca-d8af-4bb8-b2bf-e6ec1c21b1e6",
+        "name": "Pam's work",
+        "icon": "pi pi-desktop",
+        "parent_id": "cd9645e1-02c6-4fb9-bba6-1a960754b01c",
+        "color": "#00ff00",
+        "total": 2,
+        "considered": 0,
+        "invited": 0,
+        "confirmed": 0,
+        "declined": 0,
+        "tentative": 2
+      },
+    ];
+
+    await route.fulfill({ json })
+  })
+}
+
+test('should display the list of guests', async ({ page }) => {
+  await mockGuestsAPI({ page });
+
+  await page.goto('/default/dashboard/guests');
+
+  await expect(page.getByRole('tab', { name: 'Groups' })).toBeVisible();
+  await expect(page.getByRole('tab', { name: 'Guests' })).toBeVisible();
+
+  await expect(page.getByText('There are 2 elements in the list')).toBeVisible();
+
+  await expect(page.getByRole('row').nth(1).getByRole('cell', { name: 'Kristofer Rohan DVM' })).toBeVisible();
+  await expect(page.getByRole('row').nth(1).getByRole('cell', { name: 'Childhood friends' })).toBeVisible();
+  await expect(page.getByRole('row').nth(1).getByRole('cell', { name: 'Tentative' })).toBeVisible();
+  await expect(page.getByRole('row').nth(1).getByRole('button', { name: 'Confirm' })).toBeVisible();
+  await expect(page.getByRole('row').nth(1).getByRole('button', { name: 'Decline' })).toBeVisible();
+
+
+  await expect(page.getByRole('row').nth(2).getByRole('cell', { name: 'Olevia Quigley Jr.' })).toBeVisible();
+  await expect(page.getByRole('row').nth(2).getByRole('cell', { name: 'Work' })).toBeVisible();
+  await expect(page.getByRole('row').nth(2).getByRole('cell', { name: 'Invited' })).toBeVisible();
+  await expect(page.getByRole('row').nth(2).getByRole('button', { name: 'Confirm' })).toBeVisible();
+  await expect(page.getByRole('row').nth(2).getByRole('button', { name: 'Tentative' })).toBeVisible();
+  await expect(page.getByRole('row').nth(2).getByRole('button', { name: 'Decline' })).toBeVisible();
+});
+
+test('should display the list of groups', async ({ page }) => {
+  await mockGroupsAPI({ page });
+
+  await page.goto('/default/dashboard/guests');
+  await page.getByRole('tab', { name: 'Groups' }).click();
+
+  await expect(page.getByText('There are 2 elements in the list')).toBeVisible();
+
+  await expect(page.getByRole('row').nth(1).getByRole('cell', { name: "Pam's family" })).toBeVisible();
+  await expect(page.getByRole('row').nth(2).getByRole('cell', { name: "Pam's work" })).toBeVisible();
+});