.env.example

@@ -1,14 +0,0 @@
-
-#
-# This environment file sets variables for the development
-# Database specifics are set in the docker-compose file and the ORIGIN is not required for local development
-#
-
-# prisma database url
-DATABASE_URL='postgresql://prisma:prisma@localhost:5432/finances?schema=public'
-
-AUTH0_SECRET=''
-AUTH0_BASE_URL='http://localhost:3000'
-AUTH0_URL=''
-AUTH0_CLIENT_ID=''
-AUTH0_CLIENT_SECRET=''

.github/workflows/docker-image-build-and-push-manual.yaml

@@ -1,34 +0,0 @@
-name: Development Deployment
-
-on:
-  workflow_dispatch:
-    inputs:
-      image_tag:
-        required: true
-        type: string
-        description: Docker image tag
-
-jobs:
-  build-and-push:
-    runs-on: ubuntu-latest
-
-    steps:
-
-      - name: Checkout repository
-        uses: actions/checkout@v4
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Login to Docker Hub
-        uses: docker/login-action@v3
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      - name: Build and push image
-        uses: docker/build-push-action@v5
-        with:
-          push: true
-          platforms: linux/amd64
-          tags: markusthielker/next-finances:development, markusthielker/next-finances:${{ github.event.inputs.image_tag }}-dev

.github/workflows/docker-image-build-and-push.yaml

@@ -1,4 +1,4 @@
-name: Production Deployment
+name: Docker Image Build and Push
 
 on:
   push:

.gitignore

@@ -38,6 +38,3 @@ next-env.d.ts
 
 # IDE
 /.idea
-
-# serwist
-public/sw.js

Dockerfile

@@ -1,4 +1,4 @@
-FROM oven/bun:1-alpine AS base
+FROM node:21-alpine AS base
 
 # Install dependencies only when needed
 FROM base AS deps
@@ -6,8 +6,8 @@ FROM base AS deps
 RUN apk add --no-cache libc6-compat
 WORKDIR /app
 
-COPY package.json bun.lockb* ./
-RUN bun install
+COPY package.json package-lock.json* ./
+RUN npm ci
 
 
 # Rebuild the source code only when needed
@@ -18,23 +18,23 @@ COPY --from=deps /app/node_modules ./node_modules
 COPY . .
 
 # dependencies have to be changed depending on target architecture
-RUN bun install @node-rs/argon2-linux-x64-musl # arm64 = @node-rs/argon2-linux-arm64-musl
-RUN bun install @node-rs/bcrypt-linux-x64-musl # arm64 = @node-rs/bcrypt-linux-arm64-musl
+RUN npm i @node-rs/argon2-linux-x64-musl # arm64 = @node-rs/argon2-linux-arm64-musl
+RUN npm i @node-rs/bcrypt-linux-x64-musl # arm64 = @node-rs/bcrypt-linux-arm64-musl
 
 COPY prisma/ ./prisma/
 
-RUN bunx prisma generate
+RUN npx prisma generate
 
-ENV NEXT_TELEMETRY_DISABLED=1
-RUN bun run build
+ENV NEXT_TELEMETRY_DISABLED 1
+RUN npm run build
 
 
 # Production image, copy all the files and run next
 FROM base AS runner
 WORKDIR /app
 
-ENV NODE_ENV=production
-ENV NEXT_TELEMETRY_DISABLED=1
+ENV NODE_ENV production
+ENV NEXT_TELEMETRY_DISABLED 1
 
 RUN addgroup --system --gid 1001 nodejs
 RUN adduser --system --uid 1001 nextjs
@@ -52,7 +52,7 @@ USER nextjs
 
 EXPOSE 3000
 
-ENV PORT=3000
-ENV HOSTNAME="0.0.0.0"
+ENV PORT 3000
+ENV HOSTNAME "0.0.0.0"
 
 CMD ["node", "server.js"]

README.md

@@ -1,75 +1,3 @@
 # Next-Finances
 
 This is my simple finances tracker that I use to keep track of my spending.
