Remove some dependencies

Clean project from marketing content
Merge feedback and support dialogs
2026-02-17 21:16:14 +01:00 · 2024-01-18 18:19:11 -05:00 · 2024-01-18 18:11:24 -05:00 · 2024-01-18 15:48:45 -05:00 · 2024-01-18 09:07:47 -05:00 · 2024-01-18 09:02:53 -05:00
54 changed files with 3275 additions and 462 deletions
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@@ -0,0 +1,13 @@
+# These are supported funding model platforms
+
+github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+patreon: # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+otechie: # Replace with a single Otechie username
+lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
+custom: ['https://donate.stripe.com/28o3eh96G7hH8k89Ba']
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,36 @@
+name: CI
+
+on:
+  push:
+    branches: ['main']
+  pull_request:
+    branches: ['main']
+
+jobs:
+  checks:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci --ignore-scripts
+
+      - name: Generate Prisma client
+        run: npx prisma generate
+
+      - name: Check TypeScript types
+        run: npm run check-types
+
+      - name: Check ESLint
+        run: npm run lint
+
+      - name: Check Prettier formatting
+        run: npm run check-formatting
--- a/.gitignore
+++ b/.gitignore
@@ -27,7 +27,7 @@ yarn-error.log*

 # local env files
 .env*.local
-.env
+*.env

 # vercel
 .vercel
--- a/.prettierignore
+++ b/.prettierignore
@@ -0,0 +1 @@
+src/components/ui
--- a/17
+++ b/17
@@ -0,0 +1,17 @@
+FROM node:slim
+
+EXPOSE 3000/tcp
+WORKDIR /usr/app
+COPY ./ ./
+
+SHELL ["/bin/bash", "-c"]
+
+RUN apt update && \
+    apt install openssl -y && \
+    apt clean && \
+    apt autoclean && \
+    apt autoremove && \
+    npm install --ignore-scripts && \
+    npm install -g prisma
+
+ENTRYPOINT ["/bin/bash", "-c", "scripts/image-startup.sh"]
--- a/README.md
+++ b/README.md
@@ -10,12 +10,15 @@ Spliit is a free and open source alternative to Splitwise. I created it back in
 - [x] Create reimbursement expenses
 - [x] Progressive Web App
 - [x] Select all/no participant for expenses
+- [x] Split expenses unevenly [(#6)](https://github.com/scastiel/spliit2/issues/6)
+- [x] Mark a group as favorite [(#29)](https://github.com/scastiel/spliit2/issues/29)
+- [x] Tell the application who you are when opening a group [(#7)](https://github.com/scastiel/spliit2/issues/7)
+- [x] Assign a category to expenses [(#35)](https://github.com/scastiel/spliit2/issues/35)

 ### Possible incoming features

- [ ] Tell the application who you are when opening a group [(#7)](https://github.com/scastiel/spliit2/issues/7)
 - [ ] Ability to create recurring expenses [(#5)](https://github.com/scastiel/spliit2/issues/5)
- [ ] Ability to split expenses unevenly [(#6)](https://github.com/scastiel/spliit2/issues/6)
+- [ ] Import expenses from Splitwise [(#22)](https://github.com/scastiel/spliit2/issues/22)

 ## Stack

@@ -29,14 +32,23 @@ Spliit is a free and open source alternative to Splitwise. I created it back in

 The project is open to contributions. Feel free to open an issue or even a pull-request!

+If you want to contribute financially and help us keep the application free and without ads, you can also [make a small one-time donation](https://donate.stripe.com/28o3eh96G7hH8k89Ba) ❤️.
+
 ## Run locally

 1. Clone the repository (or fork it if you intend to contribute)
 2. `npm install`
-3. Start a PostgreSQL server. You can run `./start-local-db.sh` if you don’t have a server already.
+3. Start a PostgreSQL server. You can run `./scripts/start-local-db.sh` if you don’t have a server already.
 4. Copy the file `.env.example` as `.env`
 5. `npm run dev`

+## Run in a container
+
+1. Run `npm run build-image` to build the docker image from the Dockerfile
+2. Copy the file `container.env.example` as `container.env`
+3. Run `npm run start-container` to start the postgres and the spliit2 containers
+4. You can access the app by browsing to http://localhost:3000
+
 ## License

 MIT, see [LICENSE](./LICENSE).
--- a/components.json
+++ b/components.json
@@ -13,4 +13,4 @@
    "components": "@/components",
    "utils": "@/lib/utils"
  }
-}
+}
--- a/compose.yaml
+++ b/compose.yaml
@@ -0,0 +1,24 @@
+services:
+  app:
+    image: spliit2:latest
+    ports:
+      - 3000:3000
+    env_file:
+      - container.env
+    depends_on:
+      db:
+        condition: service_healthy
+
+  db:
+    image: postgres:latest
+    ports:
+      - 5432:5432
+    env_file:
+      - container.env
+    volumes:
+      - /var/lib/postgresql/data:/var/lib/postgresql/data
+    healthcheck:
+      test: ['CMD-SHELL', 'pg_isready -U postgres']
+      interval: 5s
+      timeout: 5s
+      retries: 5
--- a/container.env.example
+++ b/container.env.example
@@ -0,0 +1,7 @@
+# db
+POSTGRES_PASSWORD=1234
+
+# app
+POSTGRES_PRISMA_URL=postgresql://postgres:${POSTGRES_PASSWORD}@db
+POSTGRES_URL_NON_POOLING=postgresql://postgres:${POSTGRES_PASSWORD}@db
+NEXT_PUBLIC_BASE_URL=http://localhost:3000
--- a/next.config.js
+++ b/next.config.js
@@ -1,5 +1,4 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {}

-const { withPlausibleProxy } = require('next-plausible')
-module.exports = withPlausibleProxy()(nextConfig)
+module.exports = nextConfig
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,22 +10,28 @@
      "hasInstallScript": true,
      "dependencies": {
        "@hookform/resolvers": "^3.3.2",
-        "@prisma/client": "5.6.0",
+        "@prisma/client": "^5.6.0",
        "@radix-ui/react-checkbox": "^1.0.4",
+        "@radix-ui/react-collapsible": "^1.0.3",
+        "@radix-ui/react-dialog": "^1.0.5",
        "@radix-ui/react-dropdown-menu": "^2.0.6",
        "@radix-ui/react-hover-card": "^1.0.7",
        "@radix-ui/react-icons": "^1.3.0",
        "@radix-ui/react-label": "^2.0.2",
        "@radix-ui/react-popover": "^1.0.7",
+        "@radix-ui/react-radio-group": "^1.1.3",
        "@radix-ui/react-select": "^2.0.0",
        "@radix-ui/react-slot": "^1.0.2",
        "@radix-ui/react-tabs": "^1.0.4",
+        "@radix-ui/react-toast": "^1.1.5",
+        "@tailwindcss/typography": "^0.5.10",
        "class-variance-authority": "^0.7.0",
        "clsx": "^2.0.0",
+        "cmdk": "^0.2.0",
+        "dayjs": "^1.11.10",
        "lucide-react": "^0.290.0",
        "nanoid": "^5.0.4",
        "next": "^14.0.4",
-        "next-plausible": "^3.12.0",
        "next-themes": "^0.2.1",
        "next13-progressbar": "^1.1.1",
        "pg": "^8.11.3",
@@ -34,7 +40,9 @@
        "react-hook-form": "^7.47.0",
        "tailwind-merge": "^1.14.0",
        "tailwindcss-animate": "^1.0.7",
+        "ts-pattern": "^5.0.6",
        "uuid": "^9.0.1",
+        "vaul": "^0.8.0",
        "zod": "^3.22.4"
      },
      "devDependencies": {
@@ -627,6 +635,36 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-collapsible": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.0.3.tgz",
+      "integrity": "sha512-UBmVDkmR6IvDsloHVN+3rtx4Mi5TFvylYXpluuv0f37dtaz3H99bp8No0LGXRigVpl3UAT4l9j6bIchh42S/Gg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-collection": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz",
@@ -688,6 +726,42 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.0.5.tgz",
+      "integrity": "sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-focus-guards": "1.0.1",
+        "@radix-ui/react-focus-scope": "1.0.4",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-portal": "1.0.4",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.5"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-direction": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.0.1.tgz",
@@ -1064,6 +1138,38 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-radio-group": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.1.3.tgz",
+      "integrity": "sha512-x+yELayyefNeKeTx4fjK6j99Fs6c4qKm3aY38G3swQVTN6xMpsrbigC0uHs2L//g8q4qR7qOcww8430jJmi2ag==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-roving-focus": "1.0.4",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-use-previous": "1.0.1",
+        "@radix-ui/react-use-size": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-roving-focus": {
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.4.tgz",
@@ -1187,6 +1293,40 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-toast": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toast/-/react-toast-1.1.5.tgz",
+      "integrity": "sha512-fRLn227WHIBRSzuRzGJ8W+5YALxofH23y0MlPLddaIpLpCDqdE0NZlS2NRQDRiptfxDeeCjgFIpexB1/zkxDlw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-collection": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-portal": "1.0.4",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1",
+        "@radix-ui/react-visually-hidden": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-use-callback-ref": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
@@ -1357,6 +1497,32 @@
        "tslib": "^2.4.0"
      }
    },
+    "node_modules/@tailwindcss/typography": {
+      "version": "0.5.10",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.10.tgz",
+      "integrity": "sha512-Pe8BuPJQJd3FfRnm6H0ulKIGoMEQS+Vq01R6M5aCrFB/ccR/shT+0kXLjouGC1gFLm9hopTFN+DMP0pfwRWzPw==",
+      "dependencies": {
+        "lodash.castarray": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.merge": "^4.6.2",
+        "postcss-selector-parser": "6.0.10"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders"
+      }
+    },
+    "node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": {
+      "version": "6.0.10",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
    "node_modules/@total-typescript/ts-reset": {
      "version": "0.5.1",
      "resolved": "https://registry.npmjs.org/@total-typescript/ts-reset/-/ts-reset-0.5.1.tgz",
@@ -2184,6 +2350,252 @@
        "node": ">=6"
      }
    },
+    "node_modules/cmdk": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/cmdk/-/cmdk-0.2.0.tgz",
+      "integrity": "sha512-JQpKvEOb86SnvMZbYaFKYhvzFntWBeSZdyii0rZPhKJj9uwJBxu4DaVYDrRN7r3mPop56oPhRw+JYWTKs66TYw==",
+      "dependencies": {
+        "@radix-ui/react-dialog": "1.0.0",
+        "command-score": "0.1.2"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/primitive": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.0.tgz",
+      "integrity": "sha512-3e7rn8FDMin4CgeL7Z/49smCA3rFYY3Ha2rUQ7HRWFadS5iCRw08ZgVT1LaNTCNqgvrUiyczLflrVrF0SRQtNA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.0.tgz",
+      "integrity": "sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-context": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.0.tgz",
+      "integrity": "sha512-1pVM9RfOQ+n/N5PJK33kRSKsr1glNxomxONs5c49MliinBY6Yw2Q995qfBUUo0/Mbg05B/sGA0gkgPI7kmSHBg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-dialog": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.0.0.tgz",
+      "integrity": "sha512-Yn9YU+QlHYLWwV1XfKiqnGVpWYWk6MeBVM6x/bcoyPvxgjQGoeT35482viLPctTMWoMw0PoHgqfSox7Ig+957Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.0",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-context": "1.0.0",
+        "@radix-ui/react-dismissable-layer": "1.0.0",
+        "@radix-ui/react-focus-guards": "1.0.0",
+        "@radix-ui/react-focus-scope": "1.0.0",
+        "@radix-ui/react-id": "1.0.0",
+        "@radix-ui/react-portal": "1.0.0",
+        "@radix-ui/react-presence": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.0",
+        "@radix-ui/react-slot": "1.0.0",
+        "@radix-ui/react-use-controllable-state": "1.0.0",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.4"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.0.tgz",
+      "integrity": "sha512-n7kDRfx+LB1zLueRDvZ1Pd0bxdJWDUZNQ/GWoxDn2prnuJKRdxsjulejX/ePkOsLi2tTm6P24mDqlMSgQpsT6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.0",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.0",
+        "@radix-ui/react-use-callback-ref": "1.0.0",
+        "@radix-ui/react-use-escape-keydown": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.0.tgz",
+      "integrity": "sha512-UagjDk4ijOAnGu4WMUPj9ahi7/zJJqNZ9ZAiGPp7waUWJO0O1aWXi/udPphI0IUjvrhBsZJGSN66dR2dsueLWQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.0.tgz",
+      "integrity": "sha512-C4SWtsULLGf/2L4oGeIHlvWQx7Rf+7cX/vKOAD2dXW0A1b5QXwi3wWeaEgW+wn+SEVrraMUk05vLU9fZZz5HbQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.0",
+        "@radix-ui/react-use-callback-ref": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-id": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.0.tgz",
+      "integrity": "sha512-Q6iAB/U7Tq3NTolBBQbHTgclPmGWE3OlktGGqrClPozSw4vkQ1DfQAOtzgRPecKsMdJINE05iaoDUG8tRzCBjw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-layout-effect": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-portal": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.0.tgz",
+      "integrity": "sha512-a8qyFO/Xb99d8wQdu4o7qnigNjTPG123uADNecz0eX4usnQEj7o+cG4ZX4zkqq98NYekT7UoEQIjxBNWIFuqTA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-presence": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.0.tgz",
+      "integrity": "sha512-A+6XEvN01NfVWiKu38ybawfHsBjWum42MRPnEuqPsBZ4eV7e/7K321B5VgYMPv3Xx5An6o1/l9ZuDBgmcmWK3w==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-use-layout-effect": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-primitive": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.0.tgz",
+      "integrity": "sha512-EyXe6mnRlHZ8b6f4ilTDrXmkLShICIuOTTj0GX4w1rp+wSxf3+TD05u1UOITC8VsJ2a9nwHvdXtOXEOl0Cw/zQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-slot": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-slot": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.0.tgz",
+      "integrity": "sha512-3mrKauI/tWXo1Ll+gN5dHcxDPdm/Df1ufcDLCecn+pnCIVcdWE7CujXo8QaXOWRJyZyQWWbpB8eFwHzWXlv5mQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.0.tgz",
+      "integrity": "sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.0.tgz",
+      "integrity": "sha512-FohDoZvk3mEXh9AWAVyRTYR4Sq7/gavuofglmiXB2g1aKyboUD4YtgWxKj8O5n+Uak52gXQ4wKz5IFST4vtJHg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-callback-ref": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.0.tgz",
+      "integrity": "sha512-JwfBCUIfhXRxKExgIqGa4CQsiMemo1Xt0W/B4ei3fpzpvPENKpMKQ8mZSB6Acj3ebrAEgi2xiQvcI1PAAodvyg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-callback-ref": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.0.tgz",
+      "integrity": "sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/react-remove-scroll": {
+      "version": "2.5.4",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.4.tgz",
+      "integrity": "sha512-xGVKJJr0SJGQVirVFAUZ2k1QLyO6m+2fy0l8Qawbp5Jgrv3DeLalrfMNBFSlmz5kriGGzsVBtGVnf4pTKIhhWA==",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.3",
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.0",
+        "use-sidecar": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/color-convert": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -2204,6 +2616,11 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/command-score": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/command-score/-/command-score-0.1.2.tgz",
+      "integrity": "sha512-VtDvQpIJBvBatnONUsPzXYFVKQQAhuf3XTNOAsdBxCNO/QCtUUd8LSgjn0GVarBkCad6aJCZfXgrjYbl/KRr7w=="
+    },
    "node_modules/commander": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -2260,6 +2677,11 @@
      "dev": true,
      "license": "BSD-2-Clause"
    },
+    "node_modules/dayjs": {
+      "version": "1.11.10",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
+      "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
+    },
    "node_modules/debug": {
      "version": "4.3.4",
      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -4071,11 +4493,20 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/lodash.castarray": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+      "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q=="
+    },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA=="
+    },
    "node_modules/lodash.merge": {
      "version": "4.6.2",
      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
-      "dev": true,
      "license": "MIT"
    },
    "node_modules/loose-envify": {
@@ -4243,19 +4674,6 @@
        }
      }
    },
-    "node_modules/next-plausible": {
-      "version": "3.12.0",
-      "resolved": "https://registry.npmjs.org/next-plausible/-/next-plausible-3.12.0.tgz",
-      "integrity": "sha512-SSkEqKQ6PgR8fx3sYfIAT69k2xuCUXO5ngkSS19CjxY97lAoZxsfZpYednxB4zo0mHYv87JzhPynrdBPlCBVHg==",
-      "funding": {
-        "url": "https://github.com/4lejandrito/next-plausible?sponsor=1"
-      },
-      "peerDependencies": {
-        "next": "^11.1.0 || ^12.0.0 || ^13.0.0 || ^14.0.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
    "node_modules/next-themes": {
      "version": "0.2.1",
      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.2.1.tgz",
@@ -5749,6 +6167,11 @@
      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
      "license": "Apache-2.0"
    },
+    "node_modules/ts-pattern": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/ts-pattern/-/ts-pattern-5.0.6.tgz",
+      "integrity": "sha512-Y+jOjihlFriWzcBjncPCf2/am+Hgz7LtsWs77pWg5vQQKLQj07oNrJryo/wK2G0ndNaoVn2ownFMeoeAuReu3Q=="
+    },
    "node_modules/tsconfig-paths": {
      "version": "4.2.0",
      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-4.2.0.tgz",
@@ -6000,6 +6423,18 @@
        "uuid": "dist/bin/uuid"
      }
    },
+    "node_modules/vaul": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/vaul/-/vaul-0.8.0.tgz",
+      "integrity": "sha512-9nUU2jIObJvJZxeQU1oVr/syKo5XqbRoOMoTEt0hHlWify4QZFlqTh6QSN/yxoKzNrMeEQzxbc3XC/vkPLOIqw==",
+      "dependencies": {
+        "@radix-ui/react-dialog": "^1.0.4"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
    "node_modules/watchpack": {
      "version": "2.4.0",
      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
--- a/package.json
+++ b/package.json
@@ -7,26 +7,36 @@
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
-    "postinstall": "prisma migrate deploy && prisma generate"
+    "check-types": "tsc --noEmit",
+    "check-formatting": "prettier -c src",
+    "postinstall": "prisma migrate deploy && prisma generate",
+    "build-image": "./scripts/build-image.sh",
+    "start-container": "docker compose --env-file container.env up"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.3.2",
-    "@prisma/client": "5.6.0",
+    "@prisma/client": "^5.6.0",
    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-collapsible": "^1.0.3",
+    "@radix-ui/react-dialog": "^1.0.5",
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-hover-card": "^1.0.7",
    "@radix-ui/react-icons": "^1.3.0",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-radio-group": "^1.1.3",
    "@radix-ui/react-select": "^2.0.0",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-toast": "^1.1.5",
+    "@tailwindcss/typography": "^0.5.10",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
+    "cmdk": "^0.2.0",
+    "dayjs": "^1.11.10",
    "lucide-react": "^0.290.0",
    "nanoid": "^5.0.4",
    "next": "^14.0.4",
-    "next-plausible": "^3.12.0",
    "next-themes": "^0.2.1",
    "next13-progressbar": "^1.1.1",
    "pg": "^8.11.3",
@@ -35,7 +45,9 @@
    "react-hook-form": "^7.47.0",
    "tailwind-merge": "^1.14.0",
    "tailwindcss-animate": "^1.0.7",
+    "ts-pattern": "^5.0.6",
    "uuid": "^9.0.1",
+    "vaul": "^0.8.0",
    "zod": "^3.22.4"
  },
  "devDependencies": {
--- a/prisma/migrations/20231215203936_add_shares_in_expenses/migration.sql
+++ b/prisma/migrations/20231215203936_add_shares_in_expenses/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "ExpensePaidFor" ADD COLUMN     "shares" INTEGER NOT NULL DEFAULT 1;
--- a/prisma/migrations/20231215213409_add_split_mode/migration.sql
+++ b/prisma/migrations/20231215213409_add_split_mode/migration.sql
@@ -0,0 +1,5 @@
+-- CreateEnum
+CREATE TYPE "SplitMode" AS ENUM ('EVENLY', 'BY_SHARES', 'BY_PERCENTAGE', 'BY_AMOUNT');
+
+-- AlterTable
+ALTER TABLE "Expense" ADD COLUMN     "splitMode" "SplitMode" NOT NULL DEFAULT 'EVENLY';
--- a/prisma/migrations/20240108174319_add_expense_date/migration.sql
+++ b/prisma/migrations/20240108174319_add_expense_date/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Expense" ADD COLUMN     "expenseDate" DATE NOT NULL DEFAULT CURRENT_DATE;
--- a/prisma/migrations/20240108194443_add_categories/migration.sql
+++ b/prisma/migrations/20240108194443_add_categories/migration.sql
@@ -0,0 +1,65 @@
+/*
+  Warnings:
+
+  - Added the required column `categoryId` to the `Expense` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- AlterTable
+ALTER TABLE "Expense" ADD COLUMN     "categoryId" INTEGER NOT NULL DEFAULT 0;
+
+-- CreateTable
+CREATE TABLE "Category" (
+    "id" SERIAL NOT NULL,
+    "grouping" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+
+    CONSTRAINT "Category_pkey" PRIMARY KEY ("id")
+);
+
+-- Insert categories
+INSERT INTO "Category" ("id", "grouping", "name") VALUES (0, 'Uncategorized', 'General');
+INSERT INTO "Category" ("id", "grouping", "name") VALUES (1, 'Uncategorized', 'Payment');
+INSERT INTO "Category" ("id", "grouping", "name") VALUES (2, 'Entertainment', 'Entertainment');
+INSERT INTO "Category" ("id", "grouping", "name") VALUES (3, 'Entertainment', 'Games');
+INSERT INTO "Category" ("id", "grouping", "name") VALUES (4, 'Entertainment', 'Movies');
+INSERT INTO "Category" ("id", "grouping", "name") VALUES (5, 'Entertainment', 'Music');
+INSERT INTO "Category" ("id", "grouping", "name") VALUES (6, 'Entertainment', 'Sports');
+INSERT INTO "Category" ("id", "grouping", "name") VALUES (7, 'Food and Drink', 'Food and Drink');
+INSERT INTO "Category" ("id", "grouping", "name") VALUES (8, 'Food and Drink', 'Dining Out');
+INSERT INTO "Category" ("id", "grouping", "name") VALUES (9, 'Food and Drink', 'Groceries');
+INSERT INTO "Category" ("id", "grouping", "name") VALUES (10, 'Food and Drink', 'Liquor');
+INSERT INTO "Category" ("id", "grouping", "name") VALUES (11, 'Home', 'Home');
+INSERT INTO "Category" ("id", "grouping", "name") VALUES (12, 'Home', 'Electronics');
+INSERT INTO "Category" ("id", "grouping", "name") VALUES (13, 'Home', 'Furniture');
+INSERT INTO "Category" ("id", "grouping", "name") VALUES (14, 'Home', 'Household Supplies');
+INSERT INTO "Category" ("id", "grouping", "name") VALUES (15, 'Home', 'Maintenance');
+INSERT INTO "Category" ("id", "grouping", "name") VALUES (16, 'Home', 'Mortgage');
+INSERT INTO "Category" ("id", "grouping", "name") VALUES (17, 'Home', 'Pets');
+INSERT INTO "Category" ("id", "grouping", "name") VALUES (18, 'Home', 'Rent');
+INSERT INTO "Category" ("id", "grouping", "name") VALUES (19, 'Home', 'Services');
+INSERT INTO "Category" ("id", "grouping", "name") VALUES (20, 'Life', 'Childcare');
+INSERT INTO "Category" ("id", "grouping", "name") VALUES (21, 'Life', 'Clothing');
+INSERT INTO "Category" ("id", "grouping", "name") VALUES (22, 'Life', 'Education');
+INSERT INTO "Category" ("id", "grouping", "name") VALUES (23, 'Life', 'Gifts');
+INSERT INTO "Category" ("id", "grouping", "name") VALUES (24, 'Life', 'Insurance');
+INSERT INTO "Category" ("id", "grouping", "name") VALUES (25, 'Life', 'Medical Expenses');
+INSERT INTO "Category" ("id", "grouping", "name") VALUES (26, 'Life', 'Taxes');
+INSERT INTO "Category" ("id", "grouping", "name") VALUES (27, 'Transportation', 'Transportation');
+INSERT INTO "Category" ("id", "grouping", "name") VALUES (28, 'Transportation', 'Bicycle');
+INSERT INTO "Category" ("id", "grouping", "name") VALUES (29, 'Transportation', 'Bus/Train');
+INSERT INTO "Category" ("id", "grouping", "name") VALUES (30, 'Transportation', 'Car');
+INSERT INTO "Category" ("id", "grouping", "name") VALUES (31, 'Transportation', 'Gas/Fuel');
+INSERT INTO "Category" ("id", "grouping", "name") VALUES (32, 'Transportation', 'Hotel');
+INSERT INTO "Category" ("id", "grouping", "name") VALUES (33, 'Transportation', 'Parking');
+INSERT INTO "Category" ("id", "grouping", "name") VALUES (34, 'Transportation', 'Plane');
+INSERT INTO "Category" ("id", "grouping", "name") VALUES (35, 'Transportation', 'Taxi');
+INSERT INTO "Category" ("id", "grouping", "name") VALUES (36, 'Utilities', 'Utilities');
+INSERT INTO "Category" ("id", "grouping", "name") VALUES (37, 'Utilities', 'Cleaning');
+INSERT INTO "Category" ("id", "grouping", "name") VALUES (38, 'Utilities', 'Electricity');
+INSERT INTO "Category" ("id", "grouping", "name") VALUES (39, 'Utilities', 'Heat/Gas');
+INSERT INTO "Category" ("id", "grouping", "name") VALUES (40, 'Utilities', 'Trash');
+INSERT INTO "Category" ("id", "grouping", "name") VALUES (41, 'Utilities', 'TV/Phone/Internet');
+INSERT INTO "Category" ("id", "grouping", "name") VALUES (42, 'Utilities', 'Water');
+
+-- AddForeignKey
+ALTER TABLE "Expense" ADD CONSTRAINT "Expense_categoryId_fkey" FOREIGN KEY ("categoryId") REFERENCES "Category"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -29,24 +29,43 @@ model Participant {
  expensesPaidFor ExpensePaidFor[]
 }

+model Category {
+  id       Int       @id @default(autoincrement())
+  grouping String
+  name     String
+  Expense  Expense[]
+}
+
 model Expense {
  id              String           @id
  group           Group            @relation(fields: [groupId], references: [id], onDelete: Cascade)
+  expenseDate     DateTime         @default(dbgenerated("CURRENT_DATE")) @db.Date
  title           String
+  category        Category?        @relation(fields: [categoryId], references: [id])
+  categoryId      Int              @default(0)
  amount          Int
  paidBy          Participant      @relation(fields: [paidById], references: [id], onDelete: Cascade)
  paidById        String
  paidFor         ExpensePaidFor[]
  groupId         String
  isReimbursement Boolean          @default(false)
+  splitMode       SplitMode        @default(EVENLY)
  createdAt       DateTime         @default(now())
 }

+enum SplitMode {
+  EVENLY
+  BY_SHARES
+  BY_PERCENTAGE
+  BY_AMOUNT
+}
+
 model ExpensePaidFor {
  expense       Expense     @relation(fields: [expenseId], references: [id], onDelete: Cascade)
  participant   Participant @relation(fields: [participantId], references: [id], onDelete: Cascade)
  expenseId     String
  participantId String
+  shares        Int         @default(1)

  @@id([expenseId, participantId])
 }
--- a/scripts/build-image.sh
+++ b/scripts/build-image.sh
@@ -0,0 +1,8 @@
+#!/bin/bash
+
+SPLIIT_APP_NAME=$(node -p -e "require('./package.json').name")
+SPLIIT_VERSION=$(node -p -e "require('./package.json').version")
+
+docker buildx build --no-cache -t ${SPLIIT_APP_NAME}:${SPLIIT_VERSION} -t ${SPLIIT_APP_NAME}:latest .
+
+docker image prune -f
--- a/scripts/image-startup.sh
+++ b/scripts/image-startup.sh
@@ -0,0 +1,5 @@
+#!/bin/bash
+
+prisma migrate deploy
+prisma generate
+npm run dev
--- a/scripts/start-local-db.sh
+++ b/scripts/start-local-db.sh
--- a/src/app/groups/[groupId]/expenses/[expenseId]/edit/page.tsx
+++ b/src/app/groups/[groupId]/expenses/[expenseId]/edit/page.tsx
@@ -1,5 +1,11 @@
 import { ExpenseForm } from '@/components/expense-form'
-import { deleteExpense, getExpense, getGroup, updateExpense } from '@/lib/api'
+import {
+  deleteExpense,
+  getCategories,
+  getExpense,
+  getGroup,
+  updateExpense,
+} from '@/lib/api'
 import { expenseFormSchema } from '@/lib/schemas'
 import { Metadata } from 'next'
 import { notFound, redirect } from 'next/navigation'
@@ -13,6 +19,7 @@ export default async function EditExpensePage({
 }: {
  params: { groupId: string; expenseId: string }
 }) {
+  const categories = await getCategories()
  const group = await getGroup(groupId)
  if (!group) notFound()
  const expense = await getExpense(groupId, expenseId)
@@ -35,6 +42,7 @@ export default async function EditExpensePage({
    <ExpenseForm
      group={group}
      expense={expense}
+      categories={categories}
      onSubmit={updateExpenseAction}
      onDelete={deleteExpenseAction}
    />
--- a/src/app/groups/[groupId]/expenses/active-user-modal.tsx
+++ b/src/app/groups/[groupId]/expenses/active-user-modal.tsx
@@ -0,0 +1,134 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+} from '@/components/ui/drawer'
+import { Label } from '@/components/ui/label'
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
+import { getGroup } from '@/lib/api'
+import { useMediaQuery } from '@/lib/hooks'
+import { cn } from '@/lib/utils'
+import { ComponentProps, useEffect, useState } from 'react'
+
+type Props = {
+  group: NonNullable<Awaited<ReturnType<typeof getGroup>>>
+}
+
+export function ActiveUserModal({ group }: Props) {
+  const [open, setOpen] = useState(false)
+  const isDesktop = useMediaQuery('(min-width: 768px)')
+
+  useEffect(() => {
+    const tempUser = localStorage.getItem(`newGroup-activeUser`)
+    const activeUser = localStorage.getItem(`${group.id}-activeUser`)
+    if (!tempUser && !activeUser) {
+      setOpen(true)
+    }
+  }, [group])
+
+  function updateOpen(open: boolean) {
+    if (!open && !localStorage.getItem(`${group.id}-activeUser`)) {
+      localStorage.setItem(`${group.id}-activeUser`, 'None')
+    }
+    setOpen(open)
+  }
+
+  if (isDesktop) {
+    return (
+      <Dialog open={open} onOpenChange={updateOpen}>
+        <DialogContent className="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>Who are you?</DialogTitle>
+            <DialogDescription>
+              Tell us which participant you are to let us customize how the
+              information is displayed.
+            </DialogDescription>
+          </DialogHeader>
+          <ActiveUserForm group={group} close={() => setOpen(false)} />
+          <DialogFooter className="sm:justify-center">
+            <p className="text-sm text-center text-muted-foreground">
+              This setting can be changed later in the group settings.
+            </p>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    )
+  }
+
+  return (
+    <Drawer open={open} onOpenChange={updateOpen}>
+      <DrawerContent>
+        <DrawerHeader className="text-left">
+          <DrawerTitle>Who are you?</DrawerTitle>
+          <DrawerDescription>
+            Tell us which participant you are to let us customize how the
+            information is displayed.
+          </DrawerDescription>
+        </DrawerHeader>
+        <ActiveUserForm
+          className="px-4"
+          group={group}
+          close={() => setOpen(false)}
+        />
+        <DrawerFooter className="pt-2">
+          <p className="text-sm text-center text-muted-foreground">
+            This setting can be changed later in the group settings.
+          </p>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+}
+
+function ActiveUserForm({
+  group,
+  close,
+  className,
+}: ComponentProps<'form'> & { group: Props['group']; close: () => void }) {
+  const [selected, setSelected] = useState('None')
+
+  return (
+    <form
+      className={cn('grid items-start gap-4', className)}
+      onSubmit={(event) => {
+        event.preventDefault()
+        localStorage.setItem(`${group.id}-activeUser`, selected)
+        close()
+      }}
+    >
+      <RadioGroup defaultValue="none" onValueChange={setSelected}>
+        <div className="flex flex-col gap-4 my-4">
+          <div className="flex items-center space-x-2">
+            <RadioGroupItem value="none" id="none" />
+            <Label htmlFor="none" className="italic font-normal flex-1">
+              I don’t want to select anyone
+            </Label>
+          </div>
+          {group.participants.map((participant) => (
+            <div key={participant.id} className="flex items-center space-x-2">
+              <RadioGroupItem value={participant.id} id={participant.id} />
+              <Label htmlFor={participant.id} className="flex-1">
+                {participant.name}
+              </Label>
+            </div>
+          ))}
+        </div>
+      </RadioGroup>
+      <Button type="submit">Save changes</Button>
+    </form>
+  )
+}
--- a/src/app/groups/[groupId]/expenses/category-icon.tsx
+++ b/src/app/groups/[groupId]/expenses/category-icon.tsx
@@ -0,0 +1,144 @@
+import { Category } from '@prisma/client'
+import {
+  Armchair,
+  Baby,
+  Banknote,
+  Bike,
+  Bus,
+  Car,
+  CarTaxiFront,
+  Cat,
+  Clapperboard,
+  CupSoda,
+  Dices,
+  Dumbbell,
+  Eraser,
+  FerrisWheel,
+  Fuel,
+  Gift,
+  Home,
+  Hotel,
+  Lamp,
+  Landmark,
+  LibraryBig,
+  LucideIcon,
+  LucideProps,
+  Martini,
+  Music,
+  ParkingMeter,
+  Phone,
+  PiggyBank,
+  Plane,
+  Plug,
+  PlugZap,
+  Shirt,
+  ShoppingCart,
+  Stethoscope,
+  ThermometerSun,
+  Train,
+  Trash,
+  Utensils,
+  Wine,
+  Wrench,
+} from 'lucide-react'
+
+export function CategoryIcon({
+  category,
+  ...props
+}: { category: Category | null } & LucideProps) {
+  const Icon = getCategoryIcon(`${category?.grouping}/${category?.name}`)
+  return <Icon {...props} />
+}
+
+function getCategoryIcon(category: string): LucideIcon {
+  switch (category) {
+    case 'Uncategorized/General':
+      return Banknote
+    case 'Uncategorized/Payment':
+      return Banknote
+    case 'Entertainment/Entertainment':
+      return FerrisWheel
+    case 'Entertainment/Games':
+      return Dices
+    case 'Entertainment/Movies':
+      return Clapperboard
+    case 'Entertainment/Music':
+      return Music
+    case 'Entertainment/Sports':
+      return Dumbbell
+    case 'Food and Drink/Food and Drink':
+      return Utensils
+    case 'Food and Drink/Dining Out':
+      return Martini
+    case 'Food and Drink/Groceries':
+      return ShoppingCart
+    case 'Food and Drink/Liquor':
+      return Wine
+    case 'Home/Home':
+      return Home
+    case 'Home/Electronics':
+      return Plug
+    case 'Home/Furniture':
+      return Armchair
+    case 'Home/Household Supplies':
+      return Lamp
+    case 'Home/Maintenance':
+      return Wrench
+    case 'Home/Mortgage':
+      return Landmark
+    case 'Home/Pets':
+      return Cat
+    case 'Home/Rent':
+      return PiggyBank
+    case 'Home/Services':
+      return Wrench
+    case 'Life/Childcare':
+      return Baby
+    case 'Life/Clothing':
+      return Shirt
+    case 'Life/Education':
+      return LibraryBig
+    case 'Life/Gifts':
+      return Gift
+    case 'Life/Insurance':
+      return Landmark
+    case 'Life/Medical Expenses':
+      return Stethoscope
+    case 'Life/Taxes':
+      return Banknote
+    case 'Transportation/Transportation':
+      return Bus
+    case 'Transportation/Bicycle':
+      return Bike
+    case 'Transportation/Bus/Train':
+      return Train
+    case 'Transportation/Car':
+      return Car
+    case 'Transportation/Gas/Fuel':
+      return Fuel
+    case 'Transportation/Hotel':
+      return Hotel
+    case 'Transportation/Parking':
+      return ParkingMeter
+    case 'Transportation/Plane':
+      return Plane
+    case 'Transportation/Taxi':
+      return CarTaxiFront
+    case 'Utilities/Utilities':
+      return Banknote
+    case 'Utilities/Cleaning':
+      return Eraser
+    case 'Utilities/Electricity':
+      return PlugZap
+    case 'Utilities/Heat/Gas':
+      return ThermometerSun
+    case 'Utilities/Trash':
+      return Trash
+    case 'Utilities/TV/Phone/Internet':
+      return Phone
+    case 'Utilities/Water':
+      return CupSoda
+    default:
+      return Banknote
+  }
+}
--- a/src/app/groups/[groupId]/expenses/create/page.tsx
+++ b/src/app/groups/[groupId]/expenses/create/page.tsx
@@ -1,5 +1,5 @@
 import { ExpenseForm } from '@/components/expense-form'
-import { createExpense, getGroup } from '@/lib/api'
+import { createExpense, getCategories, getGroup } from '@/lib/api'
 import { expenseFormSchema } from '@/lib/schemas'
 import { Metadata } from 'next'
 import { notFound, redirect } from 'next/navigation'
@@ -13,6 +13,7 @@ export default async function ExpensePage({
 }: {
  params: { groupId: string }
 }) {
+  const categories = await getCategories()
  const group = await getGroup(groupId)
  if (!group) notFound()

@@ -23,5 +24,11 @@ export default async function ExpensePage({
    redirect(`/groups/${groupId}`)
  }

-  return <ExpenseForm group={group} onSubmit={createExpenseAction} />
+  return (
+    <ExpenseForm
+      group={group}
+      categories={categories}
+      onSubmit={createExpenseAction}
+    />
+  )
 }
--- a/src/app/groups/[groupId]/expenses/expense-list.tsx
+++ b/src/app/groups/[groupId]/expenses/expense-list.tsx
@@ -1,12 +1,14 @@
 'use client'
+import { CategoryIcon } from '@/app/groups/[groupId]/expenses/category-icon'
 import { Button } from '@/components/ui/button'
 import { getGroupExpenses } from '@/lib/api'
 import { cn } from '@/lib/utils'
-import { Participant } from '@prisma/client'
+import { Expense, Participant } from '@prisma/client'
+import dayjs, { type Dayjs } from 'dayjs'
 import { ChevronRight } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
-import { Fragment } from 'react'
+import { Fragment, useEffect } from 'react'

 type Props = {
  expenses: Awaited<ReturnType<typeof getGroupExpenses>>
@@ -15,64 +17,155 @@ type Props = {
  groupId: string
 }

+const EXPENSE_GROUPS = {
+  THIS_WEEK: 'This week',
+  EARLIER_THIS_MONTH: 'Earlier this month',
+  LAST_MONTH: 'Last month',
+  EARLIER_THIS_YEAR: 'Earlier this year',
+  LAST_YEAR: 'Last year',
+  OLDER: 'Older',
+}
+
+function getExpenseGroup(date: Dayjs, today: Dayjs) {
+  if (today.isSame(date, 'week')) {
+    return EXPENSE_GROUPS.THIS_WEEK
+  } else if (today.isSame(date, 'month')) {
+    return EXPENSE_GROUPS.EARLIER_THIS_MONTH
+  } else if (today.subtract(1, 'month').isSame(date, 'month')) {
+    return EXPENSE_GROUPS.LAST_MONTH
+  } else if (today.isSame(date, 'year')) {
+    return EXPENSE_GROUPS.EARLIER_THIS_YEAR
+  } else if (today.subtract(1, 'year').isSame(date, 'year')) {
+    return EXPENSE_GROUPS.LAST_YEAR
+  } else {
+    return EXPENSE_GROUPS.OLDER
+  }
+}
+
+function getGroupedExpensesByDate(
+  expenses: Awaited<ReturnType<typeof getGroupExpenses>>,
+) {
+  const today = dayjs()
+  return expenses.reduce(
+    (result: { [key: string]: Expense[] }, expense: Expense) => {
+      const expenseGroup = getExpenseGroup(dayjs(expense.expenseDate), today)
+      result[expenseGroup] = result[expenseGroup] ?? []
+      result[expenseGroup].push(expense)
+      return result
+    },
+    {},
+  )
+}
+
 export function ExpenseList({
  expenses,
  currency,
  participants,
  groupId,
 }: Props) {
+  useEffect(() => {
+    const activeUser = localStorage.getItem('newGroup-activeUser')
+    const newUser = localStorage.getItem(`${groupId}-newUser`)
+    if (activeUser || newUser) {
+      localStorage.removeItem('newGroup-activeUser')
+      localStorage.removeItem(`${groupId}-newUser`)
+      if (activeUser === 'None') {
+        localStorage.setItem(`${groupId}-activeUser`, 'None')
+      } else {
+        const userId = participants.find(
+          (p) => p.name === (activeUser || newUser),
+        )?.id
+        if (userId) {
+          localStorage.setItem(`${groupId}-activeUser`, userId)
+        }
+      }
+    }
+  }, [groupId, participants])
+
  const getParticipant = (id: string) => participants.find((p) => p.id === id)
  const router = useRouter()

+  const groupedExpensesByDate = getGroupedExpensesByDate(expenses)
+
  return expenses.length > 0 ? (
-    expenses.map((expense) => (
-      <div
-        key={expense.id}
-        className={cn(
-          'border-t flex justify-between pl-6 pr-2 py-4 text-sm cursor-pointer hover:bg-accent',
-          expense.isReimbursement && 'italic',
-        )}
-        onClick={() => {
-          router.push(`/groups/${groupId}/expenses/${expense.id}/edit`)
-        }}
-      >
-        <div>
-          <div className={cn('mb-1', expense.isReimbursement && 'italic')}>
-            {expense.title}
-          </div>
-          <div className="text-xs text-muted-foreground">
-            Paid by <strong>{getParticipant(expense.paidById)?.name}</strong>{' '}
-            for{' '}
-            {expense.paidFor.map((paidFor, index) => (
-              <Fragment key={index}>
-                {index !== 0 && <>, </>}
-                <strong>
-                  {
-                    participants.find((p) => p.id === paidFor.participantId)
-                      ?.name
-                  }
-                </strong>
-              </Fragment>
-            ))}
-          </div>
-        </div>
-        <div className="flex items-center">
+    Object.values(EXPENSE_GROUPS).map((expenseGroup: string) => {
+      const groupExpenses = groupedExpensesByDate[expenseGroup]
+      if (!groupExpenses) return null
+      return (
+        <div key={expenseGroup}>
          <div
-            className={cn(
-              'tabular-nums whitespace-nowrap',
-              expense.isReimbursement ? 'italic' : 'font-bold',
-            )}
+            className={
+              'text-muted-foreground text-xs pl-4 sm:pl-6 py-1 font-semibold sticky top-16 bg-white dark:bg-[#1b1917]'
+            }
          >
-            {currency} {(expense.amount / 100).toFixed(2)}
+            {expenseGroup}
          </div>
-          <Button size="icon" variant="link" className="-my-2" asChild>
-            <Link href={`/groups/${groupId}/expenses/${expense.id}/edit`}>
-              <ChevronRight className="w-4 h-4" />
-            </Link>
-          </Button>
+          {groupExpenses.map((expense: any) => (
+            <div
+              key={expense.id}
+              className={cn(
+                'flex justify-between sm:mx-6 px-4 sm:rounded-lg sm:pr-2 sm:pl-4 py-4 text-sm cursor-pointer hover:bg-accent gap-1 items-stretch',
+                expense.isReimbursement && 'italic',
+              )}
+              onClick={() => {
+                router.push(`/groups/${groupId}/expenses/${expense.id}/edit`)
+              }}
+            >
+              <CategoryIcon
+                category={expense.category}
+                className="w-4 h-4 mr-2 mt-0.5 text-muted-foreground"
+              />
+              <div className="flex-1">
+                <div
+                  className={cn('mb-1', expense.isReimbursement && 'italic')}
+                >
+                  {expense.title}
+                </div>
+                <div className="text-xs text-muted-foreground">
+                  Paid by{' '}
+                  <strong>{getParticipant(expense.paidById)?.name}</strong> for{' '}
+                  {expense.paidFor.map((paidFor: any, index: number) => (
+                    <Fragment key={index}>
+                      {index !== 0 && <>, </>}
+                      <strong>
+                        {
+                          participants.find(
+                            (p) => p.id === paidFor.participantId,
+                          )?.name
+                        }
+                      </strong>
+                    </Fragment>
+                  ))}
+                </div>
+              </div>
+              <div className="flex flex-col justify-between items-end">
+                <div
+                  className={cn(
+                    'tabular-nums whitespace-nowrap',
+                    expense.isReimbursement ? 'italic' : 'font-bold',
+                  )}
+                >
+                  {currency} {(expense.amount / 100).toFixed(2)}
+                </div>
+                <div className="text-xs text-muted-foreground">
+                  {formatDate(expense.expenseDate)}
+                </div>
+              </div>
+              <Button
+                size="icon"
+                variant="link"
+                className="self-center hidden sm:flex"
+                asChild
+              >
+                <Link href={`/groups/${groupId}/expenses/${expense.id}/edit`}>
+                  <ChevronRight className="w-4 h-4" />
+                </Link>
+              </Button>
+            </div>
+          ))}
        </div>
-      </div>
-    ))
+      )
+    })
  ) : (
    <p className="px-6 text-sm py-6">
      Your group doesn’t contain any expense yet.{' '}
@@ -84,3 +177,10 @@ export function ExpenseList({
    </p>
  )
 }
+
+function formatDate(date: Date) {
+  return date.toLocaleDateString('en-US', {
+    dateStyle: 'medium',
+    timeZone: 'UTC',
+  })
+}
--- a/src/app/groups/[groupId]/expenses/export/json/route.ts
+++ b/src/app/groups/[groupId]/expenses/export/json/route.ts
@@ -0,0 +1,39 @@
+import { getPrisma } from '@/lib/prisma'
+import { NextResponse } from 'next/server'
+
+export async function GET(
+  req: Request,
+  { params: { groupId } }: { params: { groupId: string } },
+) {
+  console.log({ groupId })
+  const prisma = await getPrisma()
+  const group = await prisma.group.findUnique({
+    where: { id: groupId },
+    select: {
+      id: true,
+      name: true,
+      currency: true,
+      expenses: {
+        select: {
+          expenseDate: true,
+          title: true,
+          category: { select: { grouping: true, name: true } },
+          amount: true,
+          paidById: true,
+          paidFor: { select: { participantId: true, shares: true } },
+          isReimbursement: true,
+          splitMode: true,
+        },
+      },
+      participants: { select: { id: true, name: true } },
+    },
+  })
+  if (!group)
+    return NextResponse.json({ error: 'Invalid group ID' }, { status: 404 })
+  return NextResponse.json(group, {
+    headers: {
+      'content-type': 'application/json',
+      'content-disposition': `attachment; filename="${group.name}.json"`,
+    },
+  })
+}
--- a/src/app/groups/[groupId]/expenses/page.tsx
+++ b/src/app/groups/[groupId]/expenses/page.tsx
@@ -1,3 +1,4 @@
+import { ActiveUserModal } from '@/app/groups/[groupId]/expenses/active-user-modal'
 import { ExpenseList } from '@/app/groups/[groupId]/expenses/expense-list'
 import { Button } from '@/components/ui/button'
 import {
@@ -9,7 +10,7 @@ import {
 } from '@/components/ui/card'
 import { Skeleton } from '@/components/ui/skeleton'
 import { getGroup, getGroupExpenses } from '@/lib/api'
-import { Plus } from 'lucide-react'
+import { Download, Plus } from 'lucide-react'
 import { Metadata } from 'next'
 import Link from 'next/link'
 import { notFound } from 'next/navigation'
@@ -24,45 +25,60 @@ export default async function GroupExpensesPage({
 }: {
  params: { groupId: string }
 }) {
-  return (
-    <Card className="mb-4">
-      <div className="flex flex-1">
-        <CardHeader className="flex-1">
-          <CardTitle>Expenses</CardTitle>
-          <CardDescription>
-            Here are the expenses that you created for your group.
-          </CardDescription>
-        </CardHeader>
-        <CardHeader>
-          <Button asChild size="icon">
-            <Link href={`/groups/${groupId}/expenses/create`}>
-              <Plus />
-            </Link>
-          </Button>
-        </CardHeader>
-      </div>
+  const group = await getGroup(groupId)
+  if (!group) notFound()

-      <CardContent className="p-0">
-        <Suspense
-          fallback={[0, 1, 2].map((i) => (
-            <div
-              key={i}
-              className="border-t flex justify-between items-center px-6 py-4 text-sm"
-            >
-              <div className="flex flex-col gap-2">
-                <Skeleton className="h-4 w-16 rounded-full" />
-                <Skeleton className="h-4 w-32 rounded-full" />
+  return (
+    <>
+      <Card className="mb-4 rounded-none -mx-4 border-x-0 sm:border-x sm:rounded-lg sm:mx-0">
+        <div className="flex flex-1">
+          <CardHeader className="flex-1 p-4 sm:p-6">
+            <CardTitle>Expenses</CardTitle>
+            <CardDescription>
+              Here are the expenses that you created for your group.
+            </CardDescription>
+          </CardHeader>
+          <CardHeader className="p-4 sm:p-6 flex flex-row space-y-0 gap-2">
+            <Button variant="secondary" size="icon" asChild>
+              <Link
+                href={`/groups/${groupId}/expenses/export/json`}
+                target="_blank"
+              >
+                <Download className="w-4 h-4" />
+              </Link>
+            </Button>
+            <Button asChild size="icon">
+              <Link href={`/groups/${groupId}/expenses/create`}>
+                <Plus className="w-4 h-4" />
+              </Link>
+            </Button>
+          </CardHeader>
+        </div>
+
+        <CardContent className="p-0 pt-2 pb-4 sm:pb-6 flex flex-col gap-4 relative">
+          <Suspense
+            fallback={[0, 1, 2].map((i) => (
+              <div
+                key={i}
+                className="border-t flex justify-between items-center px-6 py-4 text-sm"
+              >
+                <div className="flex flex-col gap-2">
+                  <Skeleton className="h-4 w-16 rounded-full" />
+                  <Skeleton className="h-4 w-32 rounded-full" />
+                </div>
+                <div>
+                  <Skeleton className="h-4 w-16 rounded-full" />
+                </div>
              </div>
-              <div>
-                <Skeleton className="h-4 w-16 rounded-full" />
-              </div>
-            </div>
-          ))}
-        >
-          <Expenses groupId={groupId} />
-        </Suspense>
-      </CardContent>
-    </Card>
+            ))}
+          >
+            <Expenses groupId={groupId} />
+          </Suspense>
+        </CardContent>
+      </Card>
+
+      <ActiveUserModal group={group} />
+    </>
  )
 }

--- a/src/app/groups/actions.ts
+++ b/src/app/groups/actions.ts
@@ -1,5 +1,5 @@
 'use server'
-import { getGroups } from "@/lib/api"
+import { getGroups } from '@/lib/api'

 export async function getGroupsAction(groupIds: string[]) {
  'use server'
--- a/src/app/groups/layout.tsx
+++ b/src/app/groups/layout.tsx
@@ -2,8 +2,10 @@ import { PropsWithChildren } from 'react'

 export default function GroupsLayout({ children }: PropsWithChildren<{}>) {
  return (
-    <main className="flex-1 max-w-screen-md w-full mx-auto px-4 py-6 flex flex-col gap-6">
-      {children}
-    </main>
+    <>
+      <main className="flex-1 max-w-screen-md w-full mx-auto px-4 py-6 flex flex-col gap-6">
+        {children}
+      </main>
+    </>
  )
 }
--- a/src/app/groups/page.tsx
+++ b/src/app/groups/page.tsx
@@ -11,18 +11,19 @@ export const metadata: Metadata = {
 export default async function GroupsPage() {
  return (
    <>
-      <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 items-start">
+      <div className="flex justify-between items-center gap-4">
        <h1 className="font-bold text-2xl">
-          <Link href="/groups">Recently visited groups</Link>
+          <Link href="/groups">My groups</Link>
        </h1>
-        <Button asChild>
+        <Button asChild size="icon">
          <Link href="/groups/create">
-            <Plus className="w-4 h-4 mr-2" />
-            Create group
+            <Plus className="w-4 h-4" />
          </Link>
        </Button>
      </div>
-      <RecentGroupList />
+      <div>
+        <RecentGroupList />
+      </div>
    </>
  )
 }
--- a/src/app/groups/recent-group-list-card.tsx
+++ b/src/app/groups/recent-group-list-card.tsx
@@ -0,0 +1,185 @@
+'use client'
+import { RecentGroupsState } from '@/app/groups/recent-group-list'
+import {
+  RecentGroup,
+  archiveGroup,
+  deleteRecentGroup,
+  getArchivedGroups,
+  getStarredGroups,
+  saveRecentGroup,
+  starGroup,
+  unarchiveGroup,
+  unstarGroup,
+} from '@/app/groups/recent-groups-helpers'
+import { Button } from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { Skeleton } from '@/components/ui/skeleton'
+import { ToastAction } from '@/components/ui/toast'
+import { useToast } from '@/components/ui/use-toast'
+import { StarFilledIcon } from '@radix-ui/react-icons'
+import { Calendar, MoreHorizontal, Star, Users } from 'lucide-react'
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+import { SetStateAction } from 'react'
+
+export function RecentGroupListCard({
+  group,
+  state,
+  setState,
+}: {
+  group: RecentGroup
+  state: RecentGroupsState
+  setState: (state: SetStateAction<RecentGroupsState>) => void
+}) {
+  const router = useRouter()
+  const toast = useToast()
+
+  const details =
+    state.status === 'complete'
+      ? state.groupsDetails.find((d) => d.id === group.id)
+      : null
+
+  if (state.status === 'pending') return null
+
+  const refreshGroupsFromStorage = () =>
+    setState({
+      ...state,
+      starredGroups: getStarredGroups(),
+      archivedGroups: getArchivedGroups(),
+    })
+
+  const isStarred = state.starredGroups.includes(group.id)
+  const isArchived = state.archivedGroups.includes(group.id)
+
+  return (
+    <li key={group.id}>
+      <Button variant="outline" className="h-fit w-full py-3" asChild>
+        <div
+          className="text-base"
+          onClick={() => router.push(`/groups/${group.id}`)}
+        >
+          <div className="w-full flex flex-col gap-1">
+            <div className="text-base flex gap-2 justify-between">
+              <Link
+                href={`/groups/${group.id}`}
+                className="flex-1 overflow-hidden text-ellipsis"
+              >
+                {group.name}
+              </Link>
+              <span className="flex-shrink-0">
+                <Button
+                  size="icon"
+                  variant="ghost"
+                  className="-my-3 -ml-3 -mr-1.5"
+                  onClick={(event) => {
+                    event.stopPropagation()
+                    if (isStarred) {
+                      unstarGroup(group.id)
+                    } else {
+                      starGroup(group.id)
+                      unarchiveGroup(group.id)
+                    }
+                    refreshGroupsFromStorage()
+                  }}
+                >
+                  {isStarred ? (
+                    <StarFilledIcon className="w-4 h-4 text-orange-400" />
+                  ) : (
+                    <Star className="w-4 h-4 text-muted-foreground" />
+                  )}
+                </Button>
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button
+                      size="icon"
+                      variant="ghost"
+                      className="-my-3 -mr-3 -ml-1.5"
+                    >
+                      <MoreHorizontal className="w-4 h-4" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                    <DropdownMenuItem
+                      className="text-destructive"
+                      onClick={(event) => {
+                        event.stopPropagation()
+                        deleteRecentGroup(group)
+                        setState({
+                          ...state,
+                          groups: state.groups.filter((g) => g.id !== group.id),
+                        })
+                        toast.toast({
+                          title: 'Group has been removed',
+                          description:
+                            'The group was removed from your recent groups list.',
+                          action: (
+                            <ToastAction
+                              altText="Undo group removal"
+                              onClick={() => {
+                                saveRecentGroup(group)
+                                setState({
+                                  ...state,
+                                  groups: state.groups,
+                                })
+                              }}
+                            >
+                              Undo
+                            </ToastAction>
+                          ),
+                        })
+                      }}
+                    >
+                      Remove from recent groups
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      onClick={(event) => {
+                        event.stopPropagation()
+                        if (isArchived) {
+                          unarchiveGroup(group.id)
+                        } else {
+                          archiveGroup(group.id)
+                          unstarGroup(group.id)
+                        }
+                        refreshGroupsFromStorage()
+                      }}
+                    >
+                      {isArchived ? <>Unarchive group</> : <>Archive group</>}
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </span>
+            </div>
+            <div className="text-muted-foreground font-normal text-xs">
+              {details ? (
+                <div className="w-full flex items-center justify-between">
+                  <div className="flex items-center">
+                    <Users className="w-3 h-3 inline mr-1" />
+                    <span>{details._count.participants}</span>
+                  </div>
+                  <div className="flex items-center">
+                    <Calendar className="w-3 h-3 inline mx-1" />
+                    <span>
+                      {new Date(details.createdAt).toLocaleDateString('en-US', {
+                        dateStyle: 'medium',
+                      })}
+                    </span>
+                  </div>
+                </div>
+              ) : (
+                <div className="flex justify-between">
+                  <Skeleton className="h-4 w-6 rounded-full" />
+                  <Skeleton className="h-4 w-24 rounded-full" />
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </Button>
+    </li>
+  )
+}
--- a/src/app/groups/recent-group-list.tsx
+++ b/src/app/groups/recent-group-list.tsx
@@ -1,43 +1,77 @@
 'use client'
 import { getGroupsAction } from '@/app/groups/actions'
-import { getRecentGroups } from '@/app/groups/recent-groups-helpers'
+import {
+  RecentGroups,
+  getArchivedGroups,
+  getRecentGroups,
+  getStarredGroups,
+} from '@/app/groups/recent-groups-helpers'
 import { Button } from '@/components/ui/button'
-import { Skeleton } from '@/components/ui/skeleton'
 import { getGroups } from '@/lib/api'
-import { Calendar, Loader2, Users } from 'lucide-react'
+import { Loader2 } from 'lucide-react'
 import Link from 'next/link'
-import { useEffect, useState } from 'react'
-import { z } from 'zod'
+import { SetStateAction, useEffect, useState } from 'react'
+import { RecentGroupListCard } from './recent-group-list-card'

-const recentGroupsSchema = z.array(
-  z.object({
-    id: z.string().min(1),
-    name: z.string(),
-  }),
-)
-type RecentGroups = z.infer<typeof recentGroupsSchema>
-
-type State =
+export type RecentGroupsState =
  | { status: 'pending' }
-  | { status: 'partial'; groups: RecentGroups }
+  | {
+      status: 'partial'
+      groups: RecentGroups
+      starredGroups: string[]
+      archivedGroups: string[]
+    }
  | {
      status: 'complete'
      groups: RecentGroups
      groupsDetails: Awaited<ReturnType<typeof getGroups>>
+      starredGroups: string[]
+      archivedGroups: string[]
    }

-type Props = {
-  getGroupsAction: (groupIds: string[]) => ReturnType<typeof getGroups>
+function sortGroups(
+  state: RecentGroupsState & { status: 'complete' | 'partial' },
+) {
+  const starredGroupInfo = []
+  const groupInfo = []
+  const archivedGroupInfo = []
+  for (const group of state.groups) {
+    if (state.starredGroups.includes(group.id)) {
+      starredGroupInfo.push(group)
+    } else if (state.archivedGroups.includes(group.id)) {
+      archivedGroupInfo.push(group)
+    } else {
+      groupInfo.push(group)
+    }
+  }
+  return {
+    starredGroupInfo,
+    groupInfo,
+    archivedGroupInfo,
+  }
 }

 export function RecentGroupList() {
-  const [state, setState] = useState<State>({ status: 'pending' })
+  const [state, setState] = useState<RecentGroupsState>({ status: 'pending' })

  useEffect(() => {
    const groupsInStorage = getRecentGroups()
-    setState({ status: 'partial', groups: groupsInStorage })
+    const starredGroups = getStarredGroups()
+    const archivedGroups = getArchivedGroups()
+    setState({
+      status: 'partial',
+      groups: groupsInStorage,
+      starredGroups,
+      archivedGroups,
+    })
    getGroupsAction(groupsInStorage.map((g) => g.id)).then((groupsDetails) => {
-      setState({ status: 'complete', groups: groupsInStorage, groupsDetails })
+      setState({
+        status: 'complete',
+        groups: groupsInStorage,
+        groupsDetails,
+        starredGroups,
+        archivedGroups,
+      })
    })
  }, [])

@@ -64,51 +98,63 @@ export function RecentGroupList() {
    )
  }

+  const { starredGroupInfo, groupInfo, archivedGroupInfo } = sortGroups(state)
+
+  return (
+    <>
+      {starredGroupInfo.length > 0 && (
+        <>
+          <h2 className="mb-2">Starred groups</h2>
+          <GroupList
+            groups={starredGroupInfo}
+            state={state}
+            setState={setState}
+          />
+        </>
+      )}
+
+      {groupInfo.length > 0 && (
+        <>
+          <h2 className="mt-6 mb-2">Recent groups</h2>
+          <GroupList groups={groupInfo} state={state} setState={setState} />
+        </>
+      )}
+
+      {archivedGroupInfo.length > 0 && (
+        <>
+          <h2 className="mt-6 mb-2 opacity-50">Archived groups</h2>
+          <div className="opacity-50">
+            <GroupList
+              groups={archivedGroupInfo}
+              state={state}
+              setState={setState}
+            />
+          </div>
+        </>
+      )}
+    </>
+  )
+}
+
+function GroupList({
+  groups,
+  state,
+  setState,
+}: {
+  groups: RecentGroups
+  state: RecentGroupsState
+  setState: (state: SetStateAction<RecentGroupsState>) => void
+}) {
  return (
    <ul className="grid grid-cols-1 gap-2 sm:grid-cols-3">
-      {state.groups.map((group) => {
-        const details =
-          state.status === 'complete'
-            ? state.groupsDetails.find((d) => d.id === group.id)
-            : null
-        return (
-          <li key={group.id}>
-            <Button variant="outline" className="h-fit w-full py-3" asChild>
-              <Link href={`/groups/${group.id}`} className="text-base">
-                <div className="w-full flex flex-col gap-1">
-                  <div className="text-base">{group.name}</div>
-                  <div className="text-muted-foreground font-normal text-xs">
-                    {details ? (
-                      <div className="w-full flex items-center justify-between">
-                        <div className="flex items-center">
-                          <Users className="w-3 h-3 inline mr-1" />
-                          <span>{details._count.participants}</span>
-                        </div>
-                        <div className="flex items-center">
-                          <Calendar className="w-3 h-3 inline mx-1" />
-                          <span>
-                            {new Date(details.createdAt).toLocaleDateString(
-                              'en-US',
-                              {
-                                dateStyle: 'medium',
-                              },
-                            )}
-                          </span>
-                        </div>
-                      </div>
-                    ) : (
-                      <div className="flex justify-between">
-                        <Skeleton className="h-4 w-6 rounded-full" />
-                        <Skeleton className="h-4 w-24 rounded-full" />
-                      </div>
-                    )}
-                  </div>
-                </div>
-              </Link>
-            </Button>
-          </li>
-        )
-      })}
+      {groups.map((group) => (
+        <RecentGroupListCard
+          key={group.id}
+          group={group}
+          state={state}
+          setState={setState}
+        />
+      ))}
    </ul>
  )
 }
--- a/src/app/groups/recent-groups-helpers.ts
+++ b/src/app/groups/recent-groups-helpers.ts
@@ -7,10 +7,15 @@ export const recentGroupsSchema = z.array(
  }),
 )

+export const starredGroupsSchema = z.array(z.string())
+export const archivedGroupsSchema = z.array(z.string())
+
 export type RecentGroups = z.infer<typeof recentGroupsSchema>
 export type RecentGroup = RecentGroups[number]

 const STORAGE_KEY = 'recentGroups'
+const STARRED_GROUPS_STORAGE_KEY = 'starredGroups'
+const ARCHIVED_GROUPS_STORAGE_KEY = 'archivedGroups'

 export function getRecentGroups() {
  const groupsInStorageJson = localStorage.getItem(STORAGE_KEY)
@@ -28,3 +33,61 @@ export function saveRecentGroup(group: RecentGroup) {
    JSON.stringify([group, ...recentGroups.filter((rg) => rg.id !== group.id)]),
  )
 }
+
+export function deleteRecentGroup(group: RecentGroup) {
+  const recentGroups = getRecentGroups()
+  localStorage.setItem(
+    STORAGE_KEY,
+    JSON.stringify(recentGroups.filter((rg) => rg.id !== group.id)),
+  )
+}
+
+export function getStarredGroups() {
+  const starredGroupsJson = localStorage.getItem(STARRED_GROUPS_STORAGE_KEY)
+  const starredGroupsRaw = starredGroupsJson
+    ? JSON.parse(starredGroupsJson)
+    : []
+  const parseResult = starredGroupsSchema.safeParse(starredGroupsRaw)
+  return parseResult.success ? parseResult.data : []
+}
+
+export function starGroup(groupId: string) {
+  const starredGroups = getStarredGroups()
+  localStorage.setItem(
+    STARRED_GROUPS_STORAGE_KEY,
+    JSON.stringify([...starredGroups, groupId]),
+  )
+}
+
+export function unstarGroup(groupId: string) {
+  const starredGroups = getStarredGroups()
+  localStorage.setItem(
+    STARRED_GROUPS_STORAGE_KEY,
+    JSON.stringify(starredGroups.filter((g) => g !== groupId)),
+  )
+}
+
+export function getArchivedGroups() {
+  const archivedGroupsJson = localStorage.getItem(ARCHIVED_GROUPS_STORAGE_KEY)
+  const archivedGroupsRaw = archivedGroupsJson
+    ? JSON.parse(archivedGroupsJson)
+    : []
+  const parseResult = archivedGroupsSchema.safeParse(archivedGroupsRaw)
+  return parseResult.success ? parseResult.data : []
+}
+
+export function archiveGroup(groupId: string) {
+  const archivedGroups = getArchivedGroups()
+  localStorage.setItem(
+    ARCHIVED_GROUPS_STORAGE_KEY,
+    JSON.stringify([...archivedGroups, groupId]),
+  )
+}
+
+export function unarchiveGroup(groupId: string) {
+  const archivedGroups = getArchivedGroups()
+  localStorage.setItem(
+    ARCHIVED_GROUPS_STORAGE_KEY,
+    JSON.stringify(archivedGroups.filter((g) => g !== groupId)),
+  )
+}
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,9 +2,9 @@ import { ProgressBar } from '@/components/progress-bar'
 import { ThemeProvider } from '@/components/theme-provider'
 import { ThemeToggle } from '@/components/theme-toggle'
 import { Button } from '@/components/ui/button'
+import { Toaster } from '@/components/ui/toaster'
 import { env } from '@/lib/env'
 import type { Metadata, Viewport } from 'next'
-import PlausibleProvider from 'next-plausible'
 import Image from 'next/image'
 import Link from 'next/link'
 import './globals.css'
@@ -64,9 +64,6 @@ export default function RootLayout({
 }) {
  return (
    <html lang="en" suppressHydrationWarning>
-      {env.PLAUSIBLE_DOMAIN && (
-        <PlausibleProvider domain={env.PLAUSIBLE_DOMAIN} trackOutboundLinks />
-      )}
      <body className="pt-16 min-h-[100dvh] flex flex-col items-stretch bg-slate-50 bg-opacity-30 dark:bg-background">
        <ThemeProvider
          attribute="class"
@@ -75,7 +72,7 @@ export default function RootLayout({
          disableTransitionOnChange
        >
          <ProgressBar />
-          <header className="fixed top-0 left-0 right-0 h-16 flex justify-between bg-white dark:bg-gray-950 bg-opacity-50 dark:bg-opacity-50 p-2 border-b backdrop-blur-sm">
+          <header className="fixed top-0 left-0 right-0 h-16 flex justify-between bg-white dark:bg-gray-950 bg-opacity-50 dark:bg-opacity-50 p-2 border-b backdrop-blur-sm z-50">
            <Link
              className="flex items-center gap-2 hover:scale-105 transition-transform"
              href="/"
@@ -108,30 +105,41 @@ export default function RootLayout({
            </div>
          </header>

-          {children}
+          <div className="flex-1 flex flex-col">{children}</div>

-          <footer className="sm:p-8 md:p-16 sm:mt-16 sm:text-sm md:text-base md:mt-32 bg-slate-50 dark:bg-card border-t p-6 mt-8 flex flex-col space-y-2 text-xs [&_a]:underline">
-            <div className="sm:text-lg font-semibold text-base flex space-x-2 items-center">
-              <Link className="flex items-center gap-2" href="/">
-                <Image
-                  src="/logo-with-text.png"
-                  className="m-1 h-auto"
-                  width={(35 * 522) / 180}
-                  height={35}
-                  alt="Spliit"
-                />
-              </Link>
-            </div>
-            <div className="flex flex-col space-y a--no-underline-text-white">
-              <span>Made in Montréal, Québec 🇨🇦</span>
-              <span>
-                Built by{' '}
-                <a href="https://scastiel.dev" target="_blank" rel="noopener">
-                  Sebastien Castiel
-                </a>
-              </span>
+          <footer className="sm:p-8 md:p-16 sm:mt-16 sm:text-sm md:text-base md:mt-32 bg-slate-50 dark:bg-card border-t p-6 mt-8 flex flex-col sm:flex-row sm:justify-between gap-4 text-xs [&_a]:underline">
+            <div className="flex flex-col space-y-2">
+              <div className="sm:text-lg font-semibold text-base flex space-x-2 items-center">
+                <Link className="flex items-center gap-2" href="/">
+                  <Image
+                    src="/logo-with-text.png"
+                    className="m-1 h-auto"
+                    width={(35 * 522) / 180}
+                    height={35}
+                    alt="Spliit"
+                  />
+                </Link>
+              </div>
+              <div className="flex flex-col space-y a--no-underline-text-white">
+                <span>Made in Montréal, Québec 🇨🇦</span>
+                <span>
+                  Built by{' '}
+                  <a href="https://scastiel.dev" target="_blank" rel="noopener">
+                    Sebastien Castiel
+                  </a>{' '}
+                  and{' '}
+                  <a
+                    href="https://github.com/scastiel/spliit2/graphs/contributors"
+                    target="_blank"
+                    rel="noopener"
+                  >
+                    contributors
+                  </a>
+                </span>
+              </div>
            </div>
          </footer>
+          <Toaster />
        </ThemeProvider>
      </body>
    </html>
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,17 +1,11 @@
 import { Button } from '@/components/ui/button'
-import {
-  BarChartHorizontalBig,
-  CircleDollarSign,
-  Github,
-  List,
-  LucideIcon,
-  Share,
-  ShieldX,
-  Users,
-} from 'lucide-react'
+import { Github, LucideIcon } from 'lucide-react'
 import Link from 'next/link'
 import { ReactNode } from 'react'

+// FIX for https://github.com/vercel/next.js/issues/58615
+export const dynamic = 'force-dynamic'
+
 export default function HomePage() {
  return (
    <main>
@@ -22,91 +16,18 @@ export default function HomePage() {
            & <strong>Family</strong>
          </h1>
          <p className="max-w-[42rem] leading-normal text-muted-foreground sm:text-xl sm:leading-8">
-            No ads. No account. <br className="sm:hidden" /> Open Source.
-            Forever Free.
+            Welcome to your new <strong>Spliit</strong> instance! <br />
+            Customize this page by editing <em>src/app/page.tsx</em>.
          </p>
          <div className="flex gap-2">
-            <Button asChild size="lg">
-              <Link
-                className="inline-flex items-center justify-center text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background bg-primary text-primary-foreground hover:bg-primary/90 h-11 px-8 rounded-md"
-                href="/groups/create"
-              >
-                Create a group
-              </Link>
+            <Button asChild>
+              <Link href="/groups">Go to groups</Link>
            </Button>
-          </div>
-        </div>
-      </section>
-
-      <section className="bg-slate-50 dark:bg-card py-16 md:py-24 lg:py-32">
-        <div className="p-4 flex mx-auto max-w-screen-md flex-col items-center text-center">
-          <h2 className="font-bold text-3xl leading-[1.1] sm:text-3xl md:text-6xl">
-            Features
-          </h2>
-          <p
-            className="mt-2 md:mt-3 leading-normal text-muted-foreground sm:text-lg sm:leading-7"
-            style={{ textWrap: 'balance' } as any}
-          >
-            Spliit is a minimalist application to track and share expenses with
-            your friends and family.
-          </p>
-          <div className="mt-8 md:mt-6 w-full grid grid-cols-2 sm:grid-cols-3 gap-2 sm:gap-4 text-left">
-            <Feature
-              Icon={Users}
-              name="Groups"
-              description="Create a group for a travel, an event, a gift…"
-            />
-            <Feature
-              Icon={List}
-              name="Expenses"
-              description="Create and list expenses in your group."
-            />
-            <Feature
-              Icon={Share}
-              name="Share"
-              description="Send the group link to participants."
-            />
-            <Feature
-              Icon={BarChartHorizontalBig}
-              name="Balances"
-              description="Visualize how much each participant spent."
-            />
-            <Feature
-              Icon={CircleDollarSign}
-              name="Reimbursements"
-              description="Optimize money transfers between participants."
-            />
-            <Feature
-              Icon={ShieldX}
-              name="No ads"
-              description="No account. No limitation. No problem."
-            />
-          </div>
-        </div>
-      </section>
-
-      <section className="py-16 md:py-24 lg:py-32">
-        <div className="container flex max-w-screen-md flex-col items-center text-center">
-          <h2 className="font-bold text-3xl leading-[1.1] sm:text-3xl md:text-6xl">
-            Proudly Open Source
-          </h2>
-          <p
-            className="mt-2 leading-normal text-muted-foreground sm:text-lg sm:leading-7"
-            style={{ textWrap: 'balance' } as any}
-          >
-            Spliit is open source and powered by open source software. Feel free
-            to contribute!
-          </p>
-          <div className="mt-4 md:mt-6">
-            <Button asChild variant="secondary" size="lg">
-              <a
-                target="_blank"
-                rel="noreferrer"
-                href="https://github.com/scastiel/spliit2"
-              >
+            <Button asChild variant="secondary">
+              <Link href="https://github.com/spliit-app/spliit">
                <Github className="w-4 h-4 mr-2" />
                GitHub
-              </a>
+              </Link>
            </Button>
          </div>
        </div>
--- a/src/components/category-selector.tsx
+++ b/src/components/category-selector.tsx
@@ -0,0 +1,152 @@
+import { ChevronDown } from 'lucide-react'
+
+import { CategoryIcon } from '@/app/groups/[groupId]/expenses/category-icon'
+import { Button, ButtonProps } from '@/components/ui/button'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+} from '@/components/ui/command'
+import { Drawer, DrawerContent, DrawerTrigger } from '@/components/ui/drawer'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover'
+import { useMediaQuery } from '@/lib/hooks'
+import { Category } from '@prisma/client'
+import { forwardRef, useState } from 'react'
+
+type Props = {
+  categories: Category[]
+  onValueChange: (categoryId: Category['id']) => void
+  defaultValue: Category['id']
+}
+
+export function CategorySelector({
+  categories,
+  onValueChange,
+  defaultValue,
+}: Props) {
+  const [open, setOpen] = useState(false)
+  const [value, setValue] = useState<number>(defaultValue)
+  const isDesktop = useMediaQuery('(min-width: 768px)')
+
+  const selectedCategory =
+    categories.find((category) => category.id === value) ?? categories[0]
+
+  if (isDesktop) {
+    return (
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <CategoryButton category={selectedCategory} open={open} />
+        </PopoverTrigger>
+        <PopoverContent className="p-0" align="start">
+          <CategoryCommand
+            categories={categories}
+            onValueChange={(id) => {
+              setValue(id)
+              onValueChange(id)
+              setOpen(false)
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+    )
+  }
+
+  return (
+    <Drawer open={open} onOpenChange={setOpen}>
+      <DrawerTrigger asChild>
+        <CategoryButton category={selectedCategory} open={open} />
+      </DrawerTrigger>
+      <DrawerContent className="p-0">
+        <CategoryCommand
+          categories={categories}
+          onValueChange={(id) => {
+            setValue(id)
+            onValueChange(id)
+            setOpen(false)
+          }}
+        />
+      </DrawerContent>
+    </Drawer>
+  )
+}
+
+function CategoryCommand({
+  categories,
+  onValueChange,
+}: {
+  categories: Category[]
+  onValueChange: (categoryId: Category['id']) => void
+}) {
+  const categoriesByGroup = categories.reduce<Record<string, Category[]>>(
+    (acc, category) => ({
+      ...acc,
+      [category.grouping]: [...(acc[category.grouping] ?? []), category],
+    }),
+    {},
+  )
+
+  return (
+    <Command>
+      <CommandInput placeholder="Search category..." className="text-base" />
+      <CommandEmpty>No category found.</CommandEmpty>
+      <div className="w-full max-h-[300px] overflow-y-auto">
+        {Object.entries(categoriesByGroup).map(
+          ([group, groupCategories], index) => (
+            <CommandGroup key={index} heading={group}>
+              {groupCategories.map((category) => (
+                <CommandItem
+                  key={category.id}
+                  value={`${category.id} ${category.grouping} ${category.name}`}
+                  onSelect={(currentValue) => {
+                    const id = Number(currentValue.split(' ')[0])
+                    onValueChange(id)
+                  }}
+                >
+                  <CategoryLabel category={category} />
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          ),
+        )}
+      </div>
+    </Command>
+  )
+}
+
+type CategoryButtonProps = {
+  category: Category
+  open: boolean
+}
+const CategoryButton = forwardRef<HTMLButtonElement, CategoryButtonProps>(
+  ({ category, open, ...props }: ButtonProps & CategoryButtonProps, ref) => {
+    return (
+      <Button
+        variant="outline"
+        role="combobox"
+        aria-expanded={open}
+        className="flex w-full justify-between"
+        ref={ref}
+        {...props}
+      >
+        <CategoryLabel category={category} />
+        <ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+      </Button>
+    )
+  },
+)
+CategoryButton.displayName = 'CategoryButton'
+
+function CategoryLabel({ category }: { category: Category }) {
+  return (
+    <div className="flex items-center gap-3">
+      <CategoryIcon category={category} className="w-4 h-4" />
+      {category.name}
+    </div>
+  )
+}
--- a/src/components/expense-form.tsx
+++ b/src/components/expense-form.tsx
@@ -1,15 +1,21 @@
 'use client'
 import { AsyncButton } from '@/components/async-button'
+import { CategorySelector } from '@/components/category-selector'
 import { SubmitButton } from '@/components/submit-button'
 import { Button } from '@/components/ui/button'
 import {
  Card,
  CardContent,
-  CardFooter,
+  CardDescription,
  CardHeader,
  CardTitle,
 } from '@/components/ui/card'
 import { Checkbox } from '@/components/ui/checkbox'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/ui/collapsible'
 import {
  Form,
  FormControl,
@@ -27,43 +33,84 @@ import {
  SelectTrigger,
  SelectValue,
 } from '@/components/ui/select'
-import { getExpense, getGroup } from '@/lib/api'
+import { getCategories, getExpense, getGroup } from '@/lib/api'
 import { ExpenseFormValues, expenseFormSchema } from '@/lib/schemas'
+import { cn } from '@/lib/utils'
 import { zodResolver } from '@hookform/resolvers/zod'
+import { Save, Trash2 } from 'lucide-react'
 import { useSearchParams } from 'next/navigation'
 import { useForm } from 'react-hook-form'
+import { match } from 'ts-pattern'

 export type Props = {
  group: NonNullable<Awaited<ReturnType<typeof getGroup>>>
  expense?: NonNullable<Awaited<ReturnType<typeof getExpense>>>
+  categories: NonNullable<Awaited<ReturnType<typeof getCategories>>>
  onSubmit: (values: ExpenseFormValues) => Promise<void>
  onDelete?: () => Promise<void>
 }

-export function ExpenseForm({ group, expense, onSubmit, onDelete }: Props) {
+export function ExpenseForm({
+  group,
+  expense,
+  categories,
+  onSubmit,
+  onDelete,
+}: Props) {
  const isCreate = expense === undefined
  const searchParams = useSearchParams()
+  const getSelectedPayer = (field?: { value: string }) => {
+    if (isCreate && typeof window !== 'undefined') {
+      const activeUser = localStorage.getItem(`${group.id}-activeUser`)
+      if (activeUser && activeUser !== 'None') {
+        return activeUser
+      }
+    }
+    return field?.value
+  }
  const form = useForm<ExpenseFormValues>({
    resolver: zodResolver(expenseFormSchema),
    defaultValues: expense
      ? {
          title: expense.title,
+          expenseDate: expense.expenseDate ?? new Date(),
          amount: String(expense.amount / 100) as unknown as number, // hack
+          category: expense.categoryId,
          paidBy: expense.paidById,
-          paidFor: expense.paidFor.map(({ participantId }) => participantId),
+          paidFor: expense.paidFor.map(({ participantId, shares }) => ({
+            participant: participantId,
+            shares: String(shares / 100) as unknown as number,
+          })),
+          splitMode: expense.splitMode,
          isReimbursement: expense.isReimbursement,
        }
      : searchParams.get('reimbursement')
      ? {
          title: 'Reimbursement',
+          expenseDate: new Date(),
          amount: String(
            (Number(searchParams.get('amount')) || 0) / 100,
          ) as unknown as number, // hack
+          category: 1, // category with Id 1 is Payment
          paidBy: searchParams.get('from') ?? undefined,
-          paidFor: [searchParams.get('to') ?? undefined],
+          paidFor: [
+            searchParams.get('to')
+              ? { participant: searchParams.get('to')!, shares: 1 }
+              : undefined,
+          ],
          isReimbursement: true,
+          splitMode: 'EVENLY',
        }
-      : { title: '', amount: 0, paidFor: [], isReimbursement: false },
+      : {
+          title: '',
+          expenseDate: new Date(),
+          amount: 0,
+          category: 0, // category with Id 0 is General
+          paidFor: [],
+          paidBy: getSelectedPayer(),
+          isReimbursement: false,
+          splitMode: 'EVENLY',
+        },
  })

  return (
@@ -75,12 +122,12 @@ export function ExpenseForm({ group, expense, onSubmit, onDelete }: Props) {
              {isCreate ? <>Create expense</> : <>Edit expense</>}
            </CardTitle>
          </CardHeader>
-          <CardContent className="grid grid-cols-1 sm:grid-cols-2 gap-6">
+          <CardContent className="grid sm:grid-cols-2 gap-6">
            <FormField
              control={form.control}
              name="title"
              render={({ field }) => (
-                <FormItem className="order-1">
+                <FormItem className="">
                  <FormLabel>Expense title</FormLabel>
                  <FormControl>
                    <Input
@@ -99,27 +146,22 @@ export function ExpenseForm({ group, expense, onSubmit, onDelete }: Props) {

            <FormField
              control={form.control}
-              name="paidBy"
+              name="expenseDate"
              render={({ field }) => (
-                <FormItem className="order-3 sm:order-2">
-                  <FormLabel>Paid by</FormLabel>
-                  <Select
-                    onValueChange={field.onChange}
-                    defaultValue={field.value}
-                  >
-                    <SelectTrigger>
-                      <SelectValue placeholder="Select a participant" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {group.participants.map(({ id, name }) => (
-                        <SelectItem key={id} value={id}>
-                          {name}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
+                <FormItem className="sm:order-1">
+                  <FormLabel>Expense date</FormLabel>
+                  <FormControl>
+                    <Input
+                      className="date-base"
+                      type="date"
+                      defaultValue={formatDate(field.value)}
+                      onChange={(event) => {
+                        return field.onChange(new Date(event.target.value))
+                      }}
+                    />
+                  </FormControl>
                  <FormDescription>
-                    Select the participant who paid the expense.
+                    Enter the date the expense was made.
                  </FormDescription>
                  <FormMessage />
                </FormItem>
@@ -130,7 +172,7 @@ export function ExpenseForm({ group, expense, onSubmit, onDelete }: Props) {
              control={form.control}
              name="amount"
              render={({ field }) => (
-                <FormItem className="order-2 sm:order-3">
+                <FormItem className="sm:order-3">
                  <FormLabel>Amount</FormLabel>
                  <div className="flex items-baseline gap-2">
                    <span>{group.currency}</span>
@@ -168,44 +210,101 @@ export function ExpenseForm({ group, expense, onSubmit, onDelete }: Props) {
              )}
            />

+            <FormField
+              control={form.control}
+              name="category"
+              render={({ field }) => (
+                <FormItem className="order-3 sm:order-2">
+                  <FormLabel>Category</FormLabel>
+                  <CategorySelector
+                    categories={categories}
+                    defaultValue={field.value}
+                    onValueChange={field.onChange}
+                  />
+                  <FormDescription>
+                    Select the expense category.
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="paidBy"
+              render={({ field }) => (
+                <FormItem className="sm:order-5">
+                  <FormLabel>Paid by</FormLabel>
+                  <Select
+                    onValueChange={field.onChange}
+                    defaultValue={getSelectedPayer(field)}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select a participant" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {group.participants.map(({ id, name }) => (
+                        <SelectItem key={id} value={id}>
+                          {name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <FormDescription>
+                    Select the participant who paid the expense.
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </CardContent>
+        </Card>
+
+        <Card className="mt-4">
+          <CardHeader>
+            <CardTitle className="flex justify-between">
+              <span>Paid for</span>
+              <Button
+                variant="link"
+                type="button"
+                className="-my-2 -mx-4"
+                onClick={() => {
+                  const paidFor = form.getValues().paidFor
+                  const allSelected =
+                    paidFor.length === group.participants.length
+                  const newPaidFor = allSelected
+                    ? []
+                    : group.participants.map((p) => ({
+                        participant: p.id,
+                        shares:
+                          paidFor.find((pfor) => pfor.participant === p.id)
+                            ?.shares ?? ('1' as unknown as number),
+                      }))
+                  form.setValue('paidFor', newPaidFor, {
+                    shouldDirty: true,
+                    shouldTouch: true,
+                    shouldValidate: true,
+                  })
+                }}
+              >
+                {form.getValues().paidFor.length ===
+                group.participants.length ? (
+                  <>Select none</>
+                ) : (
+                  <>Select all</>
+                )}
+              </Button>
+            </CardTitle>
+            <CardDescription>
+              Select who the expense was paid for.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
            <FormField
              control={form.control}
              name="paidFor"
              render={() => (
-                <FormItem className="order-5">
-                  <div className="mb-4">
-                    <FormLabel>
-                      Paid for
-                      <Button
-                        variant="link"
-                        type="button"
-                        className="-m-2"
-                        onClick={() => {
-                          const paidFor = form.getValues().paidFor
-                          const allSelected =
-                            paidFor.length === group.participants.length
-                          const newPairFor = allSelected
-                            ? []
-                            : group.participants.map((p) => p.id)
-                          form.setValue('paidFor', newPairFor, {
-                            shouldDirty: true,
-                            shouldTouch: true,
-                            shouldValidate: true,
-                          })
-                        }}
-                      >
-                        {form.getValues().paidFor.length ===
-                        group.participants.length ? (
-                          <>Select none</>
-                        ) : (
-                          <>Select all</>
-                        )}
-                      </Button>
-                    </FormLabel>
-                    <FormDescription>
-                      Select who the expense was paid for.
-                    </FormDescription>
-                  </div>
+                <FormItem className="sm:order-4 row-span-2 space-y-0">
                  {group.participants.map(({ id, name }) => (
                    <FormField
                      key={id}
@@ -213,28 +312,133 @@ export function ExpenseForm({ group, expense, onSubmit, onDelete }: Props) {
                      name="paidFor"
                      render={({ field }) => {
                        return (
-                          <FormItem
-                            key={id}
-                            className="flex flex-row items-start space-x-3 space-y-0"
+                          <div
+                            data-id={`${id}/${form.getValues().splitMode}/${
+                              group.currency
+                            }`}
+                            className="flex items-center border-t last-of-type:border-b last-of-type:!mb-4 -mx-6 px-6 py-3"
                          >
-                            <FormControl>
-                              <Checkbox
-                                checked={field.value?.includes(id)}
-                                onCheckedChange={(checked) => {
-                                  return checked
-                                    ? field.onChange([...field.value, id])
-                                    : field.onChange(
-                                        field.value?.filter(
-                                          (value) => value !== id,
+                            <FormItem className="flex-1 flex flex-row items-start space-x-3 space-y-0">
+                              <FormControl>
+                                <Checkbox
+                                  checked={field.value?.some(
+                                    ({ participant }) => participant === id,
+                                  )}
+                                  onCheckedChange={(checked) => {
+                                    return checked
+                                      ? field.onChange([
+                                          ...field.value,
+                                          {
+                                            participant: id,
+                                            shares: '1',
+                                          },
+                                        ])
+                                      : field.onChange(
+                                          field.value?.filter(
+                                            (value) => value.participant !== id,
+                                          ),
+                                        )
+                                  }}
+                                />
+                              </FormControl>
+                              <FormLabel className="text-sm font-normal flex-1">
+                                {name}
+                              </FormLabel>
+                            </FormItem>
+                            {form.getValues().splitMode !== 'EVENLY' && (
+                              <FormField
+                                name={`paidFor[${field.value.findIndex(
+                                  ({ participant }) => participant === id,
+                                )}].shares`}
+                                render={() => {
+                                  const sharesLabel = (
+                                    <span
+                                      className={cn('text-sm', {
+                                        'text-muted': !field.value?.some(
+                                          ({ participant }) =>
+                                            participant === id,
                                        ),
-                                      )
+                                      })}
+                                    >
+                                      {match(form.getValues().splitMode)
+                                        .with('BY_SHARES', () => <>share(s)</>)
+                                        .with('BY_PERCENTAGE', () => <>%</>)
+                                        .with('BY_AMOUNT', () => (
+                                          <>{group.currency}</>
+                                        ))
+                                        .otherwise(() => (
+                                          <></>
+                                        ))}
+                                    </span>
+                                  )
+                                  return (
+                                    <div>
+                                      <div className="flex gap-1 items-center">
+                                        {form.getValues().splitMode ===
+                                          'BY_AMOUNT' && sharesLabel}
+                                        <FormControl>
+                                          <Input
+                                            key={String(
+                                              !field.value?.some(
+                                                ({ participant }) =>
+                                                  participant === id,
+                                              ),
+                                            )}
+                                            className="text-base w-[80px] -my-2"
+                                            type="number"
+                                            disabled={
+                                              !field.value?.some(
+                                                ({ participant }) =>
+                                                  participant === id,
+                                              )
+                                            }
+                                            value={
+                                              field.value?.find(
+                                                ({ participant }) =>
+                                                  participant === id,
+                                              )?.shares
+                                            }
+                                            onChange={(event) =>
+                                              field.onChange(
+                                                field.value.map((p) =>
+                                                  p.participant === id
+                                                    ? {
+                                                        participant: id,
+                                                        shares:
+                                                          event.target.value,
+                                                      }
+                                                    : p,
+                                                ),
+                                              )
+                                            }
+                                            inputMode={
+                                              form.getValues().splitMode ===
+                                              'BY_AMOUNT'
+                                                ? 'decimal'
+                                                : 'numeric'
+                                            }
+                                            step={
+                                              form.getValues().splitMode ===
+                                              'BY_AMOUNT'
+                                                ? 0.01
+                                                : 1
+                                            }
+                                          />
+                                        </FormControl>
+                                        {[
+                                          'BY_SHARES',
+                                          'BY_PERCENTAGE',
+                                        ].includes(
+                                          form.getValues().splitMode,
+                                        ) && sharesLabel}
+                                      </div>
+                                      <FormMessage className="float-right" />
+                                    </div>
+                                  )
                                }}
                              />
-                            </FormControl>
-                            <FormLabel className="text-sm font-normal">
-                              {name}
-                            </FormLabel>
-                          </FormItem>
+                            )}
+                          </div>
                        )
                      }}
                    />
@@ -243,27 +447,86 @@ export function ExpenseForm({ group, expense, onSubmit, onDelete }: Props) {
                </FormItem>
              )}
            />
-          </CardContent>

-          <CardFooter className="gap-2">
-            <SubmitButton
-              loadingContent={isCreate ? <>Creating…</> : <>Saving…</>}
-            >
-              {isCreate ? <>Create</> : <>Save</>}
-            </SubmitButton>
-            {!isCreate && onDelete && (
-              <AsyncButton
-                type="button"
-                variant="destructive"
-                loadingContent="Deleting…"
-                action={onDelete}
-              >
-                Delete
-              </AsyncButton>
-            )}
-          </CardFooter>
+            <Collapsible className="mt-5">
+              <CollapsibleTrigger asChild>
+                <Button variant="link" className="-mx-4">
+                  Advanced splitting options…
+                </Button>
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <div className="grid sm:grid-cols-2 gap-6 pt-3">
+                  <FormField
+                    control={form.control}
+                    name="splitMode"
+                    render={({ field }) => (
+                      <FormItem className="sm:order-2">
+                        <FormLabel>Split mode</FormLabel>
+                        <FormControl>
+                          <Select
+                            onValueChange={(value) => {
+                              form.setValue('splitMode', value as any, {
+                                shouldDirty: true,
+                                shouldTouch: true,
+                                shouldValidate: true,
+                              })
+                            }}
+                            defaultValue={field.value}
+                          >
+                            <SelectTrigger>
+                              <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="EVENLY">Evenly</SelectItem>
+                              <SelectItem value="BY_SHARES">
+                                Unevenly – By shares
+                              </SelectItem>
+                              <SelectItem value="BY_PERCENTAGE">
+                                Unevenly – By percentage
+                              </SelectItem>
+                              <SelectItem value="BY_AMOUNT">
+                                Unevenly – By amount
+                              </SelectItem>
+                            </SelectContent>
+                          </Select>
+                        </FormControl>
+                        <FormDescription>
+                          Select how to split the expense.
+                        </FormDescription>
+                      </FormItem>
+                    )}
+                  />
+                </div>
+              </CollapsibleContent>
+            </Collapsible>
+          </CardContent>
        </Card>
+
+        <div className="flex mt-4 gap-2">
+          <SubmitButton
+            loadingContent={isCreate ? <>Creating…</> : <>Saving…</>}
+          >
+            <Save className="w-4 h-4 mr-2" />
+            {isCreate ? <>Create</> : <>Save</>}
+          </SubmitButton>
+          {!isCreate && onDelete && (
+            <AsyncButton
+              type="button"
+              variant="destructive"
+              loadingContent="Deleting…"
+              action={onDelete}
+            >
+              <Trash2 className="w-4 h-4 mr-2" />
+              Delete
+            </AsyncButton>
+          )}
+        </div>
      </form>
    </Form>
  )
 }
+
+function formatDate(date?: Date) {
+  if (!date || isNaN(date as any)) date = new Date()
+  return date.toISOString().substring(0, 10)
+}
--- a/src/components/group-form.tsx
+++ b/src/components/group-form.tsx
@@ -24,6 +24,13 @@ import {
  HoverCardTrigger,
 } from '@/components/ui/hover-card'
 import { Input } from '@/components/ui/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
 import { getGroup } from '@/lib/api'
 import { GroupFormValues, groupFormSchema } from '@/lib/schemas'
 import { zodResolver } from '@hookform/resolvers/zod'
@@ -61,6 +68,21 @@ export function GroupForm({
    keyName: 'key',
  })

+  let activeUser = 'None'
+
+  const updateActiveUser = () => {
+    if (group?.id) {
+      const participant = group.participants.find((p) => p.name === activeUser)
+      if (participant?.id) {
+        localStorage.setItem(`${group.id}-activeUser`, participant.id)
+      } else {
+        localStorage.setItem(`${group.id}-newUser`, activeUser)
+      }
+    } else {
+      localStorage.setItem('newGroup-activeUser', activeUser)
+    }
+  }
+
  return (
    <Form {...form}>
      <form
@@ -196,9 +218,57 @@ export function GroupForm({
          </CardFooter>
        </Card>

+        <Card className="mb-4">
+          <CardHeader>
+            <CardTitle>Local settings</CardTitle>
+            <CardDescription>
+              These settings are set per-device, and are used to customize your
+              experience.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="grid sm:grid-cols-2 gap-4">
+              <FormItem>
+                <FormLabel>Active user</FormLabel>
+                <FormControl>
+                  <Select
+                    onValueChange={(value) => {
+                      activeUser = value
+                    }}
+                    defaultValue={
+                      fields.find(
+                        (f) =>
+                          f.id ===
+                          localStorage.getItem(`${group?.id}-activeUser`),
+                      )?.name || 'None'
+                    }
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select a participant" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {[{ name: 'None' }, ...form.watch('participants')]
+                        .filter((item) => item.name.length > 0)
+                        .map(({ name }) => (
+                          <SelectItem key={name} value={name}>
+                            {name}
+                          </SelectItem>
+                        ))}
+                    </SelectContent>
+                  </Select>
+                </FormControl>
+                <FormDescription>
+                  User used as default for paying expenses.
+                </FormDescription>
+              </FormItem>
+            </div>
+          </CardContent>
+        </Card>
+
        <SubmitButton
          size="lg"
          loadingContent={group ? 'Saving…' : 'Creating…'}
+          onClick={updateActiveUser}
        >
          <Save className="w-4 h-4 mr-2" /> {group ? <>Save</> : <> Create</>}
        </SubmitButton>
--- a/src/components/ui/collapsible.tsx
+++ b/src/components/ui/collapsible.tsx
@@ -0,0 +1,11 @@
+"use client"
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }
--- a/src/components/ui/command.tsx
+++ b/src/components/ui/command.tsx
@@ -0,0 +1,155 @@
+"use client"
+
+import * as React from "react"
+import { type DialogProps } from "@radix-ui/react-dialog"
+import { Command as CommandPrimitive } from "cmdk"
+import { Search } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Dialog, DialogContent } from "@/components/ui/dialog"
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+Command.displayName = CommandPrimitive.displayName
+
+interface CommandDialogProps extends DialogProps {}
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0 shadow-lg">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  </div>
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+))
+
+CommandList.displayName = CommandPrimitive.List.displayName
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-center text-sm"
+    {...props}
+  />
+))
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandItem.displayName = CommandPrimitive.Item.displayName
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+CommandShortcut.displayName = "CommandShortcut"
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -0,0 +1,122 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}
--- a/src/components/ui/drawer.tsx
+++ b/src/components/ui/drawer.tsx
@@ -0,0 +1,118 @@
+"use client"
+
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+
+import { cn } from "@/lib/utils"
+
+const Drawer = ({
+  shouldScaleBackground = true,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+  <DrawerPrimitive.Root
+    shouldScaleBackground={shouldScaleBackground}
+    {...props}
+  />
+)
+Drawer.displayName = "Drawer"
+
+const DrawerTrigger = DrawerPrimitive.Trigger
+
+const DrawerPortal = DrawerPrimitive.Portal
+
+const DrawerClose = DrawerPrimitive.Close
+
+const DrawerOverlay = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay
+    ref={ref}
+    className={cn("fixed inset-0 z-50 bg-black/80", className)}
+    {...props}
+  />
+))
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+        className
+      )}
+      {...props}
+    >
+      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+))
+DrawerContent.displayName = "DrawerContent"
+
+const DrawerHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+    {...props}
+  />
+)
+DrawerHeader.displayName = "DrawerHeader"
+
+const DrawerFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+    {...props}
+  />
+)
+DrawerFooter.displayName = "DrawerFooter"
+
+const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName
+
+const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}
--- a/src/components/ui/radio-group.tsx
+++ b/src/components/ui/radio-group.tsx
@@ -0,0 +1,44 @@
+"use client"
+
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  )
+})
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="h-2.5 w-2.5 fill-current text-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+})
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+
+export { RadioGroup, RadioGroupItem }
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }
--- a/src/components/ui/toast.tsx
+++ b/src/components/ui/toast.tsx
@@ -0,0 +1,127 @@
+import * as React from "react"
+import * as ToastPrimitives from "@radix-ui/react-toast"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const ToastProvider = ToastPrimitives.Provider
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      className
+    )}
+    {...props}
+  />
+))
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border bg-background text-foreground",
+        destructive:
+          "destructive group border-destructive bg-destructive text-destructive-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  )
+})
+Toast.displayName = ToastPrimitives.Root.displayName
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      className
+    )}
+    {...props}
+  />
+))
+ToastAction.displayName = ToastPrimitives.Action.displayName
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      className
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn("text-sm font-semibold", className)}
+    {...props}
+  />
+))
+ToastTitle.displayName = ToastPrimitives.Title.displayName
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn("text-sm opacity-90", className)}
+    {...props}
+  />
+))
+ToastDescription.displayName = ToastPrimitives.Description.displayName
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+}
--- a/src/components/ui/toaster.tsx
+++ b/src/components/ui/toaster.tsx
@@ -0,0 +1,35 @@
+"use client"
+
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from "@/components/ui/toast"
+import { useToast } from "@/components/ui/use-toast"
+
+export function Toaster() {
+  const { toasts } = useToast()
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        )
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  )
+}
--- a/src/components/ui/use-toast.ts
+++ b/src/components/ui/use-toast.ts
@@ -0,0 +1,192 @@
+// Inspired by react-hot-toast library
+import * as React from "react"
+
+import type {
+  ToastActionElement,
+  ToastProps,
+} from "@/components/ui/toast"
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: ToastActionElement
+}
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER
+  return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+  | {
+      type: ActionType["ADD_TOAST"]
+      toast: ToasterToast
+    }
+  | {
+      type: ActionType["UPDATE_TOAST"]
+      toast: Partial<ToasterToast>
+    }
+  | {
+      type: ActionType["DISMISS_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+  | {
+      type: ActionType["REMOVE_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      }
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t
+        ),
+      }
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t
+        ),
+      }
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        }
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      }
+  }
+}
+
+const listeners: Array<(state: State) => void> = []
+
+let memoryState: State = { toasts: [] }
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action)
+  listeners.forEach((listener) => {
+    listener(memoryState)
+  })
+}
+
+type Toast = Omit<ToasterToast, "id">
+
+function toast({ ...props }: Toast) {
+  const id = genId()
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    })
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss()
+      },
+    },
+  })
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  }
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState)
+
+  React.useEffect(() => {
+    listeners.push(setState)
+    return () => {
+      const index = listeners.indexOf(setState)
+      if (index > -1) {
+        listeners.splice(index, 1)
+      }
+    }
+  }, [state])
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  }
+}
+
+export { useToast, toast }
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -36,7 +36,7 @@ export async function createExpense(

  for (const participant of [
    expenseFormValues.paidBy,
-    ...expenseFormValues.paidFor,
+    ...expenseFormValues.paidFor.map((p) => p.participant),
  ]) {
    if (!group.participants.some((p) => p.id === participant))
      throw new Error(`Invalid participant ID: ${participant}`)
@@ -47,13 +47,17 @@ export async function createExpense(
    data: {
      id: randomId(),
      groupId,
+      expenseDate: expenseFormValues.expenseDate,
+      categoryId: expenseFormValues.category,
      amount: expenseFormValues.amount,
      title: expenseFormValues.title,
      paidById: expenseFormValues.paidBy,
+      splitMode: expenseFormValues.splitMode,
      paidFor: {
        createMany: {
          data: expenseFormValues.paidFor.map((paidFor) => ({
-            participantId: paidFor,
+            participantId: paidFor.participant,
+            shares: paidFor.shares,
          })),
        },
      },
@@ -84,12 +88,14 @@ export async function getGroupExpensesParticipants(groupId: string) {

 export async function getGroups(groupIds: string[]) {
  const prisma = await getPrisma()
-  return (await prisma.group.findMany({
-    where: { id: { in: groupIds } },
-    include: { _count: { select: { participants: true } } },
-  })).map(group => ({
+  return (
+    await prisma.group.findMany({
+      where: { id: { in: groupIds } },
+      include: { _count: { select: { participants: true } } },
+    })
+  ).map((group) => ({
    ...group,
-    createdAt: group.createdAt.toISOString()
+    createdAt: group.createdAt.toISOString(),
  }))
 }

@@ -106,7 +112,7 @@ export async function updateExpense(

  for (const participant of [
    expenseFormValues.paidBy,
-    ...expenseFormValues.paidFor,
+    ...expenseFormValues.paidFor.map((p) => p.participant),
  ]) {
    if (!group.participants.some((p) => p.id === participant))
      throw new Error(`Invalid participant ID: ${participant}`)
@@ -116,20 +122,39 @@ export async function updateExpense(
  return prisma.expense.update({
    where: { id: expenseId },
    data: {
+      expenseDate: expenseFormValues.expenseDate,
      amount: expenseFormValues.amount,
      title: expenseFormValues.title,
+      categoryId: expenseFormValues.category,
      paidById: expenseFormValues.paidBy,
+      splitMode: expenseFormValues.splitMode,
      paidFor: {
-        connectOrCreate: expenseFormValues.paidFor.map((paidFor) => ({
+        create: expenseFormValues.paidFor
+          .filter(
+            (p) =>
+              !existingExpense.paidFor.some(
+                (pp) => pp.participantId === p.participant,
+              ),
+          )
+          .map((paidFor) => ({
+            participantId: paidFor.participant,
+            shares: paidFor.shares,
+          })),
+        update: expenseFormValues.paidFor.map((paidFor) => ({
          where: {
-            expenseId_participantId: { expenseId, participantId: paidFor },
+            expenseId_participantId: {
+              expenseId,
+              participantId: paidFor.participant,
+            },
+          },
+          data: {
+            shares: paidFor.shares,
          },
-          create: { participantId: paidFor },
        })),
        deleteMany: existingExpense.paidFor.filter(
          (paidFor) =>
            !expenseFormValues.paidFor.some(
-              (pf) => pf === paidFor.participantId,
+              (pf) => pf.participant === paidFor.participantId,
            ),
        ),
      },
@@ -184,12 +209,21 @@ export async function getGroup(groupId: string) {
  })
 }

+export async function getCategories() {
+  const prisma = await getPrisma()
+  return prisma.category.findMany()
+}
+
 export async function getGroupExpenses(groupId: string) {
  const prisma = await getPrisma()
  return prisma.expense.findMany({
    where: { groupId },
-    include: { paidFor: { include: { participant: true } }, paidBy: true },
-    orderBy: { createdAt: 'desc' },
+    include: {
+      paidFor: { include: { participant: true } },
+      paidBy: true,
+      category: true,
+    },
+    orderBy: { expenseDate: 'desc' },
  })
 }

@@ -197,6 +231,6 @@ export async function getExpense(groupId: string, expenseId: string) {
  const prisma = await getPrisma()
  return prisma.expense.findUnique({
    where: { id: expenseId },
-    include: { paidBy: true, paidFor: true },
+    include: { paidBy: true, paidFor: true, category: true },
  })
 }
--- a/src/lib/balances.ts
+++ b/src/lib/balances.ts
@@ -1,5 +1,6 @@
 import { getGroupExpenses } from '@/lib/api'
 import { Participant } from '@prisma/client'
+import { match } from 'ts-pattern'

 export type Balances = Record<
  Participant['id'],
@@ -19,34 +20,42 @@ export function getBalances(

  for (const expense of expenses) {
    const paidBy = expense.paidById
-    const paidFors = expense.paidFor.map((p) => p.participantId)
+    const paidFors = expense.paidFor

    if (!balances[paidBy]) balances[paidBy] = { paid: 0, paidFor: 0, total: 0 }
    balances[paidBy].paid += expense.amount
    balances[paidBy].total += expense.amount
-    paidFors.forEach((paidFor, index) => {
-      if (!balances[paidFor])
-        balances[paidFor] = { paid: 0, paidFor: 0, total: 0 }

-      const dividedAmount = divide(
-        expense.amount,
-        paidFors.length,
-        index === paidFors.length - 1,
-      )
-      balances[paidFor].paidFor += dividedAmount
-      balances[paidFor].total -= dividedAmount
+    const totalPaidForShares = paidFors.reduce(
+      (sum, paidFor) => sum + paidFor.shares,
+      0,
+    )
+    let remaining = expense.amount
+    paidFors.forEach((paidFor, index) => {
+      if (!balances[paidFor.participantId])
+        balances[paidFor.participantId] = { paid: 0, paidFor: 0, total: 0 }
+
+      const isLast = index === paidFors.length - 1
+
+      const [shares, totalShares] = match(expense.splitMode)
+        .with('EVENLY', () => [1, paidFors.length])
+        .with('BY_SHARES', () => [paidFor.shares, totalPaidForShares])
+        .with('BY_PERCENTAGE', () => [paidFor.shares, totalPaidForShares])
+        .with('BY_AMOUNT', () => [paidFor.shares, totalPaidForShares])
+        .exhaustive()
+
+      const dividedAmount = isLast
+        ? remaining
+        : Math.floor((expense.amount * shares) / totalShares)
+      remaining -= dividedAmount
+      balances[paidFor.participantId].paidFor += dividedAmount
+      balances[paidFor.participantId].total -= dividedAmount
    })
  }

  return balances
 }

-function divide(total: number, count: number, isLast: boolean): number {
-  if (!isLast) return Math.floor(total / count)
-
-  return total - divide(total, count, false) * (count - 1)
-}
-
 export function getSuggestedReimbursements(
  balances: Balances,
 ): Reimbursement[] {
--- a/src/lib/env.ts
+++ b/src/lib/env.ts
@@ -4,7 +4,6 @@ const envSchema = z.object({
  NEXT_PUBLIC_BASE_URL: z.string().url(),
  POSTGRES_URL_NON_POOLING: z.string().url(),
  POSTGRES_PRISMA_URL: z.string().url(),
-  PLAUSIBLE_DOMAIN: z.string().optional(),
 })

 export const env = envSchema.parse(process.env)
--- a/src/lib/hooks.ts
+++ b/src/lib/hooks.ts
@@ -0,0 +1,42 @@
+import { useEffect, useState } from 'react'
+
+export function useMediaQuery(query: string): boolean {
+  const getMatches = (query: string): boolean => {
+    // Prevents SSR issues
+    if (typeof window !== 'undefined') {
+      return window.matchMedia(query).matches
+    }
+    return false
+  }
+
+  const [matches, setMatches] = useState<boolean>(getMatches(query))
+
+  function handleChange() {
+    setMatches(getMatches(query))
+  }
+
+  useEffect(() => {
+    const matchMedia = window.matchMedia(query)
+
+    // Triggered at the first client-side load and if query changes
+    handleChange()
+
+    // Listen matchMedia
+    if (matchMedia.addListener) {
+      matchMedia.addListener(handleChange)
+    } else {
+      matchMedia.addEventListener('change', handleChange)
+    }
+
+    return () => {
+      if (matchMedia.removeListener) {
+        matchMedia.removeListener(handleChange)
+      } else {
+        matchMedia.removeEventListener('change', handleChange)
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [query])
+
+  return matches
+}
--- a/src/lib/schemas.ts
+++ b/src/lib/schemas.ts
@@ -1,3 +1,4 @@
+import { SplitMode } from '@prisma/client'
 import * as z from 'zod'

 export const groupFormSchema = z
@@ -38,36 +39,113 @@ export const groupFormSchema = z

 export type GroupFormValues = z.infer<typeof groupFormSchema>

-export const expenseFormSchema = z.object({
-  title: z
-    .string({ required_error: 'Please enter a title.' })
-    .min(2, 'Enter at least two characters.'),
-  amount: z
-    .union(
-      [
-        z.number(),
-        z.string().transform((value, ctx) => {
-          const valueAsNumber = Number(value)
-          if (Number.isNaN(valueAsNumber))
+export const expenseFormSchema = z
+  .object({
+    expenseDate: z.coerce.date(),
+    title: z
+      .string({ required_error: 'Please enter a title.' })
+      .min(2, 'Enter at least two characters.'),
+    category: z.coerce.number().default(0),
+    amount: z
+      .union(
+        [
+          z.number(),
+          z.string().transform((value, ctx) => {
+            const valueAsNumber = Number(value)
+            if (Number.isNaN(valueAsNumber))
+              ctx.addIssue({
+                code: z.ZodIssueCode.custom,
+                message: 'Invalid number.',
+              })
+            return Math.round(valueAsNumber * 100)
+          }),
+        ],
+        { required_error: 'You must enter an amount.' },
+      )
+      .refine((amount) => amount >= 1, 'The amount must be higher than 0.01.')
+      .refine(
+        (amount) => amount <= 10_000_000_00,
+        'The amount must be lower than 10,000,000.',
+      ),
+    paidBy: z.string({ required_error: 'You must select a participant.' }),
+    paidFor: z
+      .array(
+        z.object({
+          participant: z.string(),
+          shares: z.union([
+            z.number(),
+            z.string().transform((value, ctx) => {
+              const valueAsNumber = Number(value)
+              if (Number.isNaN(valueAsNumber))
+                ctx.addIssue({
+                  code: z.ZodIssueCode.custom,
+                  message: 'Invalid number.',
+                })
+              return Math.round(valueAsNumber * 100)
+            }),
+          ]),
+        }),
+      )
+      .min(1, 'The expense must be paid for at least one participant.')
+      .superRefine((paidFor, ctx) => {
+        let sum = 0
+        for (const { shares } of paidFor) {
+          sum += shares
+          if (shares < 1) {
            ctx.addIssue({
              code: z.ZodIssueCode.custom,
-              message: 'Invalid number.',
+              message: 'All shares must be higher than 0.',
            })
-          return Math.round(valueAsNumber * 100)
-        }),
-      ],
-      { required_error: 'You must enter an amount.' },
-    )
-    .refine((amount) => amount >= 1, 'The amount must be higher than 0.01.')
-    .refine(
-      (amount) => amount <= 10_000_000_00,
-      'The amount must be lower than 10,000,000.',
-    ),
-  paidBy: z.string({ required_error: 'You must select a participant.' }),
-  paidFor: z
-    .array(z.string())
-    .min(1, 'The expense must be paid for at least one participant.'),
-  isReimbursement: z.boolean(),
-})
+          }
+        }
+      }),
+    splitMode: z
+      .enum<SplitMode, [SplitMode, ...SplitMode[]]>(
+        Object.values(SplitMode) as any,
+      )
+      .default('EVENLY'),
+    isReimbursement: z.boolean(),
+  })
+  .superRefine((expense, ctx) => {
+    let sum = 0
+    for (const { shares } of expense.paidFor) {
+      sum +=
+        typeof shares === 'number' ? shares : Math.round(Number(shares) * 100)
+    }
+    switch (expense.splitMode) {
+      case 'EVENLY':
+        break // noop
+      case 'BY_SHARES':
+        break // noop
+      case 'BY_AMOUNT': {
+        if (sum !== expense.amount) {
+          const detail =
+            sum < expense.amount
+              ? `${((expense.amount - sum) / 100).toFixed(2)} missing`
+              : `${((sum - expense.amount) / 100).toFixed(2)} surplus`
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: `Sum of amounts must equal the expense amount (${detail}).`,
+            path: ['paidFor'],
+          })
+        }
+        break
+      }
+      case 'BY_PERCENTAGE': {
+        if (sum !== 10000) {
+          const detail =
+            sum < 10000
+              ? `${((10000 - sum) / 100).toFixed(0)}% missing`
+              : `${((sum - 10000) / 100).toFixed(0)}% surplus`
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: `Sum of percentages must equal 100 (${detail})`,
+            path: ['paidFor'],
+          })
+        }
+        break
+      }
+    }
+  })

 export type ExpenseFormValues = z.infer<typeof expenseFormSchema>
--- a/src/scripts/migrate.ts
+++ b/src/scripts/migrate.ts
@@ -80,6 +80,8 @@ async function main() {
          amount: Math.round(expenseRow.amount * 100),
          groupId: groupRow.id,
          title: expenseRow.description,
+          categoryId: 1,
+          expenseDate: new Date(expenseRow.created_at.toDateString()),
          createdAt: expenseRow.created_at,
          isReimbursement: expenseRow.is_reimbursement === true,
          paidById: participantIdsMapping[expenseRow.paid_by_participant_id],
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -89,5 +89,5 @@ module.exports = {
      },
    },
  },
-  plugins: [require('tailwindcss-animate')],
+  plugins: [require('tailwindcss-animate'), require('@tailwindcss/typography')],
 }
Author	SHA1	Message	Date
Sebastien Castiel	9dc43bf512	Remove some dependencies	2024-01-18 18:19:11 -05:00
Sebastien Castiel	b999117ad8	Clean project from marketing content	2024-01-18 18:11:24 -05:00
Sebastien Castiel	f9040f8bed	Merge feedback and support dialogs	2024-01-18 15:48:45 -05:00
Sebastien Castiel	395c86666c	Fix mobile keyboard on shares field (Fix #49 )	2024-01-18 09:07:47 -05:00
Sebastien Castiel	2728f24989	Remove unused code	2024-01-18 09:02:53 -05:00
Sebastien Castiel	314eba284b	Responsive category selector with drawer	2024-01-17 12:30:56 -05:00
Sebastien Castiel	92156b29cb	Use combobox for category selector	2024-01-17 12:07:03 -05:00
Sebastien Castiel	c4de3f605c	Improve UI of expense list	2024-01-17 10:22:49 -05:00
Brandon Eng	ff6b84ff88	Group expenses (#48 ) * Group expenses my date * Group expenses my date * typescript errors * prettier * getExpenseGroup * update logic to use dayjs * clean up	2024-01-17 09:42:00 -05:00
Sebastien Castiel	6b6d58e95e	Add GitHub actions	2024-01-16 13:55:34 -05:00
Sebastien Castiel	d809e10d19	Update contributors	2024-01-16 10:43:04 -05:00
Brandon Eng	36cc4f1ef7	Ability to archive groups when they’re settled up (#45 ) * Settled up icon on group card * remove logs * archived groups * remove settled up * remove more settled up * recent-group-list-card * sortGroups * archiveGroup * unarchiveGroup * clean up * more clean up * Prettier, fix TS errors, add titles --------- Co-authored-by: Sebastien Castiel <sebastien@castiel.me>	2024-01-16 10:41:46 -05:00
Sebastien Castiel	1141501edb	Create FUNDING.yml	2024-01-15 18:24:48 -05:00
Sebastien Castiel	28902ad0ea	Export group expenses as JSON (Closes #42 )	2024-01-15 11:44:49 -05:00
Sebastien Castiel	8abdcb7d6f	Fix donation modal with dark mode (Closes #46 )	2024-01-15 09:19:53 -05:00
Sebastien Castiel	43f7ca700b	Fix client-side error when editing date with keyboard (Closes #43 )	2024-01-14 12:47:52 -05:00
Sebastien Castiel	beae336666	Add donation button (closes #40 )	2024-01-14 11:43:48 -05:00
Sebastien Castiel	2dcb80f954	Update home page & README	2024-01-11 17:32:52 -05:00
Sebastien Castiel	c7fb810f80	Add category icons	2024-01-11 17:12:21 -05:00
Chris Johnston	45ee9cdba4	Assign categories to expenses (#28 ) * add expense categories * set category to Payment for reimbursements * Insert categories as part of the migration * Display category groups --------- Co-authored-by: Sebastien Castiel <sebastien@castiel.me>	2024-01-11 16:38:30 -05:00
Sebastien Castiel	057f3e9c53	Update contributors	2024-01-11 15:30:50 -05:00
Max	76427c9f13	Docker container version (#39 ) * + Dockerfile and compose file + Scripts dir and startup script + Build image npm script * * Moves env to file * + Tags image with info from package.json * Moves image creation to script * Updates README * Update README.md Co-authored-by: Sebastien Castiel <sebastien@castiel.me> --------- Co-authored-by: Maxime Jacob <mjacob-no-reply@proton.me> Co-authored-by: Sebastien Castiel <sebastien@castiel.me>	2024-01-11 15:25:08 -05:00
Sebastien Castiel	ddce4d0bdb	Add contributors link	2024-01-11 11:44:48 -05:00
Sebastien Castiel	cf41048aea	Remove group (Fix #38 )	2024-01-11 10:12:58 -05:00
Sebastien Castiel	f20ebd5bdd	Improve design for expense list	2024-01-10 08:21:12 -05:00
Sebastien Castiel	9c728530c9	Fix font size in inputs	2024-01-09 15:38:08 -05:00
Sebastien Castiel	323b0ea128	Feedback button	2024-01-09 15:32:19 -05:00
Sebastien Castiel	5ce96aef30	Add contributors on home page	2024-01-09 11:25:42 -05:00
Sebastien Castiel	a258e85fae	Update README.md	2024-01-09 09:15:38 -05:00
Sebastien Castiel	1b9e624004	Ask the user who they are when opening a group for the first time (#7 )	2024-01-09 08:53:51 -05:00
Ankit Bahl	6bd3299331	Add activeUser for default payer per group (#16 ) * Add activeUser for default payer per group * Prettier, change labels, use useEffect --------- Co-authored-by: Sebastien Castiel <sebastien@castiel.me>	2024-01-09 08:08:17 -05:00
Sebastien Castiel	a942369193	Fix how dates are displayed (Fix #33 )	2024-01-09 07:45:28 -05:00
Chris Johnston	e891d259a5	add shares to paidFor in reimbursement (#32 )	2024-01-08 16:22:30 -05:00
Sebastien Castiel	d9aeb45c83	Update README.md	2024-01-08 16:21:46 -05:00
Chris Johnston	76befff481	Fix UI bug when clicking reimbursement link (#31 )	2024-01-08 15:56:54 -05:00
Sebastien Castiel	55883ce414	Mark a group as favorite (fixes #29 )	2024-01-08 15:49:07 -05:00
Chris Johnston	bec1dd270a	Add Expense Date (#26 ) * add expense date * Improve date formatting * Prettier * Change field description --------- Co-authored-by: Sebastien Castiel <sebastien@castiel.me>	2024-01-08 14:26:44 -05:00
Sebastien Castiel	4566900f9c	Fix items alignment	2024-01-08 12:29:20 -05:00
Sebastien Castiel	0a8e56f800	Add splitmode and shares to expenses (#11 ) * Add splitmode and shares to expenses * Update balances based on shares * Change field size * Form validation * Redesign expense form * Split unevenly by amount	2024-01-08 12:11:11 -05:00
Sebastien Castiel	0fb0c42ff5	Fix index	2023-12-26 12:24:42 +01:00
Sebastien Castiel	f881aff5f9	Revert "Use modal dialogs for expense creation & edition (#10 )" This reverts commit `1e66efe516`.	2023-12-19 09:44:09 -05:00