-
-## Using the app
-
-### Understanding the Basics
-
-- **Entities**: The core building blocks of your finances.
-    - Accounts: Where you hold money (e.g., bank accounts, PayPal account, cash)
-    - Entities: Where you spend money (e.g., Walmart, Spotify, Netflix)
-- **Payments**: Record money movement.
-    - Expenses: Money leaving an Account. (Account -> Entity)
-    - Income: Money entering an Account. (Entity -> Account)
-- **Categories** *(optional)*: Add labels to Payments for better tracking.
-
-### Your First Steps
-
-- Set up: Create Entities and Accounts that reflect your finances.
-- Record a Payment:
-    - Enter the amount and date.
-    - Select payor and payee
-    - *(optional)* Assign a category or enter a note.
-- Explore: View your payment history and view your statics at the dashboard
-
-### Tips
-
-- Install the website as a PWA for easy access.
-- Get in the habit of recording Payments as they happen for accurate tracking.
-- Use categories to understand your spending patterns.
-
-## Development
-
-Clone this repository and run the following commands:
-
-```bash
-
-## create .env file
-cp .env.example .env
-
-## start the database
-docker compose -f docker/finances-dev/docker-compose.yml up -d
-
-## generate prisma client
-bunx prisma generate
-
-## apply database migrations
-bunx prisma migrate deploy
-
-## start the development server
-bun run dev
-
-```
-
-This project relies on [Auth0](https://auth0.com) authentication. To use it you will have to create an Auth0 account,
-create an application of type 'Single Page Application' and now add the required details to your .env file.
-You will also have to add `http://localhost:3000/auth/callback` as an `Allowed Callback URL` and `http://localhost:3000`
-as an `Allowed Logout URL` and `Allowed Web Origins` in your Auth0 console.
-
-Now open [http://localhost:3000](http://localhost:3000) with your browser and create an account.
-While in development mode, you can generate sample data from the [Account page](http://localhost:3000/account).
-
-## Deployment
-
-Copy the [docker-compose.yaml](./docker/finances-prod/docker-compose.yaml) file and
-the [.env.example](./docker/finances-prod/.env.example) from 'docker/finances-prod' to your server.
-
-Rename the `.env.example` file to `.env` and adjust the required environment variables.
-
-The docker setup expects you to run a Traefik reverse proxy. It will then register itself automatically.
-If your setup is different, you will need to adjust the `docker-compose.yaml` file accordingly.
-
-The finances containers will automatically register themselves to a running watchtower container if it is present.
-
-Finally run `docker-compose up -d` on your server to start the application.

docker/finances-prod/.env.example

@@ -1,11 +0,0 @@
-
-# database configuration
-DB_USER="db_user"
-DB_PASSWORD="db_password"
-
-# prisma database url
-DATABASE_URL="postgresql://$DB_USER:$DB_PASSWORD@postgres:5432/finances?schema=public"
-
-APPLICATION_DOMAIN="finances.thielker.xyz"
-COOKIE_DOMAIN="$APPLICATION_DOMAIN"
-ORIGIN="https://$APPLICATION_DOMAIN"

docker/finances-prod/docker-compose.yaml

@@ -8,7 +8,7 @@ services:
     depends_on:
       postgres:
         condition: service_healthy
-    command: bunx prisma migrate deploy
+    command: npx prisma migrate deploy
     labels:
       - "com.centurylinklabs.watchtower.enable=true"
     networks:
@@ -25,7 +25,7 @@ services:
     restart: unless-stopped
     labels:
       - "traefik.enable=true"
-      - "traefik.http.routers.xyz-next-finances.rule=Host(`${APPLICATION_DOMAIN}`)"
+      - "traefik.http.routers.xyz-next-finances.rule=Host(`finances.thielker.xyz`)"
       - "traefik.http.routers.xyz-next-finances.entrypoints=web, websecure"
       - "traefik.http.routers.xyz-next-finances.tls=true"
       - "traefik.http.routers.xyz-next-finances.tls.certresolver=lets-encrypt"
@@ -42,11 +42,11 @@ services:
     depends_on:
       app-migrations:
         condition: service_completed_successfully
-    command: bunx prisma studio
+    command: npx prisma studio
     restart: unless-stopped
     labels:
       - "traefik.enable=true"
-      - "traefik.http.routers.xyz-next-finances-studio.rule=Host(`studio.${APPLICATION_DOMAIN}`)"
+      - "traefik.http.routers.xyz-next-finances-studio.rule=Host(`studio.finances.thielker.xyz`)"
       - "traefik.http.routers.xyz-next-finances-studio.entrypoints=web, websecure"
       - "traefik.http.services.xyz-next-finances-studio.loadbalancer.server.port=5555"
       - "traefik.http.routers.xyz-next-finances-studio.tls=true"

docker/finances-prod/traefik.toml

@@ -1,13 +0,0 @@
-[entryPoints]
-[entryPoints.web]
-address = ":80"
-#        [entryPoints.web.http.redirections.entryPoint]
-#            to = "websecure"
-#            scheme = "https"
-
-[entryPoints.websecure]
-address = ":443"
-
-[providers.docker]
-watch = true
-network = "web"

docker/finances-prod/traefik_setup.sh

@@ -1,13 +0,0 @@
-
-#
-# run this container on your server to use traefik as a reverse proxy
-#
-docker run -d \
-  -v /var/run/docker.sock:/var/run/docker.sock \
-  -v $PWD/traefik.toml:/traefik.toml \
-  -p 80:80 \
-  -p 443:443 \
-  --restart unless-stopped \
-  --network web \
-  --name traefik \
-  traefik:v2.10

docker/finances-prod/watchtower_setup.sh

@@ -1,13 +0,0 @@
-
-#
-# run this container on your server to keep the labeled containers up to date
-#
-# run 'docker login' to authenticate with your docker hub account
-# label your containers with 'com.centurylinklabs.watchtower.enable=true' to enable watchtower
-#
-docker run -d \
-  --name watchtower \
-  --restart unless-stopped \
-  -v $HOME/.docker/config.json:/config.json \
-  -v /var/run/docker.sock:/var/run/docker.sock \
-  containrrr/watchtower -s "*/30 * * * * *" --label-enable --include-stopped

next.config.mjs

@@ -1,11 +1,5 @@
-import withSerwistInit from '@serwist/next';
-
-const withSerwist = withSerwistInit({
-    swSrc: 'src/app/service-worker.ts',
-    swDest: 'public/sw.js',
-});
-
-export default withSerwist({
+/** @type {import('next').NextConfig} */
+const nextConfig = {
     webpack: (config) => {
         config.externals.push(
             '@node-rs/argon2',
@@ -14,7 +8,6 @@ export default withSerwist({
         return config;
     },
     output: 'standalone',
-    env: {
-        appVersion: process.env.npm_package_version,
-    },
-});
+};
+
+export default nextConfig;

package.json

@@ -2,7 +2,8 @@
   "name": "next-finances",
   "description": "A finances application to keep track of my personal spendings",
   "homepage": "https://github.com/MarkusThielker/next-finances",
-  "version": "1.3.1",
+  "version": "1.0.0",
+  "license": "MIT",
   "author": {
     "name": "Markus Thielker"
   },
@@ -18,53 +19,50 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@auth0/nextjs-auth0": "^4.1.0",
-    "@hookform/resolvers": "^3.9.1",
-    "@prisma/client": "^6.1.0",
-    "@radix-ui/react-alert-dialog": "^1.1.4",
-    "@radix-ui/react-dialog": "^1.1.4",
-    "@radix-ui/react-dropdown-menu": "^2.1.4",
-    "@radix-ui/react-label": "^2.1.1",
-    "@radix-ui/react-navigation-menu": "^1.2.3",
-    "@radix-ui/react-popover": "^1.1.6",
-    "@radix-ui/react-scroll-area": "^1.2.2",
-    "@radix-ui/react-select": "^2.1.4",
-    "@radix-ui/react-separator": "^1.1.1",
-    "@radix-ui/react-slot": "^1.1.2",
-    "@serwist/next": "^9.0.11",
-    "@serwist/precaching": "^9.0.11",
-    "@serwist/sw": "^9.0.11",
-    "@tanstack/react-table": "^8.20.6",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "cmdk": "^1.0.4",
-    "date-fns": "^4.1.0",
-    "lucia": "^3.2.2",
-    "lucide-react": "^0.469.0",
-    "next": "15.1.2",
-    "next-themes": "^0.4.4",
-    "react": "^19.0.0",
-    "react-day-picker": "8.10.1",
-    "react-dom": "^19.0.0",
-    "react-hook-form": "^7.54.2",
-    "sonner": "^1.7.1",
-    "swr": "^2.3.0",
-    "tailwind-merge": "^2.6.0",
+    "@hookform/resolvers": "^3.3.4",
+    "@lucia-auth/adapter-prisma": "^4.0.0",
+    "@prisma/client": "^5.10.2",
+    "@radix-ui/react-alert-dialog": "^1.0.5",
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-navigation-menu": "^1.1.4",
+    "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-scroll-area": "^1.0.5",
+    "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-separator": "^1.0.3",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@tanstack/react-table": "^8.13.2",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "cmdk": "^1.0.0",
+    "date-fns": "^3.3.1",
+    "lucia": "^3.0.1",
+    "lucide-react": "^0.350.0",
+    "next": "14.1.3",
+    "next-themes": "^0.2.1",
+    "oslo": "^1.1.3",
+    "react": "^18",
+    "react-day-picker": "^8.10.0",
+    "react-dom": "^18",
+    "react-hook-form": "^7.51.0",
+    "sonner": "^1.4.3",
+    "swr": "^2.2.5",
+    "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7",
-    "vaul": "^1.1.2",
-    "zod": "^3.24.1"
+    "zod": "^3.22.4"
   },
   "devDependencies": {
-    "@types/node": "^22.10.2",
-    "@types/react": "^19.0.2",
-    "@types/react-dom": "^19.0.2",
-    "autoprefixer": "^10.4.20",
+    "@types/node": "^20.11.25",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "autoprefixer": "^10.0.1",
     "eslint": "^8",
-    "eslint-config-next": "15.1.2",
+    "eslint-config-next": "14.1.3",
     "postcss": "^8",
-    "prisma": "^6.1.0",
-    "tailwindcss": "^3.4.17",
+    "prisma": "^5.10.2",
+    "tailwindcss": "^3.3.0",
     "ts-node": "^10.9.2",
-    "typescript": "^5.7.2"
+    "typescript": "^5.4.2"
   }
 }

prisma/migrations/20240317102723_add_default_category_to_entity/migration.sql

@@ -1,7 +0,0 @@
--- AlterTable
-ALTER TABLE "entities"
-    ADD COLUMN "default_category_id" INTEGER;
-
--- AddForeignKey
-ALTER TABLE "entities"
-    ADD CONSTRAINT "entities_default_category_id_fkey" FOREIGN KEY ("default_category_id") REFERENCES "categories" ("id") ON DELETE SET NULL ON UPDATE CASCADE;

prisma/migrations/20240403224427_remove_lucia_authentication/migration.sql

@@ -1,28 +0,0 @@
-/*
-  Warnings:
-
-  - You are about to drop the `lucia_session` table. If the table is not empty, all the data it contains will be lost.
-  - You are about to drop the `lucia_user` table. If the table is not empty, all the data it contains will be lost.
-
-*/
--- DropForeignKey
-ALTER TABLE "categories"
-    DROP CONSTRAINT "categories_user_id_fkey";
-
--- DropForeignKey
-ALTER TABLE "entities"
-    DROP CONSTRAINT "entities_user_id_fkey";
-
--- DropForeignKey
-ALTER TABLE "lucia_session"
-    DROP CONSTRAINT "lucia_session_userId_fkey";
-
--- DropForeignKey
-ALTER TABLE "payments"
-    DROP CONSTRAINT "payments_user_id_fkey";
-
--- DropTable
-DROP TABLE "lucia_session";
-
--- DropTable
-DROP TABLE "lucia_user";

prisma/schema.prisma

@@ -7,15 +7,40 @@ datasource db {
   url      = env("DATABASE_URL")
 }
 
+model User {
+  // lucia internal fields
+  id       String    @id
+  sessions Session[]
+
+  // custom fields
+  username String @unique
+  password String
+
+  entities   Entity[]
+  payments   Payment[]
+  categories Category[]
+
+  @@map("lucia_user")
+}
+
+model Session {
+  // lucia internal fields
+  id        String   @id
+  userId    String
+  expiresAt DateTime
+  user      User     @relation(references: [id], fields: [userId], onDelete: Cascade)
+
+  @@map("lucia_session")
+}
+
 model Entity {
-  id                Int        @id @default(autoincrement())
-  userId            String     @map("user_id")
-  name              String
-  type              EntityType
-  defaultCategory   Category?  @relation(fields: [defaultCategoryId], references: [id])
-  defaultCategoryId Int?       @map("default_category_id")
-  createdAt         DateTime   @default(now()) @map("created_at")
-  updatedAt         DateTime   @updatedAt @map("updated_at")
+  id        Int        @id @default(autoincrement())
+  userId    String     @map("user_id")
+  user      User       @relation(fields: [userId], references: [id])
+  name      String
+  type      EntityType
+  createdAt DateTime   @default(now()) @map("created_at")
+  updatedAt DateTime   @updatedAt @map("updated_at")
 
   paymentsAsPayor Payment[] @relation("PayorEntity")
   paymentsAsPayee Payment[] @relation("PayeeEntity")
@@ -32,6 +57,7 @@ enum EntityType {
 model Payment {
   id         Int       @id @default(autoincrement())
   userId     String    @map("user_id")
+  user       User      @relation(fields: [userId], references: [id])
   amount     Int
   currency   String    @default("EUR")
   date       DateTime  @default(now())
@@ -51,13 +77,13 @@ model Payment {
 model Category {
   id        Int      @id @default(autoincrement())
   userId    String   @map("user_id")
+  user      User     @relation(fields: [userId], references: [id])
   name      String
   color     String
   createdAt DateTime @default(now()) @map("created_at")
   updatedAt DateTime @updatedAt @map("updated_at")
 
   payments Payment[]
-  Entity   Entity[]
 
   @@unique(fields: [userId, name])
   @@map("categories")

public/logo_t_hq_o.svg

@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
-        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns:serif="http://www.serif.com/" width="100%" height="100%" viewBox="0 0 2250 2250"
-     version="1.1" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"
-     style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g id="frame"><rect id="tl" x="0" y="0" width="125" height="520.833" style="fill:#f50;"/><rect
-        id="t" x="0" y="-0" width="2250" height="125" style="fill:#f50;"/><rect id="tr" x="2125" y="0" width="125"
-                                                                                height="520.833" style="fill:#f50;"/><rect
-        id="bl" x="0" y="1729.17" width="125" height="520.833" style="fill:#f50;"/><rect id="b" x="0" y="2125"
-                                                                                         width="2250" height="125"
-                                                                                         style="fill:#f50;"/><rect
-        id="br" x="2125" y="1729.17" width="125" height="520.833" style="fill:#f50;"/></g>
-    <g id="text"><g id="text1" serif:id="text" transform="matrix(1,0,0,0.947314,7.10543e-15,-3.78368)"><g transform="matrix(1636.19,0,0,1636.19,2149.91,1766.12)"></g><text
-            x="-57.321px" y="1766.12px" style="font-family:'Akshar-Regular', 'Akshar';font-size:1636.19px;fill:#f50;">t<tspan
-            x="513.711px 891.672px 1598.51px " y="1766.12px 1766.12px 1766.12px ">lkr</tspan></text></g>
-        <circle id="dot" cx="2156.78" cy="1578.59" r="88.542" style="fill:#f50;"/></g></svg>

public/logo_t_hq_w.svg

@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
-        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns:serif="http://www.serif.com/" width="100%" height="100%" viewBox="0 0 2250 2250"
-     version="1.1" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"
-     style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g id="frame"><rect id="tl" x="0" y="0" width="125" height="520.833" style="fill:#fff;"/><rect
-        id="t" x="0" y="-0" width="2250" height="125" style="fill:#fff;"/><rect id="tr" x="2125" y="0" width="125"
-                                                                                height="520.833" style="fill:#fff;"/><rect
-        id="bl" x="0" y="1729.17" width="125" height="520.833" style="fill:#fff;"/><rect id="b" x="0" y="2125"
-                                                                                         width="2250" height="125"
-                                                                                         style="fill:#fff;"/><rect
-        id="br" x="2125" y="1729.17" width="125" height="520.833" style="fill:#fff;"/></g>
-    <g id="text"><g id="text1" serif:id="text" transform="matrix(1,0,0,0.947314,7.10543e-15,-3.78368)"><g transform="matrix(1636.19,0,0,1636.19,2149.91,1766.12)"></g><text
-            x="-57.321px" y="1766.12px" style="font-family:'Akshar-Regular', 'Akshar';font-size:1636.19px;fill:#fff;">t<tspan
-            x="513.711px 891.672px 1598.51px " y="1766.12px 1766.12px 1766.12px ">lkr</tspan></text></g>
-        <circle id="dot" cx="2156.78" cy="1578.59" r="88.542" style="fill:#fff;"/></g></svg>

public/manifest.json

@@ -1,16 +0,0 @@
-{
-  "name": "Finances",
-  "short_name": "Finances",
-  "icons": [
-    {
-      "src": "/logo_t_hq_o.png",
-      "sizes": "512x512",
-      "type": "image/png"
-    }
-  ],
-  "theme_color": "#0B0908",
-  "background_color": "#0B0908",
-  "start_url": "/",
-  "display": "standalone",
-  "orientation": "portrait"
-}

src/app/account/page.tsx

@@ -1,50 +1,51 @@
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
 import React from 'react';
+import { getUser } from '@/auth';
+import { redirect } from 'next/navigation';
+import signOut from '@/lib/actions/signOut';
 import { Label } from '@/components/ui/label';
 import { Input } from '@/components/ui/input';
+import SignOutForm from '@/components/form/signOutForm';
+import { URL_SIGN_IN } from '@/lib/constants';
+import GenerateSampleDataForm from '@/components/form/generateSampleDataForm';
 import generateSampleData from '@/lib/actions/generateSampleData';
-import prisma from '@/prisma';
-import { ServerActionTrigger } from '@/components/form/serverActionTrigger';
-import clearAccountData from '@/lib/actions/clearAccountData';
-import { Button } from '@/components/ui/button';
-import { URL_SIGN_OUT } from '@/lib/constants';
-import { auth0 } from '@/lib/auth';
-import { redirect } from 'next/navigation';
+import { prismaClient } from '@/prisma';
 
 export default async function AccountPage() {
 
-    const session = await auth0.getSession();
-    if (!session) {
-        return redirect('/auth/login');
+    const user = await getUser();
+
+    if (!user) {
+        redirect(URL_SIGN_IN);
     }
-    const user = session.user;
 
     let paymentCount = 0;
-    paymentCount = await prisma.payment.count({
-        where: {
-            userId: user.sub,
-        },
-    });
-
     let entityCount = 0;
-    entityCount = await prisma.entity.count({
-        where: {
-            userId: user.sub,
-        },
-    });
-
     let categoryCount = 0;
-    categoryCount = await prisma.category.count({
-        where: {
-            userId: user.sub,
-        },
-    });
+
+    if (process.env.NODE_ENV === 'development') {
+        paymentCount = await prismaClient.payment.count({
+            where: {
+                userId: user.id,
+            },
+        });
+        entityCount = await prismaClient.entity.count({
+            where: {
+                userId: user.id,
+            },
+        });
+        categoryCount = await prismaClient.category.count({
+            where: {
+                userId: user.id,
+            },
+        });
+    }
 
     return (
         <div className="flex flex-col items-center">
-            <Card className="w-full max-w-md md:mt-12">
+            <Card className="w-full max-w-md mt-12">
                 <CardHeader>
-                    <CardTitle>Hey, {user.name}!</CardTitle>
+                    <CardTitle>Hey, {user?.username}!</CardTitle>
                     <CardDescription>This is your account overview.</CardDescription>
                 </CardHeader>
                 <CardContent className="space-y-2">
@@ -52,13 +53,13 @@ export default async function AccountPage() {
                         <Label>ID</Label>
                         <Input
                             disabled
-                            value={user.sub}/>
+                            value={user?.id}/>
                     </div>
                     <div>
                         <Label>Username</Label>
                         <Input
                             disabled
-                            value={user.name}/>
+                            value={user?.username}/>
                     </div>
                     <div className="flex flex-row items-center space-x-4">
                         <div>
@@ -81,52 +82,15 @@ export default async function AccountPage() {
                         </div>
                     </div>
                 </CardContent>
-                <CardFooter className="w-full grid gap-4 grid-cols-1 md:grid-cols-2">
-                    <ServerActionTrigger
-                        action={clearAccountData}
-                        dialog={{
-                            title: 'Clear account data',
-                            description: 'Are you sure you want to delete all payments, entities and categories from you account? This action is irreversible.',
-                            actionText: 'Clear data',
-                            actionVariant: 'destructive',
-                        }}
-                        variant="outline">
-                        Clear data
-                    </ServerActionTrigger>
-                    <a href={URL_SIGN_OUT}>
-                        <Button className="w-full">
-                            Sign Out
-                        </Button>
-                    </a>
+                <CardFooter className="space-x-4">
                     {
                         process.env.NODE_ENV === 'development' && (
-                            <ServerActionTrigger
-                                variant="outline"
-                                className="col-span-2"
-                                action={generateSampleData}>
-                                Generate sample data
-                            </ServerActionTrigger>
+                            <GenerateSampleDataForm onSubmit={generateSampleData}/>
                         )
                     }
+                    <SignOutForm onSubmit={signOut}/>
                 </CardFooter>
             </Card>
-            <div className="flex w-full items-center justify-between max-w-md mt-2 text-neutral-600">
-                <p>Version {process.env.appVersion}</p>
-                <div className="flex items-center justify-between space-x-4">
-                    <a
-                        target="_blank"
-                        className="hover:text-neutral-500 duration-100"
-                        href="https://github.com/MarkusThielker/next-finances">
-                        Source Code
-                    </a>
-                    <a
-                        target="_blank"
-                        className="hover:text-neutral-500 duration-100"
-                        href="https://github.com/MarkusThielker/next-finances/releases">
-                        Changelog
-                    </a>
-                </div>
-            </div>
         </div>
     );
 }

src/app/auth/layout.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export default function AuthLayout({
+    children,
+}: Readonly<{
+    children: React.ReactNode;
+}>) {
+    return (
+        <div className="flex justify-center">
+            {children}
+        </div>
+    );
+}

src/app/auth/signin/page.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
+import SignInForm from '@/components/form/signInForm';
+import signIn from '@/lib/actions/signIn';
+import Link from 'next/link';
+import { URL_SIGN_UP } from '@/lib/constants';
+
+export default async function SignInPage() {
+    return (
+        <Card className="w-full max-w-md mt-12">
+            <CardHeader>
+                <CardTitle>Sign in</CardTitle>
+                <CardDescription>Sign into your existing account</CardDescription>
+            </CardHeader>
+            <CardContent>
+                <SignInForm onSubmit={signIn}/>
+            </CardContent>
+            <CardFooter>
+                <Link href={URL_SIGN_UP}>
+                    Don&apos;t have an account? Sign up
+                </Link>
+            </CardFooter>
+        </Card>
+    );
+}

src/app/auth/signup/page.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
+import signUp from '@/lib/actions/signUp';
+import SignUpForm from '@/components/form/signUpForm';
+import Link from 'next/link';
+import { URL_SIGN_IN } from '@/lib/constants';
+
+export default async function SignUpPage() {
+    return (
+        <Card className="w-full max-w-md mt-12">
+            <CardHeader>
+                <CardTitle>Sign up</CardTitle>
+                <CardDescription>Create a new account.</CardDescription>
+            </CardHeader>
+            <CardContent>
+                <SignUpForm onSubmit={signUp}/>
+            </CardContent>
+            <CardFooter>
+                <Link href={URL_SIGN_IN}>
+                    Already have an account? Sign in
+                </Link>
+            </CardFooter>
+        </Card>
+    );
+}

src/app/categories/columns.tsx

@@ -25,7 +25,6 @@ export const columns = (
                     </svg>
                 );
             },
-            size: 65,
         },
         {
             accessorKey: 'createdAt',

src/app/categories/page.tsx

@@ -1,20 +1,15 @@
-import prisma from '@/prisma';
+import { getUser } from '@/auth';
+import { prismaClient } from '@/prisma';
 import React from 'react';
 import CategoryPageClientContent from '@/components/categoryPageClientComponents';
 import categoryCreateUpdate from '@/lib/actions/categoryCreateUpdate';
 import categoryDelete from '@/lib/actions/categoryDelete';
-import { auth0 } from '@/lib/auth';
-import { redirect } from 'next/navigation';
 
 export default async function CategoriesPage() {
 
-    const session = await auth0.getSession();
-    if (!session) {
-        return redirect('/auth/login');
-    }
-    const user = session.user;
+    const user = await getUser();
 
-    const categories = await prisma.category.findMany({
+    const categories = await prismaClient.category.findMany({
         where: {
             userId: user?.id,
         },
@@ -30,6 +25,6 @@ export default async function CategoriesPage() {
             categories={categories}
             onSubmit={categoryCreateUpdate}
             onDelete={categoryDelete}
-            className="flex flex-col justify-center space-y-4"/>
+            className="flex flex-col justify-center space-y-4 p-10"/>
     );
 }

src/app/entities/columns.tsx

@@ -1,13 +1,12 @@
 'use client';
 
 import { ColumnDef } from '@tanstack/react-table';
-import { Category, Entity } from '@prisma/client';
+import { Entity } from '@prisma/client';
 import { CellContext, ColumnDefTemplate } from '@tanstack/table-core';
 import { format } from 'date-fns';
 
 export const columns = (
     actionCell: ColumnDefTemplate<CellContext<Entity, unknown>>,
-    categories: Category[],
 ) => {
 
     return [
@@ -18,31 +17,6 @@ export const columns = (
         {
             accessorKey: 'type',
             header: 'Type',
-            size: 100,
-        },
-        {
-            accessorKey: 'defaultCategoryId',
-            header: 'Default Category',
-            cell: ({row}) => {
-                const category = categories.find((category) => category.id === row.original.defaultCategoryId);
-                return (
-                    <>
-                        {
-                            category && (
-                                <div className="flex items-center space-x-4">
-                                    <svg className="h-5" fill={category?.color} viewBox="0 0 20 20"
-                                         xmlns="http://www.w3.org/2000/svg">
-                                        <circle cx="10" cy="10" r="10"/>
-                                    </svg>
-                                    <p>{category?.name ?? '-'}</p>
-                                </div>
-                            )
-                        }
-
-                    </>
-                );
-            },
-            size: 200,
         },
         {
             accessorKey: 'createdAt',

src/app/entities/page.tsx

@@ -1,20 +1,15 @@
-import prisma from '@/prisma';
+import { prismaClient } from '@/prisma';
+import { getUser } from '@/auth';
 import React from 'react';
 import EntityPageClientContent from '@/components/entityPageClientComponents';
 import entityCreateUpdate from '@/lib/actions/entityCreateUpdate';
 import entityDelete from '@/lib/actions/entityDelete';
-import { auth0 } from '@/lib/auth';
-import { redirect } from 'next/navigation';
 
 export default async function EntitiesPage() {
 
-    const session = await auth0.getSession();
-    if (!session) {
-        return redirect('/auth/login');
-    }
-    const user = session.user;
+    const user = await getUser();
 
-    const entities = await prisma.entity.findMany({
+    const entities = await prismaClient.entity.findMany({
         where: {
             userId: user?.id,
         },
@@ -28,26 +23,11 @@ export default async function EntitiesPage() {
         ],
     });
 
-    const categories = await prisma.category.findMany({
-        where: {
-            userId: user?.id,
-        },
-        orderBy: [
-            {
-                name: 'asc',
-            },
-            {
-                id: 'asc',
-            },
-        ],
-    });
-
     return (
         <EntityPageClientContent
             entities={entities}
-            categories={categories}
             onSubmit={entityCreateUpdate}
             onDelete={entityDelete}
-            className="flex flex-col justify-center space-y-4"/>
+            className="flex flex-col justify-center space-y-4 p-10"/>
     );
 }

src/app/layout.tsx

@@ -1,4 +1,4 @@
-import type { Viewport } from 'next';
+import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import './globals.css';
 import { cn } from '@/lib/utils';
@@ -8,31 +8,9 @@ import Navigation from '@/components/navigation';
 
 const inter = Inter({subsets: ['latin']});
 
-const APP_NAME = 'Finances';
-const APP_DEFAULT_TITLE = 'Finances';
-const APP_TITLE_TEMPLATE = `%s | ${APP_DEFAULT_TITLE}`;
-const APP_DESCRIPTION = 'Track your finances with ease';
-
-export const metadata = {
-    applicationName: APP_NAME,
-    title: {
-        default: APP_DEFAULT_TITLE,
-        template: APP_TITLE_TEMPLATE,
-    },
-    description: APP_DESCRIPTION,
-    appleWebApp: {
-        capable: true,
-        statusBarStyle: 'default',
-        title: APP_DEFAULT_TITLE,
-    },
-    formatDetection: {
-        telephone: false,
-    },
-};
-
-export const viewport: Viewport = {
-    themeColor: '#0B0908',
-    width: 'device-width',
+export const metadata: Metadata = {
+    title: 'Finances',
+    description: 'Track your finances with ease',
 };
 
 export default function RootLayout({
@@ -42,19 +20,12 @@ export default function RootLayout({
 }>) {
     return (
         <html lang="en">
-        <head>
-            <link crossOrigin="use-credentials" rel="manifest" href="/manifest.json"/>
-            <link
-                rel="icon"
-                href="/logo_t_hq_o.svg"
-            />
-        </head>
         <body className={cn('dark', inter.className)}>
         <Navigation/>
-        <main className="p-4 sm:p-8">
+        <main>
             {children}
+            <Toaster/>
         </main>
-        <Toaster/>
         </body>
         </html>
     );

src/app/page.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import { Category, Entity, EntityType } from '@prisma/client';
 import { Scope, ScopeType } from '@/lib/types/scope';
-import prisma from '@/prisma';
+import { prismaClient } from '@/prisma';
+import { getUser } from '@/auth';
 import DashboardPageClient from '@/components/dashboardPageClientComponents';
-import { auth0 } from '@/lib/auth';
-import { redirect } from 'next/navigation';
 
 export type CategoryNumber = {
     category: Category,
@@ -16,20 +15,19 @@ export type EntityNumber = {
     value: number,
 }
 
-export default async function DashboardPage(props: { searchParams?: Promise<{ scope: ScopeType }> }) {
+export default async function DashboardPage(props: { searchParams?: { scope: ScopeType } }) {
 
-    const session = await auth0.getSession();
-    if (!session) {
-        return redirect('/auth/login');
+    const user = await getUser();
+    if (!user) {
+        return;
     }
-    const user = session.user;
 
-    const scope = Scope.of((await props.searchParams)?.scope || ScopeType.ThisMonth);
+    const scope = Scope.of(props.searchParams?.scope || ScopeType.ThisMonth);
 
     // get all payments in the current scope
-    const payments = await prisma.payment.findMany({
+    const payments = await prismaClient.payment.findMany({
         where: {
-            userId: user.sub,
+            userId: user?.id,
             date: {
                 gte: scope.start,
                 lte: scope.end,
@@ -110,7 +108,6 @@ export default async function DashboardPage(props: { searchParams?: Promise<{ sc
             userId: '',
             name: 'Other',
             type: EntityType.Entity,
-            defaultCategoryId: null,
             createdAt: new Date(),
             updatedAt: new Date(),
         },
@@ -203,7 +200,7 @@ export default async function DashboardPage(props: { searchParams?: Promise<{ sc
             categoryPercentages={categoryPercentages}
             entityExpenses={entityExpensesFormat}
             entityPercentages={entityPercentages}
-            className="flex flex-col justify-center space-y-4"
+            className="flex flex-col justify-center space-y-4 p-10"
         />
     );
 }

src/app/payments/columns.tsx

@@ -18,7 +18,6 @@ export const columns = (
             cell: ({row}) => {
                 return format(row.original.date, 'PPP');
             },
-            size: 175,
         },
         {
             accessorKey: 'amount',
@@ -29,7 +28,6 @@ export const columns = (
                     currency: 'EUR',
                 }).format(row.getValue('amount') as number / 100);
             },
-            size: 70,
         },
         {
             accessorKey: 'payorId',
@@ -38,7 +36,6 @@ export const columns = (
                 const entity = entities.find((entity) => entity.id === row.original.payorId);
                 return entity?.name ?? '-';
             },
-            size: 200,
         },
         {
             accessorKey: 'payeeId',
@@ -47,35 +44,18 @@ export const columns = (
                 const entity = entities.find((entity) => entity.id === row.original.payeeId);
                 return entity?.name ?? '-';
             },
-            size: 200,
         },
         {
             accessorKey: 'categoryId',
             header: 'Category',
             cell: ({row}) => {
                 const category = categories.find((category) => category.id === row.original.categoryId);
-                return (
-                    <>
-                        {
-                            category && (
-                                <div className="flex items-center space-x-4">
-                                    <svg className="h-5" fill={category?.color} viewBox="0 0 20 20"
-                                         xmlns="http://www.w3.org/2000/svg">
-                                        <circle cx="10" cy="10" r="10"/>
-                                    </svg>
-                                    <p>{category?.name ?? '-'}</p>
-                                </div>
-                            )
-                        }
-                    </>
-                );
+                return category?.name ?? '-';
             },
-            size: 200,
         },
         {
             accessorKey: 'note',
             header: 'Note',
-            size: 200,
         },
         {
             id: 'actions',

src/app/payments/page.tsx

@@ -1,22 +1,17 @@
-import prisma from '@/prisma';
+import { getUser } from '@/auth';
+import { prismaClient } from '@/prisma';
 import React from 'react';
 import PaymentPageClientContent from '@/components/paymentPageClientComponents';
 import paymentCreateUpdate from '@/lib/actions/paymentCreateUpdate';
 import paymentDelete from '@/lib/actions/paymentDelete';
-import { auth0 } from '@/lib/auth';
-import { redirect } from 'next/navigation';
 
 export default async function PaymentsPage() {
 
-    const session = await auth0.getSession();
-    if (!session) {
-        return redirect('/auth/login');
-    }
-    const user = session.user;
+    const user = await getUser();
 
-    const payments = await prisma.payment.findMany({
+    const payments = await prismaClient.payment.findMany({
         where: {
-            userId: user.sub,
+            userId: user?.id,
         },
         orderBy: [
             {
@@ -28,9 +23,9 @@ export default async function PaymentsPage() {
         ],
     });
 
-    const entities = await prisma.entity.findMany({
+    const entities = await prismaClient.entity.findMany({
         where: {
-            userId: user.sub,
+            userId: user?.id,
         },
         orderBy: [
             {
@@ -42,9 +37,9 @@ export default async function PaymentsPage() {
         ],
     });
 
-    const categories = await prisma.category.findMany({
+    const categories = await prismaClient.category.findMany({
         where: {
-            userId: user.sub,
+            userId: user?.id,
         },
         orderBy: [
             {
@@ -63,6 +58,6 @@ export default async function PaymentsPage() {
             categories={categories}
             onSubmit={paymentCreateUpdate}
             onDelete={paymentDelete}
-            className="flex flex-col justify-center space-y-4"/>
+            className="flex flex-col justify-center space-y-4 p-10"/>
     );
 }

src/app/service-worker.ts

@@ -1,46 +0,0 @@
-import type { PrecacheEntry } from '@serwist/precaching';
-import { defaultCache } from '@serwist/next/worker';
-import { Serwist, SerwistGlobalConfig } from 'serwist';
-
-declare const self: ServiceWorkerGlobalScope & {
-    __SW_MANIFEST: (PrecacheEntry | string)[] | undefined;
-};
-
-declare global {
-    interface WorkerGlobalScope extends SerwistGlobalConfig {
-        // Change this attribute's name to your \`injectionPoint\`.
-        // \`injectionPoint\` is an InjectManifest option.
-        // See https://serwist.pages.dev/docs/build/configuring
-        __SW_MANIFEST: (PrecacheEntry | string)[] | undefined;
-    }
-}
-
-const serwist = new Serwist({
-    // A list of URLs that should be cached. Usually, you don't generate
-    // this list yourself; rather, you'd rely on a Serwist build tool/your framework
-    // to do it for you. In this example, it is generated by \`@serwist/vite\`.
-    precacheEntries: self.__SW_MANIFEST,
-    // Options to customize how Serwist precaches the URLs.
-    precacheOptions: {
-        // Whether outdated caches should be removed.
-        cleanupOutdatedCaches: true,
-        concurrency: 10,
-        ignoreURLParametersMatching: [],
-    },
-    // Whether the service worker should skip waiting and become the active one.
-    skipWaiting: true,
-    // Whether the service worker should claim any currently available clients.
-    clientsClaim: true,
-    // Whether navigation preloading should be used.
-    navigationPreload: true,
-    // Whether Serwist should log in development mode.
-    disableDevLogs: true,
-    // A list of runtime caching entries. When a request is made and its URL match
-    // any of the entries, the response to it will be cached according to the matching
-    // entry's \`handler\`. This does not apply to precached URLs.
-    runtimeCaching: defaultCache,
-    // Other options...
-    // See https://serwist.pages.dev/docs/serwist/core/serwist
-});
-
-serwist.addEventListeners();

src/auth.ts

@@ -0,0 +1,67 @@
+import { Lucia } from 'lucia';
+import { PrismaAdapter } from '@lucia-auth/adapter-prisma';
+import { cookies } from 'next/headers';
+import { prismaClient } from '@/prisma';
+
+const adapter = new PrismaAdapter(prismaClient.session, prismaClient.user);
+
+export const lucia = new Lucia(adapter, {
+    sessionCookie: {
+        expires: false,
+        attributes: {
+            sameSite: 'strict',
+            domain: process.env.NODE_ENV === 'production' ? process.env.COOKIE_DOMAIN : undefined,
+            secure: process.env.NODE_ENV === 'production',
+        },
+    },
+    getUserAttributes: (attributes) => {
+        return {
+            username: attributes.username,
+        };
+    },
+});
+
+declare module 'lucia' {
+    interface Register {
+        Lucia: typeof lucia;
+        DatabaseUserAttributes: DatabaseUserAttributes;
+    }
+}
+
+interface DatabaseUserAttributes {
+    username: string;
+}
+
+export function getSessionId() {
+    return cookies().get(lucia.sessionCookieName)?.value ?? null;
+}
+
+export async function getSession() {
+    const sessionId = getSessionId();
+    if (!sessionId) {
+        return null;
+    }
+    const {session} = await lucia.validateSession(sessionId);
+    return session;
+}
+
+export async function getUser() {
+    const sessionId = getSessionId();
+    if (!sessionId) {
+        return null;
+    }
+    const {user, session} = await lucia.validateSession(sessionId);
+    try {
+        if (session && session.fresh) {
+            const sessionCookie = lucia.createSessionCookie(session.id);
+            cookies().set(sessionCookie.name, sessionCookie.value, sessionCookie.attributes);
+        }
+        if (!session) {
+            const sessionCookie = lucia.createBlankSessionCookie();
+            cookies().set(sessionCookie.name, sessionCookie.value, sessionCookie.attributes);
+        }
+    } catch {
+        // Next.js throws error when attempting to set cookies when rendering page
+    }
+    return user;
+}

src/components/categoryPageClientComponents.tsx

@@ -23,8 +23,6 @@ import {
 } from '@/components/ui/alert-dialog';
 import { categoryFormSchema } from '@/lib/form-schemas/categoryFormSchema';
 import CategoryForm from '@/components/form/categoryForm';
-import { useMediaQuery } from '@/lib/hooks/useMediaQuery';
-import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger } from '@/components/ui/drawer';
 
 export default function CategoryPageClientContent({categories, onSubmit, onDelete, className}: {
     categories: Category[],
@@ -33,7 +31,6 @@ export default function CategoryPageClientContent({categories, onSubmit, onDelet
     className: string,
 }) {
 
-    const isDesktop = useMediaQuery('(min-width: 768px)');
     const router = useRouter();
 
     const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
@@ -100,51 +97,26 @@ export default function CategoryPageClientContent({categories, onSubmit, onDelet
                 <p className="text-3xl font-semibold">Categories</p>
 
                 {/* Edit dialog */}
-                {
-                    isDesktop ? (
-                        <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
-                            <DialogTrigger asChild>
-                                <Button
-                                    onClick={() => {
-                                        setSelectedCategory(undefined);
-                                        setIsEditDialogOpen(true);
-                                    }}>
-                                    Create Category
-                                </Button>
-                            </DialogTrigger>
-                            <DialogContent>
-                                <DialogHeader>
-                                    <DialogTitle>{selectedCategory?.id ? 'Update Category' : 'Create Category'}</DialogTitle>
-                                </DialogHeader>
-                                <CategoryForm
-                                    value={selectedCategory}
-                                    onSubmit={handleSubmit}
-                                    className="flex flex-row space-x-4 py-4"/>
-                            </DialogContent>
-                        </Dialog>
-                    ) : (
-                        <Drawer open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
-                            <DrawerTrigger asChild>
-                                <Button
-                                    onClick={() => {
-                                        setSelectedCategory(undefined);
-                                        setIsEditDialogOpen(true);
-                                    }}>
-                                    Create Category
-                                </Button>
-                            </DrawerTrigger>
-                            <DrawerContent className="p-4">
-                                <DrawerHeader>
-                                    <DrawerTitle>{selectedCategory?.id ? 'Update Category' : 'Create Category'}</DrawerTitle>
-                                </DrawerHeader>
-                                <CategoryForm
-                                    value={selectedCategory}
-                                    onSubmit={handleSubmit}
-                                    className="flex flex-row space-x-4 py-4"/>
-                            </DrawerContent>
-                        </Drawer>
-                    )
-                }
+                <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
+                    <DialogTrigger asChild>
+                        <Button
+                            onClick={() => {
+                                setSelectedCategory(undefined);
+                                setIsEditDialogOpen(true);
+                            }}>
+                            Create Category
+                        </Button>
+                    </DialogTrigger>
+                    <DialogContent>
+                        <DialogHeader>
+                            <DialogTitle>{selectedCategory?.id ? 'Update Category' : 'Create Category'}</DialogTitle>
+                        </DialogHeader>
+                        <CategoryForm
+                            value={selectedCategory}
+                            onSubmit={handleSubmit}
+                            className="flex flex-row space-x-4 py-4"/>
+                    </DialogContent>
+                </Dialog>
             </div>
 
             {/* Data Table */}

src/components/dashboardPageClientComponents.tsx

@@ -49,7 +49,7 @@ export default function DashboardPageClientContent(
     return (
         <div className={className}>
             <div className="flex flex-col space-y-4">
-                <div className="flex items-center justify-between w-full space-x-8">
+                <div className="flex items-center justify-between w-full">
 
                     <p className="text-3xl font-semibold">Dashboard</p>
 

src/components/entityPageClientComponents.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Category, Entity } from '@prisma/client';
+import { Entity } from '@prisma/client';
 import React, { useState } from 'react';
 import { CellContext } from '@tanstack/table-core';
 import { Button } from '@/components/ui/button';
@@ -24,18 +24,14 @@ import {
     AlertDialogFooter,
     AlertDialogHeader,
 } from '@/components/ui/alert-dialog';
-import { useMediaQuery } from '@/lib/hooks/useMediaQuery';
-import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger } from '@/components/ui/drawer';
 
-export default function EntityPageClientContent({entities, categories, onSubmit, onDelete, className}: {
+export default function EntityPageClientContent({entities, onSubmit, onDelete, className}: {
     entities: Entity[],
-    categories: Category[],
     onSubmit: (data: z.infer<typeof entityFormSchema>) => Promise<ActionResponse>,
     onDelete: (id: number) => Promise<ActionResponse>,
     className: string,
 }) {
 
-    const isDesktop = useMediaQuery('(min-width: 768px)');
     const router = useRouter();
 
     const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
@@ -129,53 +125,26 @@ export default function EntityPageClientContent({entities, categories, onSubmit,
                 <p className="text-3xl font-semibold">Entities</p>
 
                 {/* Edit dialog */}
-                {
-                    isDesktop ? (
-                        <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
-                            <DialogTrigger asChild>
-                                <Button
-                                    onClick={() => {
-                                        setSelectedEntity(undefined);
-                                        setIsEditDialogOpen(true);
-                                    }}>
-                                    Create Entity
-                                </Button>
-                            </DialogTrigger>
-                            <DialogContent>
-                                <DialogHeader>
-                                    <DialogTitle>{selectedEntity?.id ? 'Update Entity' : 'Create Entity'}</DialogTitle>
-                                </DialogHeader>
-                                <EntityForm
-                                    value={selectedEntity}
-                                    categories={categories}
-                                    onSubmit={handleSubmit}
-                                    className="grid grid-cols-1 md:grid-cols-2 gap-4 py-4"/>
-                            </DialogContent>
-                        </Dialog>
-                    ) : (
-                        <Drawer open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
-                            <DrawerTrigger asChild>
-                                <Button
-                                    onClick={() => {
-                                        setSelectedEntity(undefined);
-                                        setIsEditDialogOpen(true);
-                                    }}>
-                                    Create Entity
-                                </Button>
-                            </DrawerTrigger>
-                            <DrawerContent className="p-4">
-                                <DrawerHeader>
-                                    <DrawerTitle>{selectedEntity?.id ? 'Update Entity' : 'Create Entity'}</DrawerTitle>
-                                </DrawerHeader>
-                                <EntityForm
-                                    value={selectedEntity}
-                                    categories={categories}
-                                    onSubmit={handleSubmit}
-                                    className="grid grid-cols-1 md:grid-cols-2 gap-4 py-4"/>
-                            </DrawerContent>
-                        </Drawer>
-                    )
-                }
+                <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
+                    <DialogTrigger asChild>
+                        <Button
+                            onClick={() => {
+                                setSelectedEntity(undefined);
+                                setIsEditDialogOpen(true);
+                            }}>
+                            Create Entity
+                        </Button>
+                    </DialogTrigger>
+                    <DialogContent>
+                        <DialogHeader>
+                            <DialogTitle>{selectedEntity?.id ? 'Update Entity' : 'Create Entity'}</DialogTitle>
+                        </DialogHeader>
+                        <EntityForm
+                            value={selectedEntity}
+                            onSubmit={handleSubmit}
+                            className="grid grid-cols-1 md:grid-cols-2 gap-4 py-4"/>
+                    </DialogContent>
+                </Dialog>
             </div>
 
             {/* Filter input */}
@@ -187,7 +156,7 @@ export default function EntityPageClientContent({entities, categories, onSubmit,
             {/* Data Table */}
             <DataTable
                 className="w-full"
-                columns={columns(actionCell, categories)}
+                columns={columns(actionCell)}
                 data={filterEntities(entities, filter)}
                 pagination/>
 

src/components/form/entityForm.tsx

@@ -12,13 +12,11 @@ import { useRouter } from 'next/navigation';
 import { toast } from 'sonner';
 import { sonnerContent } from '@/components/ui/sonner';
 import { entityFormSchema } from '@/lib/form-schemas/entityFormSchema';
-import { Category, Entity, EntityType } from '@prisma/client';
+import { Entity, EntityType } from '@prisma/client';
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { AutoCompleteInput } from '@/components/ui/auto-complete-input';
 
-export default function EntityForm({value, categories, onSubmit, className}: {
+export default function EntityForm({value, onSubmit, className}: {
     value: Entity | undefined,
-    categories: Category[],
     onSubmit: (data: z.infer<typeof entityFormSchema>) => Promise<ActionResponse>
     className?: string
 }) {
@@ -31,7 +29,6 @@ export default function EntityForm({value, categories, onSubmit, className}: {
             id: value?.id ?? undefined,
             name: value?.name ?? '',
             type: value?.type ?? EntityType.Entity,
-            defaultCategoryId: value?.defaultCategoryId ?? undefined,
         },
     });
 
@@ -43,13 +40,6 @@ export default function EntityForm({value, categories, onSubmit, className}: {
         }
     };
 
-    const categoriesMapped = categories?.map((category) => {
-        return {
-            label: category.name,
-            value: category.id,
-        };
-    }) ?? [];
-
     return (
         <Form {...form}>
             <form autoComplete="off" onSubmit={form.handleSubmit(handleSubmit)}>
@@ -104,22 +94,6 @@ export default function EntityForm({value, categories, onSubmit, className}: {
                             </FormItem>
                         )}
                     />
-                    <FormField
-                        control={form.control}
-                        name="defaultCategoryId"
-                        render={({field}) => (
-                            <FormItem>
-                                <FormLabel>Category</FormLabel>
-                                <FormControl>
-                                    <AutoCompleteInput
-                                        placeholder="Select category"
-                                        items={categoriesMapped}
-                                        {...field} />
-                                </FormControl>
-                                <FormMessage/>
-                            </FormItem>
-                        )}
-                    />
                 </div>
                 <Button type="submit" className="w-full">{value?.id ? 'Update Entity' : 'Create Entity'}</Button>
             </form>

src/components/form/generateSampleDataForm.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import React from 'react';
+import { useRouter } from 'next/navigation';
+import { toast } from 'sonner';
+import { sonnerContent } from '@/components/ui/sonner';
+import { ActionResponse } from '@/lib/types/actionResponse';
+
+export default function GenerateSampleDataForm({onSubmit}: { onSubmit: () => Promise<ActionResponse> }) {
+
+    const router = useRouter();
+
+    const handleSubmit = async () => {
+        const response = await onSubmit();
+        toast(sonnerContent(response));
+        router.refresh();
+    };
+
+    return (
+        <Button className="w-full" variant="outline" onClick={handleSubmit}>Generate sample data</Button>
+    );
+}

src/components/form/paymentForm.tsx

@@ -5,7 +5,7 @@ import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
-import React, { useRef } from 'react';
+import React, { useState } from 'react';
 import { Button } from '@/components/ui/button';
 import { ActionResponse } from '@/lib/types/actionResponse';
 import { useRouter } from 'next/navigation';
@@ -16,11 +16,11 @@ import { paymentFormSchema } from '@/lib/form-schemas/paymentFormSchema';
 import CurrencyInput from '@/components/ui/currency-input';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { cn } from '@/lib/utils';
-import { CalendarIcon } from 'lucide-react';
+import { CalendarIcon, Check, ChevronsUpDown } from 'lucide-react';
 import { format } from 'date-fns';
 import { Calendar } from '@/components/ui/calendar';
+import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
 import { Textarea } from '@/components/ui/textarea';
-import { AutoCompleteInput } from '@/components/ui/auto-complete-input';
 
 export default function PaymentForm({value, entities, categories, onSubmit, className}: {
     value: Payment | undefined,
@@ -32,6 +32,12 @@ export default function PaymentForm({value, entities, categories, onSubmit, clas
 
     const router = useRouter();
 
+    const [filter, setFilter] = useState<string>('');
+
+    const [payorOpen, setPayorOpen] = useState(false);
+    const [payeeOpen, setPayeeOpen] = useState(false);
+    const [categoryOpen, setCategoryOpen] = useState(false);
+
     const form = useForm<z.infer<typeof paymentFormSchema>>({
         resolver: zodResolver(paymentFormSchema),
         defaultValues: {
@@ -67,10 +73,6 @@ export default function PaymentForm({value, entities, categories, onSubmit, clas
         };
     }) ?? [];
 
-    const payeeRef = useRef<HTMLInputElement>({} as HTMLInputElement);
-    const categoryRef = useRef<HTMLInputElement>({} as HTMLInputElement);
-    const submitRef = useRef<HTMLButtonElement>({} as HTMLButtonElement);
-
     return (
         <Form {...form}>
             <form autoComplete="off" onSubmit={form.handleSubmit(handleSubmit)}>
@@ -125,7 +127,10 @@ export default function PaymentForm({value, entities, categories, onSubmit, clas
                                         <Calendar
                                             mode="single"
                                             selected={field.value}
-                                            onSelect={field.onChange}
+                                            onSelect={(e) => {
+                                                field.onChange(e);
+                                            }}
+                                            initialFocus
                                         />
                                     </PopoverContent>
                                 </Popover>
@@ -140,18 +145,61 @@ export default function PaymentForm({value, entities, categories, onSubmit, clas
                         render={({field}) => (
                             <FormItem>
                                 <FormLabel>Payor</FormLabel>
-                                <FormControl>
-                                    <AutoCompleteInput
-                                        placeholder="Select payor"
-                                        items={entitiesMapped}
-                                        {...field}
-                                        onChange={(e) => {
-                                            field.onChange(e);
-                                            if (e && e.target.value) {
-                                                payeeRef && payeeRef.current.focus();
-                                            }
-                                        }}/>
-                                </FormControl>
+                                <Popover open={payorOpen} onOpenChange={(open) => {
+                                    setPayorOpen(open);
+                                    setFilter('');
+                                }}>
+                                    <PopoverTrigger asChild>
+                                        <FormControl>
+                                            <Button
+                                                variant="outline"
+                                                role="combobox"
+                                                className={cn(
+                                                    'w-full justify-between',
+                                                    !field.value && 'text-muted-foreground',
+                                                )}
+                                            >
+                                                {field.value
+                                                    ? entitiesMapped.find(
+                                                        (item) => item.value === field.value,
+                                                    )?.label
+                                                    : 'Select entity'}
+                                                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50"/>
+                                            </Button>
+                                        </FormControl>
+                                    </PopoverTrigger>
+                                    <PopoverContent className="w-[225px] p-0">
+                                        <input
+                                            value={filter}
+                                            onChange={(e) => setFilter(e.target.value)}
+                                            className="flex h-10 w-full rounded-md border-b border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+                                            placeholder="Search..."/>
+                                        <ScrollArea className="h-64">
+                                            {entitiesMapped
+                                                .filter((entity) => entity.label.toLowerCase().includes(filter.toLowerCase()))
+                                                .map((item) => (
+                                                    <div
+                                                        className="relative flex cursor-pointer hover:bg-white/10 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"
+                                                        key={item.value}
+                                                        onClick={() => {
+                                                            field.onChange(item.value);
+                                                            setPayorOpen(false);
+                                                        }}>
+                                                        <Check
+                                                            className={cn(
+                                                                'mr-2 h-4 w-4',
+                                                                item.value === field.value
+                                                                    ? 'opacity-100'
+                                                                    : 'opacity-0',
+                                                            )}
+                                                        />
+                                                        {item.label}
+                                                    </div>
+                                                ))}
+                                            <ScrollBar orientation="vertical"/>
+                                        </ScrollArea>
+                                    </PopoverContent>
+                                </Popover>
                                 <FormMessage/>
                             </FormItem>
                         )}
@@ -163,26 +211,62 @@ export default function PaymentForm({value, entities, categories, onSubmit, clas
                         render={({field}) => (
                             <FormItem>
                                 <FormLabel>Payee</FormLabel>
-                                <FormControl ref={payeeRef}>
-                                    <AutoCompleteInput
-                                        placeholder="Select payee"
-                                        items={entitiesMapped}
-                                        {...field}
-                                        onChange={(e) => {
-                                            field.onChange(e);
-                                            if (e && e.target.value) {
-                                                const entity = entities.find((entity) => entity.id === Number(e.target.value));
-
-                                                // only focus category input if payee has no default category
-                                                if (entity?.defaultCategoryId !== null) {
-                                                    form.setValue('categoryId', entity?.defaultCategoryId);
-                                                    submitRef && submitRef.current.focus();
-                                                } else {
-                                                    categoryRef && categoryRef.current.focus();
-                                                }
-                                            }
-                                        }}/>
-                                </FormControl>
+                                <Popover open={payeeOpen} onOpenChange={(open) => {
+                                    setPayeeOpen(open);
+                                    setFilter('');
+                                }}>
+                                    <PopoverTrigger asChild>
+                                        <FormControl>
+                                            <Button
+                                                variant="outline"
+                                                role="combobox"
+                                                className={cn(
+                                                    'w-full justify-between',
+                                                    !field.value && 'text-muted-foreground',
+                                                )}
+                                            >
+                                                {field.value
+                                                    ? entitiesMapped.find(
+                                                        (item) => item.value === field.value,
+                                                    )?.label
+                                                    : 'Select entity'}
+                                                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50"/>
+                                            </Button>
+                                        </FormControl>
+                                    </PopoverTrigger>
+                                    <PopoverContent className="w-[225px] p-0">
+                                        <input
+                                            value={filter}
+                                            onChange={(e) => setFilter(e.target.value)}
+                                            className="flex h-10 w-full rounded-md border-b border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+                                            placeholder="Search..."/>
+                                        <ScrollArea className="h-40">
+                                            {entitiesMapped
+                                                .filter((entity) => entity.label.toLowerCase().includes(filter.toLowerCase()))
+                                                .map((item) => (
+                                                    <div
+                                                        className="relative flex cursor-pointer hover:bg-white/10 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"
+                                                        key={item.value}
+                                                        onClick={() => {
+                                                            field.onChange(item.value);
+                                                            setPayeeOpen(false);
+                                                        }}
+                                                    >
+                                                        <Check
+                                                            className={cn(
+                                                                'mr-2 h-4 w-4',
+                                                                item.value === field.value
+                                                                    ? 'opacity-100'
+                                                                    : 'opacity-0',
+                                                            )}
+                                                        />
+                                                        {item.label}
+                                                    </div>
+                                                ))}
+                                            <ScrollBar orientation="vertical"/>
+                                        </ScrollArea>
+                                    </PopoverContent>
+                                </Popover>
                                 <FormMessage/>
                             </FormItem>
                         )}
@@ -194,19 +278,62 @@ export default function PaymentForm({value, entities, categories, onSubmit, clas
                         render={({field}) => (
                             <FormItem>
                                 <FormLabel>Category</FormLabel>
-                                <FormControl ref={categoryRef}>
-                                    <AutoCompleteInput
-                                        placeholder="Select category"
-                                        items={categoriesMapped}
-                                        {...field}
-                                        onChange={(e) => {
-                                            field.onChange(e);
-                                            if (e && e.target.value) {
-                                                submitRef && submitRef.current.focus();
-                                            }
-                                        }}
-                                    />
-                                </FormControl>
+                                <Popover open={categoryOpen} onOpenChange={(open) => {
+                                    setCategoryOpen(open);
+                                    setFilter('');
+                                }}>
+                                    <PopoverTrigger asChild>
+                                        <FormControl>
+                                            <Button
+                                                variant="outline"
+                                                role="combobox"
+                                                className={cn(
+                                                    'w-full justify-between',
+                                                    !field.value && 'text-muted-foreground',
+                                                )}
+                                            >
+                                                {field.value
+                                                    ? categoriesMapped.find(
+                                                        (item) => item.value === field.value,
+                                                    )?.label
+                                                    : 'Select entity'}
+                                                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50"/>
+                                            </Button>
+                                        </FormControl>
+                                    </PopoverTrigger>
+                                    <PopoverContent className="w-[225px] p-0">
+                                        <input
+                                            value={filter}
+                                            onChange={(e) => setFilter(e.target.value)}
+                                            className="flex h-10 w-full rounded-md border-b border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+                                            placeholder="Search..."/>
+                                        <ScrollArea className="h-40">
+                                            {categoriesMapped
+                                                .filter((entity) => entity.label.toLowerCase().includes(filter.toLowerCase()))
+                                                .map((item) => (
+                                                    <div
+                                                        className="relative flex cursor-pointer hover:bg-white/10 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"
+                                                        key={item.value}
+                                                        onClick={() => {
+                                                            field.onChange(item.value);
+                                                            setCategoryOpen(false);
+                                                        }}
+                                                    >
+                                                        <Check
+                                                            className={cn(
+                                                                'mr-2 h-4 w-4',
+                                                                item.value === field.value
+                                                                    ? 'opacity-100'
+                                                                    : 'opacity-0',
+                                                            )}
+                                                        />
+                                                        {item.label}
+                                                    </div>
+                                                ))}
+                                            <ScrollBar orientation="vertical"/>
+                                        </ScrollArea>
+                                    </PopoverContent>
+                                </Popover>
                                 <FormMessage/>
                             </FormItem>
                         )}
@@ -227,8 +354,7 @@ export default function PaymentForm({value, entities, categories, onSubmit, clas
                     )}
                 />
 
-                <Button type="submit" ref={submitRef}
-                        className="w-full">{value?.id ? 'Update Payment' : 'Create Payment'}</Button>
+                <Button type="submit" className="w-full">{value?.id ? 'Update Payment' : 'Create Payment'}</Button>
             </form>
         </Form>
     );

src/components/form/serverActionTrigger.tsx

@@ -1,100 +0,0 @@
-'use client';
-
-import { Button, buttonVariants } from '@/components/ui/button';
-import React from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import { cn } from '@/lib/utils';
-import { useRouter } from 'next/navigation';
-import { toast } from 'sonner';
-import { sonnerContent } from '@/components/ui/sonner';
-import type { VariantProps } from 'class-variance-authority';
-import { ActionResponse } from '@/lib/types/actionResponse';
-import {
-    AlertDialog,
-    AlertDialogAction,
-    AlertDialogCancel,
-    AlertDialogContent,
-    AlertDialogDescription,
-    AlertDialogFooter,
-    AlertDialogHeader,
-    AlertDialogTitle,
-    AlertDialogTrigger,
-} from '@/components/ui/alert-dialog';
-
-export interface ConfirmationDialogProps {
-    title: string;
-    description?: string;
-    actionText?: string;
-    actionVariant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
-}
-
-export interface ButtonWithActionProps<T = any>
-    extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-        VariantProps<typeof buttonVariants> {
-    asChild?: boolean;
-    dialog?: ConfirmationDialogProps;
-    action: () => Promise<ActionResponse<T>>;
-    callback?: (data: T) => void;
-}
-
-const ServerActionTrigger = React.forwardRef<HTMLButtonElement, ButtonWithActionProps>(
-    ({className, variant, size, asChild = false, ...props}, ref) => {
-
-        const router = useRouter();
-
-        const Comp = asChild ? Slot : 'button';
-
-        const handleSubmit = async () => {
-            const response = await props.action();
-            toast(sonnerContent(response));
-            if (props.callback) {
-                props.callback(response);
-            }
-            if (response.redirect) {
-                router.push(response.redirect);
-            }
-        };
-
-        return props.dialog ? (
-            <AlertDialog>
-                <AlertDialogTrigger asChild>
-                    <Comp
-                        className={cn(buttonVariants({variant, size, className}))}
-                        {...{...props, dialog: undefined, action: undefined, callback: undefined}}
-                        ref={ref}
-                    />
-                </AlertDialogTrigger>
-                <AlertDialogContent>
-                    <AlertDialogHeader>
-                        <AlertDialogTitle>{props.dialog.title}</AlertDialogTitle>
-                        {props.dialog?.description && (
-                            <AlertDialogDescription>
-                                {props.dialog.description}
-                            </AlertDialogDescription>
-                        )}
-                    </AlertDialogHeader>
-                    <AlertDialogFooter>
-                        <AlertDialogCancel>
-                            Cancel
-                        </AlertDialogCancel>
-                        <Button variant={props.dialog.actionVariant || 'default'} asChild>
-                            <AlertDialogAction onClick={handleSubmit}>
-                                {props.dialog.actionText || 'Confirm'}
-                            </AlertDialogAction>
-                        </Button>
-                    </AlertDialogFooter>
-                </AlertDialogContent>
-            </AlertDialog>
-        ) : (
-            <Comp
-                className={cn(buttonVariants({variant, size, className}))}
-                ref={ref}
-                onClick={handleSubmit}
-                {...{...props, dialog: undefined, action: undefined, callback: undefined}}
-            />
-        );
-    },
-);
-ServerActionTrigger.displayName = 'ServerActionTrigger';
-
-export { ServerActionTrigger };

src/components/form/signInForm.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import React from 'react';
+import { Button } from '@/components/ui/button';
+import { signInFormSchema } from '@/lib/form-schemas/signInFormSchema';
+import { ActionResponse } from '@/lib/types/actionResponse';
+import { useRouter } from 'next/navigation';
+import { toast } from 'sonner';
+import { sonnerContent } from '@/components/ui/sonner';
+
+export default function SignInForm({onSubmit}: {
+    onSubmit: (data: z.infer<typeof signInFormSchema>) => Promise<ActionResponse>
+}) {
+
+    const router = useRouter();
+
+    const form = useForm<z.infer<typeof signInFormSchema>>({
+        resolver: zodResolver(signInFormSchema),
+        defaultValues: {
+            username: '',
+            password: '',
+        },
+    });
+
+    const handleSubmit = async (data: z.infer<typeof signInFormSchema>) => {
+        const response = await onSubmit(data);
+        toast(sonnerContent(response));
+        if (response.redirect) {
+            router.push(response.redirect);
+        }
+    };
+
+    return (
+        <Form {...form}>
+            <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-2">
+                <FormField
+                    control={form.control}
+                    name="username"
+                    render={({field}) => (
+                        <FormItem>
+                            <FormLabel>Username</FormLabel>
+                            <FormControl>
+                                <Input placeholder="Username" {...field} />
+                            </FormControl>
+                            <FormMessage/>
+                        </FormItem>
+                    )}
+                />
+                <FormField
+                    control={form.control}
+                    name="password"
+                    render={({field}) => (
+                        <FormItem>
+                            <FormLabel>Password</FormLabel>
+                            <FormControl>
+                                <Input placeholder="••••••••" type="password" {...field} />
+                            </FormControl>
+                            <FormMessage/>
+                        </FormItem>
+                    )}
+                />
+                <Button type="submit" className="w-full">Sign in</Button>
+            </form>
+        </Form>
+    );
+}

src/components/form/signOutForm.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { ActionResponse } from '@/lib/types/actionResponse';
+import { Button } from '@/components/ui/button';
+import React from 'react';
+import { useRouter } from 'next/navigation';
+import { toast } from 'sonner';
+import { sonnerContent } from '@/components/ui/sonner';
+
+export default function SignOutForm({onSubmit}: { onSubmit: () => Promise<ActionResponse> }) {
+
+    const router = useRouter();
+
+    const handleSignOut = async () => {
+        const response = await onSubmit();
+        toast(sonnerContent(response));
+        if (response.redirect) {
+            router.push(response.redirect);
+        }
+    };
+
+    return (
+        <Button className="w-full" onClick={handleSignOut}>Sign out</Button>
+    );
+}

src/components/form/signUpForm.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import React from 'react';
+import { Button } from '@/components/ui/button';
+import { signUpFormSchema } from '@/lib/form-schemas/signUpFormSchema';
+import { ActionResponse } from '@/lib/types/actionResponse';
+import { useRouter } from 'next/navigation';
+import { toast } from 'sonner';
+import { sonnerContent } from '@/components/ui/sonner';
+
+export default function SignUpForm({onSubmit}: {
+    onSubmit: (data: z.infer<typeof signUpFormSchema>) => Promise<ActionResponse>
+}) {
+
+    const router = useRouter();
+
+    const form = useForm<z.infer<typeof signUpFormSchema>>({
+        resolver: zodResolver(signUpFormSchema),
+        defaultValues: {
+            username: '',
+            password: '',
+        },
+    });
+
+    const handleSubmit = async (data: z.infer<typeof signUpFormSchema>) => {
+        const response = await onSubmit(data);
+        toast(sonnerContent(response));
+        if (response.redirect) {
+            router.push(response.redirect);
+        }
+    };
+
+    return (
+        <Form {...form}>
+            <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-2">
+                <FormField
+                    control={form.control}
+                    name="username"
+                    render={({field}) => (
+                        <FormItem>
+                            <FormLabel>Username</FormLabel>
+                            <FormControl>
+                                <Input placeholder="Username" {...field} />
+                            </FormControl>
+                            <FormMessage/>
+                        </FormItem>
+                    )}
+                />
+                <FormField
+                    control={form.control}
+                    name="password"
+                    render={({field}) => (
+                        <FormItem>
+                            <FormLabel>Password</FormLabel>
+                            <FormControl>
+                                <Input placeholder="••••••••" type="password" {...field} />
+                            </FormControl>
+                            <FormMessage/>
+                        </FormItem>
+                    )}
+                />
+                <FormField
+                    control={form.control}
+                    name="confirm"
+                    render={({field}) => (
+                        <FormItem>
+                            <FormLabel>Confirm password</FormLabel>
+                            <FormControl>
+                                <Input placeholder="••••••••" type="password" {...field} />
+                            </FormControl>
+                            <FormMessage/>
+                        </FormItem>
+                    )}
+                />
+                <Button type="submit" className="w-full">Create Account</Button>
+            </form>
+        </Form>
+    );
+}

src/components/navigation.tsx

@@ -2,125 +2,65 @@
 
 import {
     NavigationMenu,
-    navigationMenuIconTriggerStyle,
     NavigationMenuItem,
     NavigationMenuLink,
     NavigationMenuList,
     navigationMenuTriggerStyle,
 } from '@/components/ui/navigation-menu';
-import React, { useState } from 'react';
+import React from 'react';
 import Link from 'next/link';
-import { Banknote, Home, Menu, Tag, User, UserSearch } from 'lucide-react';
-import { Drawer, DrawerContent, DrawerTrigger } from '@/components/ui/drawer';
-import { Button } from '@/components/ui/button';
+import { User } from 'lucide-react';
 
 export default function Navigation() {
 
-    const [open, setOpen] = useState(false);
-
     return (
         <div className="flex sticky items-center border-b border-border bg-background">
-            <div className="md:hidden">
-                <Drawer open={open} onOpenChange={open => setOpen(open)}>
-                    <DrawerTrigger asChild>
-                        <Button size="icon" variant="ghost" className="m-2">
-                            <Menu/>
-                        </Button>
-                    </DrawerTrigger>
-                    <DrawerContent>
-                        <div className="flex flex-col space-y-2 w-full rounded-none p-4">
-                            <Link
-                                href="/"
-                                className={navigationMenuIconTriggerStyle()}
-                                onClick={() => setOpen(false)}
-                                passHref>
-                                <Home/>
-                                <span>Dashboard</span>
-                            </Link>
-                            <Link
-                                href="/payments"
-                                className={navigationMenuIconTriggerStyle()}
-                                onClick={() => setOpen(false)}
-                                passHref>
-                                <Banknote/>
-                                <span>Payments</span>
-                            </Link>
-                            <Link
-                                href="/entities"
-                                className={navigationMenuIconTriggerStyle()}
-                                onClick={() => setOpen(false)}
-                                passHref>
-                                <UserSearch/>
-                                <span>Entities</span>
-                            </Link>
-                            <Link
-                                href="/categories"
-                                className={navigationMenuIconTriggerStyle()}
-                                onClick={() => setOpen(false)}
-                                passHref>
-                                <Tag/>
-                                <span>Categories</span>
-                            </Link>
-                            <Link
-                                href="/account"
-                                className={navigationMenuIconTriggerStyle()}
-                                onClick={() => setOpen(false)}
-                                passHref>
-                                <User/>
-                                <span>Account</span>
-                            </Link>
-                        </div>
-                    </DrawerContent>
-                </Drawer>
-            </div>
-            <div className="hidden md:flex">
-                <NavigationMenu>
-                    <NavigationMenuList className="flex w-screen items-center justify-between sm:px-4 py-2">
-                        <div className="inline-flex space-x-2">
+            <NavigationMenu>
+                <NavigationMenuList className="flex w-screen items-center justify-between px-4 py-2">
+                    <div className="inline-flex space-x-2">
 
-                            <img src={'/logo_t_hq_w.svg'} alt="Finances" className="h-10 w-10 mx-3"/>
-
-                            <NavigationMenuItem>
-                                <Link href="/" legacyBehavior passHref>
-                                    <NavigationMenuLink className={navigationMenuTriggerStyle()}>
-                                        Dashboard
-                                    </NavigationMenuLink>
-                                </Link>
-                            </NavigationMenuItem>
-                            <NavigationMenuItem>
-                                <Link href="/payments" legacyBehavior passHref>
-                                    <NavigationMenuLink className={navigationMenuTriggerStyle()}>
-                                        Payments
-                                    </NavigationMenuLink>
-                                </Link>
-                            </NavigationMenuItem>
-                            <NavigationMenuItem>
-                                <Link href="/entities" legacyBehavior passHref>
-                                    <NavigationMenuLink className={navigationMenuTriggerStyle()}>
-                                        Entities
-                                    </NavigationMenuLink>
-                                </Link>
-                            </NavigationMenuItem>
-                            <NavigationMenuItem>
-                                <Link href="/categories" legacyBehavior passHref>
-                                    <NavigationMenuLink className={navigationMenuTriggerStyle()}>
-                                        Categories
-                                    </NavigationMenuLink>
-                                </Link>
-                            </NavigationMenuItem>
-                        </div>
+                        <img src={'/logo_white.png'} alt="Finances" className="h-10 w-10 mx-3"/>
 
                         <NavigationMenuItem>
-                            <Link href="/account" legacyBehavior passHref>
+                            <Link href="/" legacyBehavior passHref>
                                 <NavigationMenuLink className={navigationMenuTriggerStyle()}>
-                                    <span className="sr-only">Account</span>
-                                    <User/>
+                                    Dashboard
                                 </NavigationMenuLink>
                             </Link>
                         </NavigationMenuItem>
-                    </NavigationMenuList>
-                </NavigationMenu>
-            </div>
+                        <NavigationMenuItem>
+                            <Link href="/payments" legacyBehavior passHref>
+                                <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+                                    Payments
+                                </NavigationMenuLink>
+                            </Link>
+                        </NavigationMenuItem>
+                        <NavigationMenuItem>
+                            <Link href="/entities" legacyBehavior passHref>
+                                <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+                                    Entities
+                                </NavigationMenuLink>
+                            </Link>
+                        </NavigationMenuItem>
+                        <NavigationMenuItem>
+                            <Link href="/categories" legacyBehavior passHref>
+                                <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+                                    Categories
+                                </NavigationMenuLink>
+                            </Link>
+                        </NavigationMenuItem>
+                    </div>
+
+                    <NavigationMenuItem>
+                        <Link href="/account" legacyBehavior passHref>
+                            <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+                                <span className="sr-only">Account</span>
+                                <User/>
+                            </NavigationMenuLink>
+                        </Link>
+                    </NavigationMenuItem>
+                </NavigationMenuList>
+            </NavigationMenu>
         </div>
     );
 }

src/components/paymentPageClientComponents.tsx

@@ -23,8 +23,6 @@ import { paymentFormSchema } from '@/lib/form-schemas/paymentFormSchema';
 import { Category, Entity, Payment } from '@prisma/client';
 import PaymentForm from '@/components/form/paymentForm';
 import { columns } from '@/app/payments/columns';
-import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger } from '@/components/ui/drawer';
-import { useMediaQuery } from '@/lib/hooks/useMediaQuery';
 
 export default function PaymentPageClientContent({
     payments,
@@ -42,7 +40,6 @@ export default function PaymentPageClientContent({
     className: string,
 }) {
 
-    const isDesktop = useMediaQuery('(min-width: 768px)');
     const router = useRouter();
 
     const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
@@ -103,61 +100,48 @@ export default function PaymentPageClientContent({
         );
     };
 
+    const entitiesMapped = entities?.map((entity) => {
+        return {
+            label: entity.name,
+            value: entity.id,
+        };
+    }) ?? [];
+
+    const categoriesMapped = categories?.map((category) => {
+        return {
+            label: category.name,
+            value: category.id,
+        };
+    }) ?? [];
+
     return (
         <div className={className}>
             <div className="flex items-center justify-between w-full">
                 <p className="text-3xl font-semibold">Payments</p>
 
                 {/* Edit dialog */}
-                {
-                    isDesktop ? (
-                        <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
-                            <DialogTrigger asChild>
-                                <Button
-                                    onClick={() => {
-                                        setSelectedPayment(undefined);
-                                        setIsEditDialogOpen(true);
-                                    }}>
-                                    Create Payment
-                                </Button>
-                            </DialogTrigger>
-                            <DialogContent>
-                                <DialogHeader>
-                                    <DialogTitle>{selectedPayment?.id ? 'Update Payment' : 'Create Payment'}</DialogTitle>
-                                </DialogHeader>
-                                <PaymentForm
-                                    value={selectedPayment}
-                                    entities={entities}
-                                    categories={categories}
-                                    onSubmit={handleSubmit}
-                                    className="grid grid-cols-1 md:grid-cols-2 gap-4 py-4"/>
-                            </DialogContent>
-                        </Dialog>
-                    ) : (
-                        <Drawer open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
-                            <DrawerTrigger asChild>
-                                <Button
-                                    onClick={() => {
-                                        setSelectedPayment(undefined);
-                                        setIsEditDialogOpen(true);
-                                    }}>
-                                    Create Payment
-                                </Button>
-                            </DrawerTrigger>
-                            <DrawerContent className="p-4">
-                                <DrawerHeader>
-                                    <DrawerTitle>{selectedPayment?.id ? 'Update Payment' : 'Create Payment'}</DrawerTitle>
-                                </DrawerHeader>
-                                <PaymentForm
-                                    value={selectedPayment}
-                                    entities={entities}
-                                    categories={categories}
-                                    onSubmit={handleSubmit}
-                                    className="grid grid-cols-1 md:grid-cols-2 gap-4 py-4"/>
-                            </DrawerContent>
-                        </Drawer>
-                    )
-                }
+                <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
+                    <DialogTrigger asChild>
+                        <Button
+                            onClick={() => {
+                                setSelectedPayment(undefined);
+                                setIsEditDialogOpen(true);
+                            }}>
+                            Create Payment
+                        </Button>
+                    </DialogTrigger>
+                    <DialogContent>
+                        <DialogHeader>
+                            <DialogTitle>{selectedPayment?.id ? 'Update Payment' : 'Create Payment'}</DialogTitle>
+                        </DialogHeader>
+                        <PaymentForm
+                            value={selectedPayment}
+                            entities={entities}
+                            categories={categories}
+                            onSubmit={handleSubmit}
+                            className="grid grid-cols-1 md:grid-cols-2 gap-4 py-4"/>
+                    </DialogContent>
+                </Dialog>
             </div>
 
             {/* Data Table */}

src/components/ui/auto-complete-input.tsx

@@ -1,129 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { useEffect, useState } from 'react';
-import { cn } from '@/lib/utils';
-import { X } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-
-export interface AutoCompleteInputProps
-    extends React.InputHTMLAttributes<HTMLInputElement> {
-    items: { label: string, value: any }[];
-}
-
-const AutoCompleteInput = React.forwardRef<HTMLInputElement, AutoCompleteInputProps>(
-    ({className, type, ...props}, ref) => {
-
-        const [value, setValue] = useState(getNameOfPropValue());
-        const [open, setOpen] = useState(false);
-        const [lastKey, setLastKey] = useState('');
-        const [filteredItems, setFilteredItems] = useState(props.items);
-
-        function getNameOfPropValue() {
-
-            if (!props.items) {
-                return '';
-            }
-
-            const item = props.items?.find(item => item.value === props.value);
-            return item?.label || '';
-        }
-
-        function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
-
-            const value = e.target.value;
-
-            setFilteredItems(props?.items?.filter((item) => {
-                return item.label.toLowerCase().includes(value.toLowerCase());
-            }));
-
-            setValue(value);
-            setOpen(value.length > 0);
-
-            // on typing only the internal state is changed while the form state is
-            // set to undefined. This way only the predefined items are actual values
-            // for the form validation
-            props.onChange?.(undefined as any);
-        }
-
-        // since typing changes the internal values and therefor the selected value, this effect
-        // handles every filteredItems change to check if only one item is left
-        useEffect(() => {
-            // only one item is left and the last character was a letter or digit.
-            // the last condition has to be checked to make it possible to use the backspace
-            if (filteredItems.length === 1 && /^[a-zA-Z0-9]$/.test(lastKey)) {
-                setValue(filteredItems[0].label);
-                setOpen(false);
-                props.onChange?.({target: {value: filteredItems[0].value}} as any);
-            }
-        }, [filteredItems]);
-
-        useEffect(() => {
-            if (props.value) {
-                setValue(getNameOfPropValue());
-            } else {
-                setValue('');
-            }
-        }, [props.value]);
-
-        return (
-            <div className="relative">
-                <input
-                    type={type}
-                    className={cn(
-                        'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium 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}
-                    value={value}
-                    placeholder={props.placeholder || 'Search...'}
-                    onChange={handleChange}
-                    onKeyDown={(e) => {
-                        if (e.metaKey || e.ctrlKey || e.altKey) {
-                            props.onKeyDown?.(e);
-                            return;
-                        }
-                        setLastKey(e.key);
-                        props.onKeyDown?.(e);
-                    }}
-                />
-                {
-                    value.length > 0 && (
-                        <Button
-                            className="absolute end-0 top-0 z-10"
-                            size="icon"
-                            variant="ghost"
-                            onClick={() => {
-                                handleChange({target: {value: ''}} as any);
-                            }}
-                        >
-                            <X className="h-4 w-4"/>
-                        </Button>
-                    )
-                }
-                {
-                    open && (
-                        <div
-                            className="z-50 bg-background rounded-md border border-border absolute inset-x-0 top-12 max-h-44 overflow-scroll">
-                            {filteredItems?.map((item) =>
-                                <div
-                                    className="px-3 py-3 hover:bg-accent hover:text-accent-foreground cursor-pointer text-sm font-medium"
-                                    onClick={() => {
-                                        props.onChange?.({target: {value: item.value}} as any);
-                                        setValue(item.label);
-                                        setOpen(false);
-                                    }}
-                                    key={item.value}>
-                                    {item.label}
-                                </div>,
-                            )}
-                        </div>
-                    )
-                }
-            </div>
-        );
-    },
-);
-AutoCompleteInput.displayName = 'Input';
-
-export { AutoCompleteInput };

src/components/ui/button.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/lib/utils';
 
 const buttonVariants = cva(
-    'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+    'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
     {
         variants: {
             variant: {
@@ -40,11 +40,11 @@ export interface ButtonProps
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-    ({ className, variant, size, asChild = false, ...props }, ref) => {
+    ({className, variant, size, asChild = false, ...props}, ref) => {
         const Comp = asChild ? Slot : 'button';
         return (
             <Comp
-                className={cn(buttonVariants({ variant, size, className }))}
+                className={cn(buttonVariants({variant, size, className}))}
                 ref={ref}
                 {...props}
             />

src/components/ui/calendar.tsx

@@ -10,11 +10,11 @@ import { buttonVariants } from '@/components/ui/button';
 export type CalendarProps = React.ComponentProps<typeof DayPicker>
 
 function Calendar({
-                      className,
-                      classNames,
-                      showOutsideDays = true,
-                      ...props
-                  }: CalendarProps) {
+    className,
+    classNames,
+    showOutsideDays = true,
+    ...props
+}: CalendarProps) {
     return (
         <DayPicker
             showOutsideDays={showOutsideDays}
@@ -26,7 +26,7 @@ function Calendar({
                 caption_label: 'text-sm font-medium',
                 nav: 'space-x-1 flex items-center',
                 nav_button: cn(
-                    buttonVariants({ variant: 'outline' }),
+                    buttonVariants({variant: 'outline'}),
                     'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
                 ),
                 nav_button_previous: 'absolute left-1',
@@ -38,7 +38,7 @@ function Calendar({
                 row: 'flex w-full mt-2',
                 cell: 'h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20',
                 day: cn(
-                    buttonVariants({ variant: 'ghost' }),
+                    buttonVariants({variant: 'ghost'}),
                     'h-9 w-9 p-0 font-normal aria-selected:opacity-100',
                 ),
                 day_range_end: 'day-range-end',
@@ -46,7 +46,7 @@ function Calendar({
                     'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
                 day_today: 'bg-accent text-accent-foreground',
                 day_outside:
-                    'day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground',
+                    'day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30',
                 day_disabled: 'text-muted-foreground opacity-50',
                 day_range_middle:
                     'aria-selected:bg-accent aria-selected:text-accent-foreground',
@@ -54,12 +54,8 @@ function Calendar({
                 ...classNames,
             }}
             components={{
-                IconLeft: ({ className, ...props }) => (
-                    <ChevronLeft className={cn('h-4 w-4', className)} {...props} />
-                ),
-                IconRight: ({ className, ...props }) => (
-                    <ChevronRight className={cn('h-4 w-4', className)} {...props} />
-                ),
+                IconLeft: ({...props}) => <ChevronLeft className="h-4 w-4"/>,
+                IconRight: ({...props}) => <ChevronRight className="h-4 w-4"/>,
             }}
             {...props}
         />

src/components/ui/currency-input.tsx

@@ -53,7 +53,6 @@ export default function CurrencyInput(props: TextInputProps) {
                             <Input
                                 placeholder={props.placeholder}
                                 type="text"
-                                inputMode="numeric"
                                 {...field}
                                 onChange={(ev) => {
                                     setValue(ev.target.value);

src/components/ui/data-table.tsx

@@ -4,9 +4,8 @@ import { ColumnDef, flexRender, getCoreRowModel, getPaginationRowModel, useReact
 
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
 import { Button } from '@/components/ui/button';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 
 interface DataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[];
@@ -21,7 +20,6 @@ export function DataTable<TData, TValue>({
     pagination,
     className,
 }: DataTableProps<TData, TValue>) {
-
     const table = useReactTable({
         data,
         columns,
@@ -29,13 +27,6 @@ export function DataTable<TData, TValue>({
         getPaginationRowModel: pagination ? getPaginationRowModel() : undefined,
     });
 
-    const [pageSize, setPageSize] = useState(50);
-    useEffect(() => {
-        if (pagination) {
-            table.setPageSize(pageSize);
-        }
-    }, [table, pagination, pageSize]);
-
     return (
         <div className={className}>
             <div className="rounded-md border">
@@ -45,8 +36,7 @@ export function DataTable<TData, TValue>({
                             <TableRow key={headerGroup.id}>
                                 {headerGroup.headers.map((header) => {
                                     return (
-                                        <TableHead key={header.id}
-                                                   style={{minWidth: `${header.column.getSize()}px`}}>
+                                        <TableHead key={header.id}>
                                             {header.isPlaceholder
                                                 ? null
                                                 : flexRender(
@@ -67,8 +57,7 @@ export function DataTable<TData, TValue>({
                                     data-state={row.getIsSelected() && 'selected'}
                                 >
                                     {row.getVisibleCells().map((cell) => (
-                                        <TableCell key={cell.id}
-                                                   className={cell.id.endsWith('actions') ? 'w-[120px]' : ''}>
+                                        <TableCell key={cell.id}>
                                             {flexRender(cell.column.columnDef.cell, cell.getContext())}
                                         </TableCell>
                                     ))}
@@ -86,62 +75,43 @@ export function DataTable<TData, TValue>({
             </div>
             {
                 pagination && (
-                    <div className="flex items-center justify-between py-4">
-                        <Select
-                            onValueChange={(value) => {
-                                setPageSize(parseInt(value));
-                            }}
-                            value={pageSize.toString()}
+                    <div className="flex items-center justify-end space-x-2 py-4">
+                        <Button
+                            variant="outline"
+                            size="icon"
+                            onClick={() => table.firstPage()}
+                            disabled={!table.getCanPreviousPage()}
                         >
-                            <SelectTrigger className="w-[150px]">
-                                <SelectValue placeholder="Select a scope"/>
-                            </SelectTrigger>
-                            <SelectContent>
-                                <SelectItem value={'25'} key={'25'}>25</SelectItem>
-                                <SelectItem value={'50'} key={'50'}>50</SelectItem>
-                                <SelectItem value={'75'} key={'75'}>75</SelectItem>
-                                <SelectItem value={'100'} key={'100'}>100</SelectItem>
-                            </SelectContent>
-                        </Select>
-
-                        <div className="flex flex-row items-center space-x-2">
-                            <Button
-                                variant="outline"
-                                size="icon"
-                                onClick={() => table.firstPage()}
-                                disabled={!table.getCanPreviousPage()}
-                            >
-                                <span className="sr-only">First page</span>
-                                <ChevronsLeft/>
-                            </Button>
-                            <Button
-                                variant="outline"
-                                size="icon"
-                                onClick={() => table.previousPage()}
-                                disabled={!table.getCanPreviousPage()}
-                            >
-                                <span className="sr-only">Previous page</span>
-                                <ChevronLeft/>
-                            </Button>
-                            <Button
-                                variant="outline"
-                                size="icon"
-                                onClick={() => table.nextPage()}
-                                disabled={!table.getCanNextPage()}
-                            >
-                                <span className="sr-only">Next page</span>
-                                <ChevronRight/>
-                            </Button>
-                            <Button
-                                variant="outline"
-                                size="icon"
-                                onClick={() => table.lastPage()}
-                                disabled={!table.getCanNextPage()}
-                            >
-                                <span className="sr-only">Last page</span>
-                                <ChevronsRight/>
-                            </Button>
-                        </div>
+                            <span className="sr-only">First page</span>
+                            <ChevronsLeft/>
+                        </Button>
+                        <Button
+                            variant="outline"
+                            size="icon"
+                            onClick={() => table.previousPage()}
+                            disabled={!table.getCanPreviousPage()}
+                        >
+                            <span className="sr-only">Previous page</span>
+                            <ChevronLeft/>
+                        </Button>
+                        <Button
+                            variant="outline"
+                            size="icon"
+                            onClick={() => table.nextPage()}
+                            disabled={!table.getCanNextPage()}
+                        >
+                            <span className="sr-only">Next page</span>
+                            <ChevronRight/>
+                        </Button>
+                        <Button
+                            variant="outline"
+                            size="icon"
+                            onClick={() => table.lastPage()}
+                            disabled={!table.getCanNextPage()}
+                        >
+                            <span className="sr-only">Last page</span>
+                            <ChevronsRight/>
+                        </Button>
                     </div>
                 )
             }

src/components/ui/drawer.tsx

@@ -1,118 +0,0 @@
-'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,
-};

src/components/ui/navigation-menu.tsx

@@ -44,10 +44,6 @@ const navigationMenuTriggerStyle = cva(
     'group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',
 );
 
-const navigationMenuIconTriggerStyle = cva(
-    'group inline-flex h-10 w-full items-center justify-start rounded-md bg-background px-4 py-2 space-x-4 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',
-);
-
 const NavigationMenuTrigger = React.forwardRef<
     React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
     React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
@@ -121,7 +117,6 @@ NavigationMenuIndicator.displayName =
 
 export {
     navigationMenuTriggerStyle,
-    navigationMenuIconTriggerStyle,
     NavigationMenu,
     NavigationMenuList,
     NavigationMenuItem,

src/components/ui/popover.tsx

@@ -12,7 +12,7 @@ const PopoverTrigger = PopoverPrimitive.Trigger;
 const PopoverContent = React.forwardRef<
     React.ElementRef<typeof PopoverPrimitive.Content>,
     React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+>(({className, align = 'center', sideOffset = 4, ...props}, ref) => (
     <PopoverPrimitive.Portal>
         <PopoverPrimitive.Content
             ref={ref}

src/lib/actions/categoryCreateUpdate.ts

@@ -1,9 +1,9 @@
 import { z } from 'zod';
 import { ActionResponse } from '@/lib/types/actionResponse';
-import prisma from '@/prisma';
+import { prismaClient } from '@/prisma';
+import { getUser } from '@/auth';
 import { URL_SIGN_IN } from '@/lib/constants';
 import { categoryFormSchema } from '@/lib/form-schemas/categoryFormSchema';
-import { auth0 } from '@/lib/auth';
 
 export default async function categoryCreateUpdate({
     id,
@@ -12,20 +12,20 @@ export default async function categoryCreateUpdate({
 }: z.infer<typeof categoryFormSchema>): Promise<ActionResponse> {
     'use server';
 
-    const session = await auth0.getSession();
-    if (!session) {
+    // check that user is logged in
+    const user = await getUser();
+    if (!user) {
         return {
             type: 'error',
-            message: 'You aren\'t signed in.',
+            message: 'You must be logged in to create/update an category.',
             redirect: URL_SIGN_IN,
         };
     }
-    const user = session.user;
 
     // create/update category
     try {
         if (id) {
-            await prisma.category.update({
+            await prismaClient.category.update({
                     where: {
                         id: id,
                     },
@@ -42,9 +42,9 @@ export default async function categoryCreateUpdate({
                 message: `'${name}' updated`,
             };
         } else {
-            await prisma.category.create({
+            await prismaClient.category.create({
                 data: {
-                    userId: user.sub,
+                    userId: user.id,
                     name: name,
                     color: color,
                 },

src/lib/actions/categoryDelete.ts

@@ -1,7 +1,7 @@
 import { ActionResponse } from '@/lib/types/actionResponse';
-import prisma from '@/prisma';
+import { prismaClient } from '@/prisma';
+import { getUser } from '@/auth';
 import { URL_SIGN_IN } from '@/lib/constants';
-import { auth0 } from '@/lib/auth';
 
 export default async function categoryDelete(id: number): Promise<ActionResponse> {
     'use server';
@@ -14,21 +14,21 @@ export default async function categoryDelete(id: number): Promise<ActionResponse
         };
     }
 
-    const session = await auth0.getSession();
-    if (!session) {
+    // check that user is logged in
+    const user = await getUser();
+    if (!user) {
         return {
             type: 'error',
-            message: 'You aren\'t signed in.',
+            message: 'You must be logged in to delete an category.',
             redirect: URL_SIGN_IN,
         };
     }
-    const user = session.user;
 
     // check that category is associated with user
-    const category = await prisma.category.findFirst({
+    const category = await prismaClient.category.findFirst({
         where: {
             id: id,
-            userId: user.sub,
+            userId: user.id,
         },
     });
     if (!category) {
@@ -38,25 +38,15 @@ export default async function categoryDelete(id: number): Promise<ActionResponse
         };
     }
 
+    // delete category
     try {
-
-        await prisma.$transaction(async (tx) => {
-
-            // update related payments
-            await tx.payment.updateMany({
-                where: {categoryId: category.id},
-                data: {categoryId: null},
-            });
-
-            // delete the category
-            await tx.category.delete({
+        await prismaClient.category.delete({
                 where: {
                     id: category.id,
-                    userId: user.sub,
+                    userId: user.id,
                 },
-            });
-        });
-
+            },
+        );
     } catch (e) {
         return {
             type: 'error',

src/lib/actions/clearAccountData.ts

@@ -1,40 +0,0 @@
-import { ActionResponse } from '@/lib/types/actionResponse';
-import { URL_SIGN_IN } from '@/lib/constants';
-import prisma from '@/prisma';
-import { auth0 } from '@/lib/auth';
-
-export default async function clearAccountData(): Promise<ActionResponse> {
-    'use server';
-
-    const session = await auth0.getSession();
-    if (!session) {
-        return {
-            type: 'error',
-            message: 'You aren\'t signed in.',
-            redirect: URL_SIGN_IN,
-        };
-    }
-
-    await prisma.payment.deleteMany({
-        where: {
-            userId: session.user.sub,
-        },
-    });
-
-    await prisma.entity.deleteMany({
-        where: {
-            userId: session.user.sub,
-        },
-    });
-
-    await prisma.category.deleteMany({
-        where: {
-            userId: session.user.sub,
-        },
-    });
-
-    return {
-        type: 'success',
-        message: 'Your account data was cleared.',
-    };
-}

src/lib/actions/entityCreateUpdate.ts

@@ -1,39 +1,37 @@
 import { z } from 'zod';
 import { ActionResponse } from '@/lib/types/actionResponse';
 import { entityFormSchema } from '@/lib/form-schemas/entityFormSchema';
-import prisma from '@/prisma';
+import { prismaClient } from '@/prisma';
+import { getUser } from '@/auth';
 import { URL_SIGN_IN } from '@/lib/constants';
-import { auth0 } from '@/lib/auth';
 
 export default async function entityCreateUpdate({
     id,
     name,
     type,
-    defaultCategoryId,
 }: z.infer<typeof entityFormSchema>): Promise<ActionResponse> {
     'use server';
 
-    const session = await auth0.getSession();
-    if (!session) {
+    // check that user is logged in
+    const user = await getUser();
+    if (!user) {
         return {
             type: 'error',
-            message: 'You aren\'t signed in.',
+            message: 'You must be logged in to create/update an entity.',
             redirect: URL_SIGN_IN,
         };
     }
-    const user = session.user;
 
     // create/update entity
     try {
         if (id) {
-            await prisma.entity.update({
+            await prismaClient.entity.update({
                     where: {
                         id: id,
                     },
                     data: {
                         name: name,
                         type: type,
-                        defaultCategoryId: defaultCategoryId ?? null,
                     },
                 },
             );
@@ -44,12 +42,11 @@ export default async function entityCreateUpdate({
                 message: `${type} '${name}' updated`,
             };
         } else {
-            await prisma.entity.create({
+            await prismaClient.entity.create({
                 data: {
-                    userId: user.sub,
+                    userId: user.id,
                     name: name,
                     type: type,
-                    defaultCategoryId: defaultCategoryId ?? null,
                 },
             });
 

src/lib/actions/entityDelete.ts

@@ -1,7 +1,7 @@
 import { ActionResponse } from '@/lib/types/actionResponse';
-import prisma from '@/prisma';
+import { prismaClient } from '@/prisma';
+import { getUser } from '@/auth';
 import { URL_SIGN_IN } from '@/lib/constants';
-import { auth0 } from '@/lib/auth';
 
 export default async function entityDelete(id: number): Promise<ActionResponse> {
     'use server';
@@ -14,21 +14,21 @@ export default async function entityDelete(id: number): Promise<ActionResponse>
         };
     }
 
-    const session = await auth0.getSession();
-    if (!session) {
+    // check that user is logged in
+    const user = await getUser();
+    if (!user) {
         return {
             type: 'error',
-            message: 'You aren\'t signed in.',
+            message: 'You must be logged in to delete an entity.',
             redirect: URL_SIGN_IN,
         };
     }
-    const user = session.user;
 
     // check that entity is associated with user
-    const entity = await prisma.entity.findFirst({
+    const entity = await prismaClient.entity.findFirst({
         where: {
             id: id,
-            userId: user.sub,
+            userId: user.id,
         },
     });
     if (!entity) {
@@ -40,10 +40,10 @@ export default async function entityDelete(id: number): Promise<ActionResponse>
 
     // delete entity
     try {
-        await prisma.entity.delete({
+        await prismaClient.entity.delete({
                 where: {
                     id: entity.id,
-                    userId: user.sub,
+                    userId: user.id,
                 },
             },
         );

src/lib/actions/generateSampleData.ts

@@ -1,64 +1,64 @@
-import prisma from '@/prisma';
+import { prismaClient } from '@/prisma';
 import type { Category, Entity } from '@prisma/client';
 import { EntityType } from '@prisma/client';
+import { getUser } from '@/auth';
 import { URL_SIGN_IN } from '@/lib/constants';
 import { ActionResponse } from '@/lib/types/actionResponse';
-import { auth0 } from '@/lib/auth';
 
 export default async function generateSampleData(): Promise<ActionResponse> {
     'use server';
 
-    const session = await auth0.getSession();
-    if (!session) {
+    const user = await getUser();
+
+    if (!user) {
         return {
             type: 'error',
-            message: 'You aren\'t signed in.',
+            message: 'You must be logged in to create/update an category.',
             redirect: URL_SIGN_IN,
         };
     }
-    const user = session.user;
 
     // Categories: create sample data
-    const categories: Category[] = await prisma.category.findMany({where: {userId: user.sub}});
-    if (await prisma.category.count({where: {userId: user.sub}}) == 0) {
+    const categories: Category[] = await prismaClient.category.findMany({where: {userId: user.id}});
+    if (await prismaClient.category.count({where: {userId: user.id}}) == 0) {
 
         console.log('Creating sample categories...');
 
-        categories.push(await prisma.category.create({
+        categories.push(await prismaClient.category.create({
             data: {
-                userId: user.sub,
+                userId: user.id,
                 name: 'Groceries',
                 color: '#FFBEAC',
             },
         }));
 
-        categories.push(await prisma.category.create({
+        categories.push(await prismaClient.category.create({
             data: {
-                userId: user.sub,
+                userId: user.id,
                 name: 'Drugstore items',
                 color: '#9CBCFF',
             },
         }));
 
-        categories.push(await prisma.category.create({
+        categories.push(await prismaClient.category.create({
             data: {
-                userId: user.sub,
+                userId: user.id,
                 name: 'Going out',
                 color: '#F1ADFF',
             },
         }));
 
-        categories.push(await prisma.category.create({
+        categories.push(await prismaClient.category.create({
             data: {
-                userId: user.sub,
+                userId: user.id,
                 name: 'Random stuff',
                 color: '#C1FFA9',
             },
         }));
 
-        categories.push(await prisma.category.create({
+        categories.push(await prismaClient.category.create({
             data: {
-                userId: user.sub,
+                userId: user.id,
                 name: 'Salary',
                 color: '#FFF787',
             },
@@ -69,54 +69,54 @@ export default async function generateSampleData(): Promise<ActionResponse> {
     console.log(categories);
 
     // Entities: create sample data
-    const entities: Entity[] = await prisma.entity.findMany({where: {userId: user.sub}});
-    if (await prisma.entity.count({where: {userId: user.sub}}) == 0) {
+    const entities: Entity[] = await prismaClient.entity.findMany({where: {userId: user.id}});
+    if (await prismaClient.entity.count({where: {userId: user.id}}) == 0) {
 
         console.log('Creating sample entities...');
 
-        entities.push(await prisma.entity.create({
+        entities.push(await prismaClient.entity.create({
             data: {
-                userId: user.sub,
+                userId: user.id,
                 name: 'Main Account',
                 type: EntityType.Account,
             },
         }));
 
-        entities.push(await prisma.entity.create({
+        entities.push(await prismaClient.entity.create({
             data: {
-                userId: user.sub,
+                userId: user.id,
                 name: 'Company',
                 type: EntityType.Entity,
             },
         }));
 
-        entities.push(await prisma.entity.create({
+        entities.push(await prismaClient.entity.create({
             data: {
-                userId: user.sub,
+                userId: user.id,
                 name: 'Supermarket 1',
                 type: EntityType.Entity,
             },
         }));
 
-        entities.push(await prisma.entity.create({
+        entities.push(await prismaClient.entity.create({
             data: {
-                userId: user.sub,
+                userId: user.id,
                 name: 'Supermarket 2',
                 type: EntityType.Entity,
             },
         }));
 
-        entities.push(await prisma.entity.create({
+        entities.push(await prismaClient.entity.create({
             data: {
-                userId: user.sub,
+                userId: user.id,
                 name: 'Supermarket 3',
                 type: EntityType.Entity,
             },
         }));
 
-        entities.push(await prisma.entity.create({
+        entities.push(await prismaClient.entity.create({
             data: {
-                userId: user.sub,
+                userId: user.id,
                 name: 'Supermarket 4',
                 type: EntityType.Entity,
             },
@@ -129,24 +129,21 @@ export default async function generateSampleData(): Promise<ActionResponse> {
     // Payments: create sample data
     console.log('Creating sample payments...');
 
-    if (await prisma.payment.count({where: {userId: user.sub}}) == 0) {
+    if (await prismaClient.payment.count({where: {userId: user.id}}) == 0) {
         for (let i = 0; i < 4; i++) {
 
             const date = new Date();
             date.setDate(1);
             date.setMonth(date.getMonth() - i);
 
-            const categoryId =
-                categories.find((it) => it.name === 'Salary')?.id!;
-
-            await prisma.payment.create({
+            await prismaClient.payment.create({
                 data: {
-                    userId: user.sub,
+                    userId: user.id,
                     amount: 200000,
                     date: date,
                     payorId: entities[1].id,
                     payeeId: entities[0].id,
-                    categoryId: categoryId,
+                    categoryId: 5,
                     createdAt: date,
                     updatedAt: date,
                 },
@@ -167,9 +164,9 @@ export default async function generateSampleData(): Promise<ActionResponse> {
         const date = new Date(
             new Date().getTime() - Math.floor(Math.random() * 10000000000));
 
-        await prisma.payment.create({
+        await prismaClient.payment.create({
             data: {
-                userId: user.sub,
+                userId: user.id,
                 amount: Math.floor(
                     Math.random() * (maxAmount - minAmount) + minAmount),
                 date: date,

src/lib/actions/paymentCreateUpdate.ts

@@ -1,9 +1,9 @@
 import { z } from 'zod';
 import { ActionResponse } from '@/lib/types/actionResponse';
-import prisma from '@/prisma';
+import { prismaClient } from '@/prisma';
+import { getUser } from '@/auth';
 import { URL_SIGN_IN } from '@/lib/constants';
 import { paymentFormSchema } from '@/lib/form-schemas/paymentFormSchema';
-import { auth0 } from '@/lib/auth';
 
 export default async function paymentCreateUpdate({
     id,
@@ -16,20 +16,20 @@ export default async function paymentCreateUpdate({
 }: z.infer<typeof paymentFormSchema>): Promise<ActionResponse> {
     'use server';
 
-    const session = await auth0.getSession();
-    if (!session) {
+    // check that user is logged in
+    const user = await getUser();
+    if (!user) {
         return {
             type: 'error',
-            message: 'You aren\'t signed in.',
+            message: 'You must be logged in to create/update a payment.',
             redirect: URL_SIGN_IN,
         };
     }
-    const user = session.user;
 
     // create/update payment
     try {
         if (id) {
-            await prisma.payment.update({
+            await prismaClient.payment.update({
                     where: {
                         id: id,
                     },
@@ -38,7 +38,7 @@ export default async function paymentCreateUpdate({
                         date: date,
                         payorId: payorId,
                         payeeId: payeeId,
-                        categoryId: categoryId ?? null,
+                        categoryId: categoryId,
                         note: note,
                     },
                 },
@@ -50,14 +50,14 @@ export default async function paymentCreateUpdate({
                 message: `Payment updated`,
             };
         } else {
-            await prisma.payment.create({
+            await prismaClient.payment.create({
                 data: {
-                    userId: user.sub,
+                    userId: user.id,
                     amount: amount,
                     date: date,
                     payorId: payorId,
                     payeeId: payeeId,
-                    categoryId: categoryId ?? null,
+                    categoryId: categoryId,
                     note: note,
                 },
             });

src/lib/actions/paymentDelete.ts

@@ -1,7 +1,7 @@
 import { ActionResponse } from '@/lib/types/actionResponse';
-import prisma from '@/prisma';
+import { prismaClient } from '@/prisma';
+import { getUser } from '@/auth';
 import { URL_SIGN_IN } from '@/lib/constants';
-import { auth0 } from '@/lib/auth';
 
 export default async function paymentDelete(id: number): Promise<ActionResponse> {
     'use server';
@@ -14,21 +14,21 @@ export default async function paymentDelete(id: number): Promise<ActionResponse>
         };
     }
 
-    const session = await auth0.getSession();
-    if (!session) {
+    // check that user is logged in
+    const user = await getUser();
+    if (!user) {
         return {
             type: 'error',
-            message: 'You aren\'t signed in.',
+            message: 'You must be logged in to delete a payment.',
             redirect: URL_SIGN_IN,
         };
     }
-    const user = session.user;
 
     // check that payment is associated with user
-    const payment = await prisma.payment.findFirst({
+    const payment = await prismaClient.payment.findFirst({
         where: {
             id: id,
-            userId: user.sub,
+            userId: user.id,
         },
     });
     if (!payment) {
@@ -40,10 +40,10 @@ export default async function paymentDelete(id: number): Promise<ActionResponse>
 
     // delete payment
     try {
-        await prisma.payment.delete({
+        await prismaClient.payment.delete({
                 where: {
                     id: payment.id,
-                    userId: user.sub,
+                    userId: user.id,
                 },
             },
         );

src/lib/actions/signIn.ts

@@ -0,0 +1,41 @@
+import { z } from 'zod';
+import { Argon2id } from 'oslo/password';
+import { lucia } from '@/auth';
+import { cookies } from 'next/headers';
+import { signInFormSchema } from '@/lib/form-schemas/signInFormSchema';
+import { ActionResponse } from '@/lib/types/actionResponse';
+import { URL_HOME } from '@/lib/constants';
+import { prismaClient } from '@/prisma';
+
+export default async function signIn({username, password}: z.infer<typeof signInFormSchema>): Promise<ActionResponse> {
+    'use server';
+
+    const existingUser = await prismaClient.user.findFirst({
+        where: {
+            username: username.toLowerCase(),
+        },
+    });
+    if (!existingUser) {
+        return {
+            type: 'error',
+            message: 'Incorrect username or password',
+        };
+    }
+
+    const validPassword = await new Argon2id().verify(existingUser.password, password);
+    if (!validPassword) {
+        return {
+            type: 'error',
+            message: 'Incorrect username or password',
+        };
+    }
+
+    const session = await lucia.createSession(existingUser.id, {});
+    const sessionCookie = lucia.createSessionCookie(session.id);
+    cookies().set(sessionCookie.name, sessionCookie.value, sessionCookie.attributes);
+    return {
+        type: 'success',
+        message: 'Signed in successfully',
+        redirect: URL_HOME,
+    };
+}

src/lib/actions/signOut.ts

@@ -0,0 +1,26 @@
+import { getSession, lucia } from '@/auth';
+import { cookies } from 'next/headers';
+import { ActionResponse } from '@/lib/types/actionResponse';
+import { URL_SIGN_IN } from '@/lib/constants';
+
+export default async function signOut(): Promise<ActionResponse> {
+    'use server';
+
+    const session = await getSession();
+    if (!session) {
+        return {
+            type: 'error',
+            message: 'You aren\'t signed in',
+        };
+    }
+
+    await lucia.invalidateSession(session.id);
+
+    const sessionCookie = lucia.createBlankSessionCookie();
+    cookies().set(sessionCookie.name, sessionCookie.value, sessionCookie.attributes);
+    return {
+        type: 'success',
+        message: 'Signed out successfully',
+        redirect: URL_SIGN_IN,
+    };
+}

src/lib/actions/signUp.ts

@@ -0,0 +1,46 @@
+import { z } from 'zod';
+import { Argon2id } from 'oslo/password';
+import { generateId } from 'lucia';
+import { lucia } from '@/auth';
+import { cookies } from 'next/headers';
+import { signUpFormSchema } from '@/lib/form-schemas/signUpFormSchema';
+import { ActionResponse } from '@/lib/types/actionResponse';
+import { URL_HOME } from '@/lib/constants';
+import { prismaClient } from '@/prisma';
+
+export default async function signUp({username, password}: z.infer<typeof signUpFormSchema>): Promise<ActionResponse> {
+    'use server';
+
+    const hashedPassword = await new Argon2id().hash(password);
+    const userId = generateId(15);
+
+    const existingUser = await prismaClient.user.findFirst({
+        where: {
+            username: username.toLowerCase(),
+        },
+    });
+
+    if (existingUser) {
+        return {
+            type: 'error',
+            message: 'Username already exists',
+        };
+    }
+
+    await prismaClient.user.create({
+        data: {
+            id: userId,
+            username: username,
+            password: hashedPassword,
+        },
+    });
+
+    const session = await lucia.createSession(userId, {});
+    const sessionCookie = lucia.createSessionCookie(session.id);
+    cookies().set(sessionCookie.name, sessionCookie.value, sessionCookie.attributes);
+    return {
+        type: 'success',
+        message: 'Signed up successfully',
+        redirect: URL_HOME,
+    };
+}

src/lib/auth.ts

@@ -1,9 +0,0 @@
-import { Auth0Client } from "@auth0/nextjs-auth0/server"
-
-export const auth0 = new Auth0Client({
-    appBaseUrl: process.env.AUTH0_BASE_URL,
-    domain: process.env.AUTH0_URL,
-    secret: process.env.AUTH0_SECRET,
-    clientId: process.env.AUTH0_CLIENT_ID,
-    clientSecret: process.env.AUTH0_CLIENT_SECRET,
-})

src/lib/constants.ts

@@ -1,6 +1,7 @@
-export const URL_SIGN_IN = `/auth/login`;
-export const URL_SIGN_OUT = `/auth/logout`;
-
+// auth urls
+export const URL_AUTH = '/auth';
+export const URL_SIGN_IN = `${URL_AUTH}/signin`;
+export const URL_SIGN_UP = `${URL_AUTH}/signup`;
 
 // main urls
 export const URL_HOME = '/';

src/lib/form-schemas/entityFormSchema.ts

@@ -5,5 +5,4 @@ export const entityFormSchema = z.object({
     id: z.number().positive().optional(),
     name: z.string().min(1).max(32),
     type: z.nativeEnum(EntityType),
-    defaultCategoryId: z.number().positive().optional(),
 });

src/lib/form-schemas/signInFormSchema.ts

@@ -0,0 +1,6 @@
+import { z } from 'zod';
+
+export const signInFormSchema = z.object({
+    username: z.string().min(3).max(16),
+    password: z.string().min(8).max(255),
+});

src/lib/form-schemas/signUpFormSchema.ts

@@ -0,0 +1,10 @@
+import { z } from 'zod';
+
+export const signUpFormSchema = z.object({
+    username: z.string().min(3).max(16),
+    password: z.string().min(8).max(255),
+    confirm: z.string().min(8).max(255),
+}).refine(data => data.password === data.confirm, {
+    message: 'Passwords do not match',
+    path: ['confirm'],
+});

src/lib/hooks/useMediaQuery.ts

@@ -1,21 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-
-export function useMediaQuery(mq: string) {
-
-    const [matches, setMatch] = useState(
-        () => typeof window !== 'undefined' ? window.matchMedia(mq).matches : false,
-    );
-
-    useEffect(() => {
-        if (typeof window !== 'undefined') {
-            const mql = window.matchMedia(mq);
-            const listener = (e: any) => setMatch(e.matches);
-            mql.addEventListener('change', listener);
-            return () => mql.removeEventListener('change', listener);
-        }
-    }, [mq]);
-
-    return matches;
-}

src/lib/types/actionResponse.ts

@@ -1,6 +1,5 @@
-export interface ActionResponse<T = any> {
+export interface ActionResponse {
     type: 'success' | 'info' | 'warning' | 'error';
     message: string;
     redirect?: string;
-    data?: T;
 }

src/middleware.ts

@@ -1,22 +1,27 @@
-import { NextRequest } from 'next/server';
-import { auth0 } from '@/lib/auth';
+import type { NextRequest } from 'next/server';
+import { NextResponse } from 'next/server';
+import { URL_AUTH, URL_HOME, URL_SIGN_IN } from './lib/constants';
 
 export async function middleware(request: NextRequest) {
-    try {
-        return await auth0.middleware(request);
-    } catch (error) {
-        console.error("Auth0 middleware error:", error);
+
+    // get session id from cookies
+    const sessionId = request.cookies.get('auth_session')?.value ?? null;
+
+    // redirect to home if user is already authenticated
+    if (request.nextUrl.pathname.startsWith(URL_AUTH) && sessionId) {
+        return NextResponse.redirect(new URL(URL_HOME, request.url));
     }
+
+    // redirect to sign in if user is not authenticated
+    if (!request.nextUrl.pathname.startsWith(URL_AUTH) && !sessionId) {
+        return NextResponse.redirect(new URL(URL_SIGN_IN, request.url));
+    }
+
+    return NextResponse.next();
 }
 
 export const config = {
     matcher: [
-        /*
-         * Match all request paths except for the ones starting with:
-         * - _next/static (static files)
-         * - _next/image (image optimization files)
-         * - favicon.ico, sitemap.xml, robots.txt (metadata files)
-         */
-        "/((?!_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)",
+        '/((?!api|_next/static|_next/image|favicon.ico).*)',
     ],
-}
+};

src/prisma.ts

@@ -1,18 +1,3 @@
 import { PrismaClient } from '@prisma/client';
 
-const prismaClientSingleton = () => {
-    return new PrismaClient();
-};
-
-declare global {
-    // noinspection ES6ConvertVarToLetConst
-    var prismaGlobal: undefined | ReturnType<typeof prismaClientSingleton>;
-}
-
-const prisma = globalThis.prismaGlobal ?? prismaClientSingleton();
-
-export default prisma;
-
-if (process.env.NODE_ENV !== 'production') {
-    globalThis.prismaGlobal = prisma
-}
+export const prismaClient = new PrismaClient();

tsconfig.json

@@ -3,8 +3,7 @@
     "lib": [
       "dom",
       "dom.iterable",
-      "esnext",
-      "webworker"
+      "esnext"
     ],
     "allowJs": true,
     "skipLibCheck": true,
@@ -26,11 +25,7 @@
       "@/*": [
         "./src/*"
       ]
-    },
-    "types": [
-      "@serwist/next/typings"
-    ],
-    "target": "ES2017"
+    }
   },
   "include": [
     "next-env.d.ts",