chore: update versions (#3453)

This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @nhost/dashboard@2.36.0

### Minor Changes

-   a30da08: feat (dashboard): add custom types to column types

### Patch Changes

-   73a7ba8: fix (dashboard): Show errors in row permission rule form
-   397bfc9: fix (dashboard): Parse foreign key relations correctly
- 2f4b376: fix (dashboard): allow permission variables with in operator
- 88836f3: fix (dashboard): use correct fallback endpoint for migration
in the CLI
- ba3c49e: fix (dashboard): Show nested relationships in row permissions
-   92e71a6: fix: minor fixes to csp
- 81716d9: fix (dashboard): Show validation error on save when editing
database columns

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

.github/actions/install-dependencies/action.yaml

@@ -12,24 +12,32 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: pnpm/action-setup@v2.2.4
+    - uses: pnpm/action-setup@v4
       with:
-        version: 8.10.5
+        version: 10.1.0
         run_install: false
     - name: Get pnpm cache directory
       id: pnpm-cache-dir
       shell: bash
       run: echo "dir=$(pnpm store path)" >> $GITHUB_OUTPUT
-    - uses: actions/cache@v3
+    - uses: actions/cache@v4
       id: pnpm-cache
       with:
         path: ${{ steps.pnpm-cache-dir.outputs.dir }}
         key: ${{ runner.os }}-node-${{ hashFiles('pnpm-lock.yaml') }}
         restore-keys: ${{ runner.os }}-node-
-    - name: Use Node.js v18
+    - name: Use Node.js v20
       uses: actions/setup-node@v3
       with:
-        node-version: 18
+        node-version: 20
+    - shell: bash
+      name: Use Latest Corepack
+      run: |
+        echo "Before: corepack version => $(corepack --version || echo 'not installed')"
+        npm install -g corepack@latest
+        echo "After : corepack version => $(corepack --version)"
+        corepack enable
+        pnpm --version
     - shell: bash
       name: Install packages
       run: pnpm install --frozen-lockfile

.github/actions/nhost-cli/action.yaml

@@ -1,6 +1,9 @@
 name: Nhost CLI
 description: 'Action to install the Nhost CLI and to run an application'
 inputs:
+  init:
+    description: 'Initialize the application'
+    default: 'false'
   start:
     description: "Start the application. If false, the application won't be started"
     default: 'false'
@@ -16,6 +19,9 @@ inputs:
   version:
     description: 'Version of the Nhost CLI'
     default: 'latest'
+  dashboard-image:
+    description: 'Image of the dashboard'
+    default: 'nhost/dashboard:latest'
   config:
     description: 'Values to be injected into nhost/config.yaml'
 
@@ -40,6 +46,13 @@ runs:
         timeout_minutes: 3
         max_attempts: 10
         command: bash <(curl --silent -L https://raw.githubusercontent.com/nhost/cli/main/get.sh) ${{ inputs.version }}
+    - name: Initialize a new project from scratch
+      if: ${{ inputs.init == 'true' }}
+      shell: bash
+      working-directory: ${{ inputs.path }}
+      run: |
+        rm -rf ./*
+        nhost init
     - name: Set custom configuration
       if: ${{ inputs.config }}
       shell: bash
@@ -50,7 +63,12 @@ runs:
       shell: bash
       working-directory: ${{ inputs.path }}
       run: |
-        cp .secrets.example .secrets
+        if [ -n "${{ inputs.dashboard-image }}" ]; then
+          export NHOST_DASHBOARD_VERSION=${{ inputs.dashboard-image }}
+        fi
+        if [ -f .secrets.example ]; then
+          cp .secrets.example .secrets
+        fi
         nhost up
     - name: Log on failure
       if: steps.wait.outcome == 'failure'

.github/labeler.yml

@@ -1,24 +1,25 @@
 dashboard:
-  - dashboard/**/*
+  - any:
+      - changed-files:
+          - any-glob-to-any-file: ['dashboard/**/*']
 
 documentation:
-  - any:
-      - docs/**/*
+  - any: ['docs/**/*']
 
 examples:
-  - examples/**/*
+  - any: ['examples/**/*']
 
 sdk:
-  - packages/**/*
+  - any: ['packages/**/*']
 
 integrations:
-  - integrations/**/*
+  - any: ['integrations/**/*']
 
 react:
-  - '{packages,examples,integrations}/*react*/**/*'
+  - any: ['{packages,examples,integrations}/*react*/**/*']
 
 nextjs:
-  - '{packages,examples}/*next*/**/*'
+  - any: ['{packages,examples}/*next*/**/*']
 
 vue:
-  - '{packages,examples,integrations}/*vue*/**/*'
+  - any: ['{packages,examples,integrations}/*vue*/**/*']

.github/workflows/changesets.yaml

@@ -65,29 +65,13 @@ jobs:
 
   publish-vercel:
     name: Publish to Vercel
-    runs-on: ubuntu-latest
     needs:
       - test
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v3
-        with:
-          fetch-depth: 0
-      - name: Install Node and dependencies
-        uses: ./.github/actions/install-dependencies
-        with:
-          TURBO_TOKEN: ${{ env.TURBO_TOKEN }}
-          TURBO_TEAM: ${{ env.TURBO_TEAM }}
-      - name: Setup Vercel CLI
-        run: pnpm add -g vercel
-      - name: Trigger a Vercel deployment
-        env:
-          VERCEL_ORG_ID: ${{ secrets.DASHBOARD_VERCEL_TEAM_ID }}
-          VERCEL_PROJECT_ID: ${{ secrets.DASHBOARD_VERCEL_PROJECT_ID }}
-        run: |
-          vercel pull --environment=production --token=${{ secrets.DASHBOARD_VERCEL_DEPLOY_TOKEN }}
-          vercel build --prod --token=${{ secrets.DASHBOARD_VERCEL_DEPLOY_TOKEN }}
-          vercel deploy --prebuilt --prod --token=${{ secrets.DASHBOARD_VERCEL_DEPLOY_TOKEN }}
+    uses: ./.github/workflows/deploy-dashboard.yaml
+    with:
+      git_ref: ${{ github.ref_name }}
+      environment: production
+    secrets: inherit
 
   publish-docker:
     name: Publish to Docker Hub

.github/workflows/ci.yaml

@@ -7,29 +7,35 @@ on:
       - 'assets/**'
       - '**.md'
       - 'LICENSE'
+      - 'docs/**'
   pull_request:
     types: [opened, synchronize]
     paths-ignore:
       - 'assets/**'
       - '**.md'
       - 'LICENSE'
+      - 'docs/**'
 env:
   TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
   TURBO_TEAM: nhost
   NEXT_PUBLIC_ENV: dev
   NEXT_TELEMETRY_DISABLED: 1
-  NEXT_PUBLIC_NHOST_BACKEND_URL: http://localhost:1337
   NHOST_TEST_DASHBOARD_URL: ${{ vars.NHOST_TEST_DASHBOARD_URL }}
-  NHOST_TEST_WORKSPACE_NAME: ${{ vars.NHOST_TEST_WORKSPACE_NAME }}
   NHOST_TEST_PROJECT_NAME: ${{ vars.NHOST_TEST_PROJECT_NAME }}
+  NHOST_TEST_ORGANIZATION_NAME: ${{ vars.NHOST_TEST_ORGANIZATION_NAME }}
+  NHOST_TEST_ORGANIZATION_SLUG: ${{ vars.NHOST_TEST_ORGANIZATION_SLUG }}
+  NHOST_TEST_PERSONAL_ORG_SLUG: ${{ vars.NHOST_TEST_PERSONAL_ORG_SLUG }}
+  NHOST_TEST_PROJECT_SUBDOMAIN: ${{ vars.NHOST_TEST_PROJECT_SUBDOMAIN }}
+  NHOST_PRO_TEST_PROJECT_NAME: ${{ vars.NHOST_PRO_TEST_PROJECT_NAME }}
   NHOST_TEST_USER_EMAIL: ${{ secrets.NHOST_TEST_USER_EMAIL }}
   NHOST_TEST_USER_PASSWORD: ${{ secrets.NHOST_TEST_USER_PASSWORD }}
-  NHOST_TEST_PROJECT_ADMIN_SECRET: ${{ secrets.NHOST_TEST_PROJECT_ADMIN_SECRET }}
+  NHOST_TEST_PROJECT_ADMIN_SECRET: '${{ secrets.NHOST_TEST_PROJECT_ADMIN_SECRET }}'
+  NHOST_TEST_FREE_USER_EMAILS: ${{ secrets.NHOST_TEST_FREE_USER_EMAILS }}
 
 jobs:
   build:
     name: Build @nhost packages
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-2vcpu-ubuntu-2404
     steps:
       - uses: actions/checkout@v3
         with:
@@ -69,7 +75,7 @@ jobs:
   unit:
     name: Unit tests
     needs: build
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-2vcpu-ubuntu-2404
     steps:
       - uses: actions/checkout@v3
       # * Install Node and dependencies. Package dependencies won't be downloaded again as they have been cached by the `build` job.
@@ -94,7 +100,7 @@ jobs:
   lint:
     name: Lint
     needs: build
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-2vcpu-ubuntu-2404
     steps:
       - uses: actions/checkout@v3
       # * Install Node and dependencies. Package dependencies won't be downloaded again as they have been cached by the `build` job.
@@ -103,6 +109,9 @@ jobs:
         with:
           TURBO_TOKEN: ${{ env.TURBO_TOKEN }}
           TURBO_TEAM: ${{ env.TURBO_TEAM }}
+      - name: Enforce Prettier formatting in dashboard
+        working-directory: ./dashboard
+        run: pnpm prettier --check "./**/*.tsx" --config prettier.config.js
       # * Run every `lint` script in the workspace . Dependencies build is cached by Turborepo
       - name: Lint
         run: pnpm run lint:all
@@ -118,7 +127,7 @@ jobs:
       fail-fast: false
       matrix:
         package: ${{ fromJson(needs.build.outputs.matrix) }}
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-2vcpu-ubuntu-2404
     steps:
       - uses: actions/checkout@v3
       # * Install Node and dependencies. Package dependencies won't be downloaded again as they have been cached by the `build` job.
@@ -127,10 +136,27 @@ jobs:
         with:
           TURBO_TOKEN: ${{ env.TURBO_TOKEN }}
           TURBO_TEAM: ${{ env.TURBO_TEAM }}
+      # * Build Dashboard image to test it locally
+      - name: Build Dashboard local image
+        if: matrix.package.path == 'dashboard'
+        run: |
+          docker build -t nhost/dashboard:0.0.0-dev -f ${{ matrix.package.path }}/Dockerfile .
+          mkdir -p nhost-test-project
       # * Install Nhost CLI if a `nhost/config.yaml` file is found
       - name: Install Nhost CLI
-        if: hashFiles(format('{0}/nhost/config.yaml', matrix.package.path)) != ''
+        if: hashFiles(format('{0}/nhost/config.yaml', matrix.package.path)) != '' && matrix.package.path != 'dashboard'
         uses: ./.github/actions/nhost-cli
+      # * Install Nhost CLI to test Dashboard locally
+      - name: Install Nhost CLI (Local Dashboard tests)
+        timeout-minutes: 5
+        if: matrix.package.path == 'dashboard'
+        uses: ./.github/actions/nhost-cli
+        with:
+          init: 'true' # Initialize the application
+          start: 'true' # Start the application
+          path: ./nhost-test-project
+          wait: 'true' # Wait until the application is ready
+          dashboard-image: 'nhost/dashboard:0.0.0-dev'
       - name: Fetch Dashboard Preview URL
         id: fetch-dashboard-preview-url
         uses: zentered/vercel-preview-url@v1.1.9
@@ -146,20 +172,43 @@ jobs:
       - name: Set Dashboard Preview URL
         if: steps.fetch-dashboard-preview-url.outputs.preview_url != ''
         run: echo "NHOST_TEST_DASHBOARD_URL=https://${{ steps.fetch-dashboard-preview-url.outputs.preview_url }}" >> $GITHUB_ENV
+      - name: Run Onboarding Dashboard e2e tests
+        if: matrix.package.path == 'dashboard'
+        timeout-minutes: 10
+        run: pnpm --filter="${{ matrix.package.name }}" run e2e:onboarding
       # * Run the `ci` script of the current package of the matrix. Dependencies build is cached by Turborepo
       - name: Run e2e tests
         timeout-minutes: 20
         run: pnpm --filter="${{ matrix.package.name }}" run e2e
-      - id: file-name
-        if: ${{ failure() }}
-        name: Transform package name into a valid file name
+      # * Run the `e2e-local` script of the dashboard
+      - name: Run Local Dashboard e2e tests
+        if: matrix.package.path == 'dashboard'
+        timeout-minutes: 5
+        run: pnpm --filter="${{ matrix.package.name }}" run e2e:local
+
+      - name: Stop Nhost CLI
+        if: matrix.package.path == 'dashboard'
+        working-directory: ./nhost-test-project
+        run: nhost down
+      - name: Stop Nhost CLI for packages
+        if: always() && (matrix.package.path == 'packages/hasura-auth-js' || matrix.package.path == 'packages/hasura-storage-js')
+        working-directory: ./${{ matrix.package.path }}
+        run: nhost down
+
+      - name: Encrypt Playwright report
+        if: ${{ failure() && hashFiles('dashboard/playwright-report/**') != ''}}
         run: |
-          PACKAGE_FILE_NAME=$(echo "${{ matrix.package.name }}" | sed 's/@//g; s/\//-/g')
-          echo "fileName=$PACKAGE_FILE_NAME"  >> $GITHUB_OUTPUT
-      # * Run this step only if the previous step failed, and Playwright generated a report
-      - name: Upload Playwright Report
-        if: ${{ failure() && hashFiles(format('{0}/playwright-report/**', matrix.package.path)) != ''}}
-        uses: actions/upload-artifact@v3
+          tar -czf dashboard/playwright-report.tar.gz dashboard/playwright-report/
+          openssl enc -aes-256-cbc -salt -pbkdf2 -iter 100000 \
+            -in dashboard/playwright-report.tar.gz \
+            -out playwright-report.tar.gz.enc \
+            -k "${{ secrets.PLAYWRIGHT_REPORT_ENCRYPTION_KEY }}"
+          rm dashboard/playwright-report.tar.gz
+
+      - name: Upload encrypted Playwright report
+        uses: actions/upload-artifact@v4
+        if: ${{ failure() && hashFiles('dashboard/playwright-report/**') != ''}}
         with:
-          name: playwright-${{ steps.file-name.outputs.fileName }}
-          path: ${{format('{0}/playwright-report/**', matrix.package.path)}}
+          name: encrypted-playwright-report-${{ github.run_id }}
+          path: playwright-report.tar.gz.enc
+          retention-days: 1

.github/workflows/dashboard.yaml

@@ -8,7 +8,6 @@ env:
   TURBO_TEAM: nhost
   NEXT_PUBLIC_ENV: dev
   NEXT_TELEMETRY_DISABLED: 1
-  NEXT_PUBLIC_NHOST_BACKEND_URL: http://localhost:1337
 
 jobs:
   build:

.github/workflows/deploy-dashboard.yaml

@@ -0,0 +1,86 @@
+name: 'dashboard: release form'
+
+on:
+  workflow_dispatch:
+    inputs:
+      git_ref:
+        type: string
+        description: 'Branch, tag, or commit SHA'
+        required: true
+
+      environment:
+        type: choice
+        description: 'Deployment environment'
+        required: true
+        default: staging
+        options:
+          - staging
+          - production
+
+  workflow_call:
+    inputs:
+      git_ref:
+        required: true
+        type: string
+      environment:
+        required: true
+        type: string
+
+jobs:
+  publish-vercel:
+    name: Publish to Vercel
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ inputs.git_ref }}
+          fetch-depth: 0
+
+      - name: Install Node and dependencies
+        uses: ./.github/actions/install-dependencies
+        with:
+          TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+          TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+
+      - name: Setup Vercel CLI
+        run: pnpm add -g vercel
+
+      - name: Trigger Vercel deployment
+        env:
+          VERCEL_ORG_ID: ${{ secrets.DASHBOARD_VERCEL_TEAM_ID }}
+          VERCEL_PROJECT_ID: ${{ inputs.environment == 'production' && secrets.DASHBOARD_VERCEL_PROJECT_ID || secrets.DASHBOARD_STAGING_VERCEL_PROJECT_ID }}
+        run: |
+          echo "Deploying to: ${{ inputs.environment }}..."
+          vercel pull --environment=production --token=${{ secrets.DASHBOARD_VERCEL_DEPLOY_TOKEN }}
+          vercel build --prod --token=${{ secrets.DASHBOARD_VERCEL_DEPLOY_TOKEN }}
+          vercel deploy --prebuilt --prod --token=${{ secrets.DASHBOARD_VERCEL_DEPLOY_TOKEN }}
+
+      - name: Send Discord notification (success)
+        if: success()
+        uses: tsickert/discord-webhook@v7.0.0
+        with:
+          webhook-url: ${{ secrets.DISCORD_WEBHOOK_PRODUCTION }}
+          embed-title: "Dashboard Deployment"
+          embed-description: |
+            **Status**: success
+            **Triggered by**: ${{ github.actor }}
+
+            **Inputs**:
+            - Git Ref: ${{ inputs.git_ref }}
+          embed-color: '5763719'
+
+      - name: Send Discord notification (failure)
+        if: failure()
+        uses: tsickert/discord-webhook@v7.0.0
+        with:
+          webhook-url: ${{ secrets.DISCORD_WEBHOOK_PRODUCTION }}
+          embed-title: "Dashboard Deployment"
+          embed-description: |
+            **Status**: failure
+            **Triggered by**: ${{ github.actor }}
+
+            **Inputs**:
+            - Git Ref: ${{ inputs.git_ref }}
+          embed-color: '15548997'

.github/workflows/gen_ai_review.yaml

@@ -0,0 +1,27 @@
+---
+name: "gen: AI review"
+on:
+  pull_request:
+    types: [opened, reopened, ready_for_review]
+  issue_comment:
+jobs:
+  pr_agent_job:
+    if: ${{ github.event.sender.type != 'Bot' }}
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    permissions:
+      issues: write
+      pull-requests: write
+    name: Run pr agent on every pull request, respond to user comments
+    steps:
+      - name: PR Agent action step
+        id: pragent
+        uses: Codium-ai/pr-agent@v0.26
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          OPENAI_KEY: ${{ secrets.OPENAI_API_KEY }}
+          ANTHROPIC_API_KEY: ${{ secrets.ANTHROPIC_API_KEY }}
+          config.max_model_tokens: 100000
+          config.model: "anthropic/claude-3-5-sonnet-20240620"
+          config.model_turbo: "anthropic/claude-3-5-sonnet-20240620"
+          ignore.glob: "['pnpm-lock.yaml','**/pnpm-lock.yaml']"

.github/workflows/gen_schedule_update_deps.yaml

@@ -2,7 +2,7 @@
 name: "gen: update depenendencies"
 on:
   schedule:
-    - cron: '0 2 1 * *'
+    - cron: '0 2 1 2,5,8,11 *'
 
 jobs:
   run:

.github/workflows/labeler.yaml

@@ -3,13 +3,12 @@ on:
   - pull_request_target
 
 jobs:
-  triage:
+  labeler:
     permissions:
       contents: read
       pull-requests: write
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/labeler@v4
+      - uses: actions/labeler@v5
         with:
-          repo-token: '${{ secrets.GH_PAT }}'
-          sync-labels: ''
+          repo-token: ${{ secrets.GH_PAT }}

.github/workflows/test-nhost-cli-action.yaml

@@ -25,10 +25,10 @@ jobs:
       - name: Install the Nhost CLI and start the application
         uses: ./.github/actions/nhost-cli
         with:
-          path: packages/nhost-js
+          init: true
           start: true
       - name: should be running
-        run: curl -sSf 'https://local.hasura.nhost.run' > /dev/null
+        run: curl -sSf 'https://local.hasura.local.nhost.run/' > /dev/null
 
   stop:
     runs-on: ubuntu-latest
@@ -37,7 +37,7 @@ jobs:
       - name: Install the Nhost CLI, start and stop the application
         uses: ./.github/actions/nhost-cli
         with:
-          path: packages/nhost-js
+          init: true
           start: true
           stop: true
       - name: should have no live docker container
@@ -55,12 +55,13 @@ jobs:
       - name: Install the Nhost CLI and run the application
         uses: ./.github/actions/nhost-cli
         with:
-          path: packages/nhost-js
+          init: true
+          version: v1.29.3
           start: true
       - name: should find the injected hasura-auth version
         run: |
-          VERSION=$(curl -sSf 'https://local.auth.nhost.run/v1/version')
-          EXPECTED_VERSION='{"version":"v0.20.1"}'
+          VERSION=$(curl -sSf 'https://local.auth.local.nhost.run/v1/version')
+          EXPECTED_VERSION='{"version":"0.36.1"}'
           if [ "$VERSION" != "$EXPECTED_VERSION" ]; then
             echo "Expected version $EXPECTED_VERSION but got $VERSION"
             exit 1
@@ -73,6 +74,6 @@ jobs:
       - name: Install the Nhost CLI
         uses: ./.github/actions/nhost-cli
         with:
-          version: v1.0.1
+          version: v1.27.2
       - name: should find the correct version
-        run: nhost --version | head -n 1 | grep v1.0.1 || exit 1
+        run: nhost --version | head -n 1 | grep v1.27.2 || exit 1

.gitignore

@@ -63,3 +63,5 @@ out/
 # Nix
 .envrc
 .direnv/
+
+/.vscode/

CONTRIBUTING.md

@@ -31,7 +31,7 @@ PRs to our libraries are always welcome and can be a quick way to get your fix o
 - Only fix/add the functionality in question **OR** address wide-spread whitespace/style issues, not both.
 - Add unit or integration tests for fixed or changed functionality (if a test suite exists).
 - Address a single concern in the least number of changed lines as possible.
-- Include documentation in the repo or on our [docs site](https://docs.nhost.io/get-started).
+- Include documentation in the repo or on our [docs site](https://docs.nhost.io).
 - Be accompanied by a complete Pull Request template (loaded automatically when a PR is created).
 
 For changes that address core functionality or require breaking changes (e.g., a major release), it's best to open an Issue to discuss your proposal first. This is not required but can save time creating and reviewing changes.

DEVELOPERS.md

@@ -2,9 +2,7 @@
 
 ## Requirements
 
-### Node.js v18
-
-_⚠️ Node.js v16 is also supported for the time being but support will be dropped in the near future_.
+### Node.js v20 or later
 
 ### [pnpm](https://pnpm.io/) package manager
 
@@ -14,10 +12,10 @@ The easiest way to install `pnpm` if it's not installed on your machine yet is t
 $ npm install -g pnpm
 ```
 
-### [Nhost CLI](https://docs.nhost.io/cli)
+### [Nhost CLI](https://docs.nhost.io/platform/cli/local-development)
 
 - The CLI is primarily used for running the E2E tests
-- Please refer to the [installation guide](https://docs.nhost.io/get-started/cli-workflow/install-cli) if you have not installed it yet
+- Please refer to the [installation guide](https://docs.nhost.io/platform/cli/local-development) if you have not installed it yet
 
 ## File Structure
 

README.md

@@ -4,7 +4,7 @@
 
 # Nhost
 
-<a href="https://docs.nhost.io/#quickstart">Quickstart</a>
+<a href="https://docs.nhost.io/getting-started/overview">Quickstart</a>
 <span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
 <a href="http://nhost.io/">Website</a>
 <span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
@@ -15,6 +15,8 @@
 <a href="https://twitter.com/nhost">Twitter</a>
 <span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
 <a href="https://nhost.io/discord">Discord</a>
+<span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
+<a href="https://gurubase.io/g/nhost">Ask Nhost Guru (third party, unofficial)</a>
 <br />
 
   <hr />
@@ -34,7 +36,7 @@ Nhost consists of open source software:
 - Authentication: [Hasura Auth](https://github.com/nhost/hasura-auth/)
 - Storage: [Hasura Storage](https://github.com/nhost/hasura-storage)
 - Serverless Functions: Node.js (JavaScript and TypeScript)
-- [Nhost CLI](https://docs.nhost.io/cli) for local development
+- [Nhost CLI](https://docs.nhost.io/platform/cli/local-development) for local development
 
 ## Architecture of Nhost
 
@@ -59,9 +61,9 @@ Visit [https://docs.nhost.io](http://docs.nhost.io) for the complete documentati
 
 Since Nhost is 100% open source, you can self-host the whole Nhost stack. Check out the example [docker-compose file](https://github.com/nhost/nhost/tree/main/examples/docker-compose) to self-host Nhost.
 
-## Sign In and Make a Graphql Request
+## Sign In and Make a GraphQL Request
 
-Install the `@nhost/nhost-js` package and start build your app:
+Install the `@nhost/nhost-js` package and start building your app:
 
 ```jsx
 import { NhostClient } from '@nhost/nhost-js'
@@ -71,7 +73,7 @@ const nhost = new NhostClient({
   region: '<your-region>'
 })
 
-await nhost.auth.signIn({ email: 'elon@musk.com', password: 'spaceX' })
+await nhost.auth.signIn({ email: 'user@domain.com', password: 'userPassword' })
 
 await nhost.graphql.request(`{
   users {
@@ -87,25 +89,25 @@ await nhost.graphql.request(`{
 Nhost is frontend agnostic, which means Nhost works with all frontend frameworks.
 
 <div align="center">
-  <a href="https://docs.nhost.io/platform/quickstarts/nextjs"><img src="assets/nextjs.svg"/></a>
-  <a href="https://docs.nhost.io/reference/javascript"><img src="assets/nuxtjs.svg"/></a>
-  <a href="https://docs.nhost.io/platform/quickstarts/react"><img src="assets/react.svg"/></a>
-  <a href="https://docs.nhost.io/reference/javascript"><img src="assets/react-native.svg"/></a>
-  <a href="https://docs.nhost.io/reference/javascript"><img src="assets/svelte.svg"/></a>
-  <a href="https://docs.nhost.io/platform/quickstarts/vue"><img src="assets/vuejs.svg"/></a>
+  <a href="https://docs.nhost.io/getting-started/quickstart/nextjs"><img src="assets/nextjs.svg"/></a>
+  <a href="https://docs.nhost.io/reference/javascript/nhost-js/nhost-client"><img src="assets/nuxtjs.svg"/></a>
+  <a href="https://docs.nhost.io/getting-started/quickstart/react"><img src="assets/react.svg"/></a>
+  <a href="https://docs.nhost.io/getting-started/quickstart/reactnative"><img src="assets/react-native.svg"/></a>
+  <a href="https://docs.nhost.io/reference/javascript/nhost-js/nhost-client"><img src="assets/svelte.svg"/></a>
+  <a href="https://docs.nhost.io/getting-started/quickstart/vue"><img src="assets/vuejs.svg"/></a>
 </div>
 
 # Resources
 
-- Start developing locally with the [Nhost CLI](https://docs.nhost.io/cli)
+- Start developing locally with the [Nhost CLI](https://docs.nhost.io/platform/cli/local-development)
 
 ## Nhost Clients
 
-- [JavaScript/TypeScript](https://docs.nhost.io/reference/javascript)
+- [JavaScript/TypeScript](https://docs.nhost.io/reference/javascript/nhost-js/nhost-client)
 - [Dart and Flutter](https://github.com/nhost/nhost-dart)
-- [React](https://docs.nhost.io/reference/react)
-- [Next.js](https://docs.nhost.io/reference/nextjs)
-- [Vue](https://docs.nhost.io/reference/vue)
+- [React](https://docs.nhost.io/reference/react/nhost-client)
+- [Next.js](https://docs.nhost.io/reference/nextjs/nhost-client)
+- [Vue](https://docs.nhost.io/reference/vue/nhost-client)
 
 ## Integrations
 
@@ -138,7 +140,7 @@ This repository, and most of our other open source projects, are licensed under
 
 Here are some ways of contributing to making Nhost better:
 
-- **[Try out Nhost](https://docs.nhost.io/get-started/quick-start)**, and think of ways to make the service better. Let us know here on GitHub.
+- **[Try out Nhost](https://docs.nhost.io)**, and think of ways to make the service better. Let us know here on GitHub.
 - Join our [Discord](https://discord.com/invite/9V7Qb2U) and connect with other members to share and learn from.
 - Send a pull request to any of our [open source repositories](https://github.com/nhost) on Github. Check our [contribution guide](https://github.com/nhost/nhost/blob/main/CONTRIBUTING.md) and our [developers guide](https://github.com/nhost/nhost/blob/main/DEVELOPERS.md) for more details about how to contribute. We're looking forward to your contribution!
 

audit-ci.jsonc

@@ -2,5 +2,5 @@
   // $schema provides code completion hints to IDEs.
   "$schema": "https://github.com/IBM/audit-ci/raw/main/docs/schema.json",
   "moderate": true,
-  "allowlist": ["trim-newlines"]
+  "allowlist": ["vue-template-compiler", { "id": "CVE-2025-48068", "path": "next" }]
 }

changelog_summary.sh

@@ -0,0 +1,17 @@
+#/usr/bin/env bash
+PREV_MONTH=$(date -d "1 month ago" +%Y-%m)
+
+echo "prev: $PREV_MONTH"
+
+files=$(git log --since="$PREV_MONTH-01" --until="$PREV_MONTH-31" --name-only -- '**/CHANGELOG.md' | grep CHANGE | sort -u)
+
+echo "files: $files"
+
+echo "Below you can find the latest release for each individual package released during this month:"
+echo
+
+for file in $files; do
+  name=$(grep '^# ' $file | awk '{ print substr($0, 4) }')
+  last_release=$(grep '^## ' $file | awk '{ print substr($0, 4) }' | head -n 1)
+  echo "@$name: $last_release [CHANGELOG.md](https://github.com/nhost/nhost/blob/main/$file)"
+done

config/tsconfig.base.json

@@ -11,20 +11,9 @@
     "allowSyntheticDefaultImports": true,
     "skipLibCheck": true,
     "moduleResolution": "node",
-    "target": "ES6",
+    "target": "ESNext",
     "module": "CommonJS",
-    "lib": [
-      "es5",
-      "dom",
-      "es2015.promise",
-      "es2015.symbol",
-      "es2015.iterable",
-      "es2015.collection",
-      "es2015.symbol.wellknown",
-      "es2015.core",
-      "es2017.object",
-      "es2017.string"
-    ],
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
     "resolveJsonModule": true,
     "esModuleInterop": true,
     "sourceMap": true,
@@ -79,4 +68,4 @@
     "**/*/__tests__",
     "**/*/__mocks__"
   ]
-}
+}

dashboard/.env.example

@@ -3,19 +3,28 @@ NEXT_PUBLIC_ENV=dev
 NEXT_PUBLIC_NHOST_PLATFORM=false
 
 # Environment Variables for Self Hosting and Local Development
-NEXT_PUBLIC_NHOST_AUTH_URL=https://local.auth.nhost.run/v1
-NEXT_PUBLIC_NHOST_FUNCTIONS_URL=https://local.functions.nhost.run/v1
-NEXT_PUBLIC_NHOST_GRAPHQL_URL=https://local.graphql.nhost.run/v1
-NEXT_PUBLIC_NHOST_STORAGE_URL=https://local.storage.nhost.run/v1
-NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL=https://local.hasura.nhost.run
-NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL=https://local.hasura.nhost.run/v1/migrations
-NEXT_PUBLIC_NHOST_HASURA_API_URL=https://local.hasura.nhost.run
+NEXT_PUBLIC_NHOST_AUTH_URL=https://local.auth.nhost.local.run/v1
+NEXT_PUBLIC_NHOST_FUNCTIONS_URL=https://local.functions.local.nhost.run/v1
+NEXT_PUBLIC_NHOST_GRAPHQL_URL=https://local.graphql.local.nhost.run/v1
+NEXT_PUBLIC_NHOST_STORAGE_URL=https://local.storage.local.nhost.run/v1
+NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL=https://local.hasura.local.nhost.run
+NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL=https://local.hasura.local.nhost.run/v1/migrations
+NEXT_PUBLIC_NHOST_HASURA_API_URL=https://local.hasura.local.nhost.run
 
 # Environment Variables when running the Nhost Dashboard against the Nhost Backend
 NEXT_PUBLIC_STRIPE_PK=<nhost_stripe_public_key>
 NEXT_PUBLIC_GITHUB_APP_INSTALL_URL=<github_app_install_url>
 NEXT_PUBLIC_ANALYTICS_WRITE_KEY=<analytics_write_key>
+NEXT_PUBLIC_SEGMENT_CDN_URL=<segment_cdn_url>
 NEXT_PUBLIC_NHOST_BRAGI_WEBSOCKET=<nhost_bragi_websocket>
 
-CODEGEN_GRAPHQL_URL=https://local.graphql.nhost.run/v1
+NEXT_PUBLIC_ZENDESK_URL=
+NEXT_PUBLIC_ZENDESK_API_KEY=
+NEXT_PUBLIC_ZENDESK_USER_EMAIL=
+
+
+CODEGEN_GRAPHQL_URL=https://local.graphql.local.nhost.run/v1
 CODEGEN_HASURA_ADMIN_SECRET=nhost-admin-secret
+NEXT_PUBLIC_TURNSTILE_SITE_KEY=FIXME
+
+NEXT_PUBLIC_SOC2_REPORT_FILE_ID=

dashboard/.eslintrc.js

@@ -15,6 +15,7 @@ module.exports = {
   ],
   rules: {
     'react/react-in-jsx-scope': 'off',
+    'react/prop-types': [2, { ignore: ['className'] }],
     'react/jsx-props-no-spreading': 'off',
     'react/require-default-props': 'off',
     'react-hooks/exhaustive-deps': 'warn',
@@ -75,5 +76,37 @@ module.exports = {
         ],
       },
     ],
+    'jsx-a11y/label-has-associated-control': [
+      2,
+      {
+        controlComponents: ['Input'],
+        depth: 3,
+      },
+    ],
   },
+  overrides: [
+    {
+      files: ['**/components/ui/v3/*.tsx'],
+      rules: {
+        'react/prop-types': [
+          2,
+          {
+            ignore: [
+              'className',
+              'align',
+              'sideOffset',
+              'orientation',
+              'decorative',
+              'checked',
+              'position',
+            ],
+          },
+        ],
+        'react-refresh/only-export-components': 'off',
+        'react/function-component-definition': 'off',
+        'arrow-body-style': 'off',
+        'react/no-unknown-property': 'off',
+      },
+    },
+  ],
 };

dashboard/.npmrc

@@ -1 +1,3 @@
-link-workspace-packages = false
+link-workspace-packages = false
+auto-install-peers = false
+resolution-mode=highest

dashboard/.storybook/main.js

@@ -42,7 +42,6 @@ module.exports = {
   env: (config) => ({
     ...config,
     NEXT_PUBLIC_ENV: 'dev',
-    NEXT_PUBLIC_NHOST_BACKEND_URL: 'http://localhost:1337',
     NEXT_PUBLIC_NHOST_PLATFORM: 'false',
   }),
 };

dashboard/.storybook/preview.js

@@ -1,8 +1,9 @@
+import { NhostProvider } from '@/providers/nhost';
 import '@fontsource/inter';
 import '@fontsource/inter/500.css';
 import '@fontsource/inter/700.css';
 import { CssBaseline, ThemeProvider } from '@mui/material';
-import { NhostClient, NhostProvider } from '@nhost/nextjs';
+import { createClient } from '@nhost/nhost-js-beta';
 import { NhostApolloProvider } from '@nhost/react-apollo';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Buffer } from 'buffer';
@@ -58,7 +59,9 @@ export const decorators = [
     </NhostApolloProvider>
   ),
   (Story) => (
-    <NhostProvider nhost={new NhostClient({ subdomain: 'local' })}>
+    <NhostProvider
+      nhost={createClient({ subdomain: 'local', region: 'local' })}
+    >
       <Story />
     </NhostProvider>
   ),

dashboard/.vscode/settings.json

@@ -1,6 +1,6 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
   "editor.codeActionsOnSave": {
-    "source.organizeImports": true
+    "source.organizeImports": "explicit"
   }
 }

dashboard/CHANGELOG.md

@@ -1,5 +1,472 @@
 # @nhost/dashboard
 
+## 2.36.0
+
+### Minor Changes
+
+- a30da08: feat (dashboard): add custom types to column types
+
+### Patch Changes
+
+- 73a7ba8: fix (dashboard): Show errors in row permission rule form
+- 397bfc9: fix (dashboard): Parse foreign key relations correctly
+- 2f4b376: fix (dashboard): allow permission variables with in operator
+- 88836f3: fix (dashboard): use correct fallback endpoint for migration in the CLI
+- ba3c49e: fix (dashboard): Show nested relationships in row permissions
+- 92e71a6: fix: minor fixes to csp
+- 81716d9: fix (dashboard): Show validation error on save when editing database columns
+
+## 2.35.0
+
+### Minor Changes
+
+- 7633d04: feat (dashbord): Allow composite primary keys
+- c4f383f: fix: dashboard: don't allow for upgrading to starter
+- 4c6400f: fix: handle redirect to verify email page if sign in with github
+- 7f0db21: feat: added entraid support
+- 412692c: chore (dashboard): Turn on strictNullChecks config
+
+### Patch Changes
+
+- 1708578: fix (dashboard): Update navbar after org and project operations
+- 34ede5c: fix: enable csp again
+- 96228df: chore (dashboard): update nhost-js to the latest version
+- d8c5117: fix (dashboard): Allow creating tables without primary key
+- 89f6fe6: chore (docker-example): update dashboard image version
+- e8a3789: fix (dashboard): scroll to active element in navbar when navigating
+
+## 2.34.0
+
+### Minor Changes
+
+- 7eb9539: feat (dashboard): Allow upgrading free organizations
+- 129ec1e: feat: dashboard: new onboarding
+- 59249e5: fix: elevate permissions in password reset
+- 5e9ddb4: fix: show Run service name in logs page
+- 4ffff86: fix (dashboard): Disable settings pages when config server env variable is not set
+- b8cb491: fix: update dependencies to fix vulnerabilities
+- 5565451: fix: support page, can scroll all the way down in Chrome for iOS
+- f7d7080: chore: dashboard: add gtag
+
+### Patch Changes
+
+- 181c0ab: fix (dashboard): Fix upgrade project e2e tests
+- 56c87da: fix (dashboard): Use the correct http method when conneting to new github
+- 00132bd: fix (dashboard): Clear isSigningOut variable on Signin page
+- 66e0cc8: fix (dashboard): Check if user is logged in before redirecting
+- 9c0a118: chore (dashboard): Add RetryLink to ApolloClient
+- df6b85e: fix (dashboard): fix password reset redirect url
+- ec24567: fix (dashboard): Add content-type header
+- 57b2615: chore (dashboard): refactor redirect behaviour
+- cffa161: fix (dashboard): disable settings in the header when self-hosting
+- 85316e8: fix (dashboard): Remove second loading indicator on projects page
+- 47ab341: fix (dashboard): Fix announcement layout when title is too short
+
+## 2.33.0
+
+### Minor Changes
+
+- aee9a80: chore: update typescript version to the latest
+- 5ef3f76: chore (dashboard): Use the new SDK in the Dashboard
+
+### Patch Changes
+
+- 9ed8ce8: fix (dashboard): Request new Mfa ticket after an invalid totp when signing in
+- fd3b5c7: fix (dashboard): Limit new project's name to a maximum of 32 charachters in E2E tests
+
+## 2.32.0
+
+### Minor Changes
+
+- 736862c: fix: update link to base directory docs in git settings
+- ea99fb3: chore: dashboard: improve messaging when git connected
+
+### Patch Changes
+
+- d738884: chore (dashboard): Add link about antivirus integration
+
+## 2.31.0
+
+### Minor Changes
+
+- 39b10a2: feat (dashboard): Add multi-factor authentication
+- 4b84780: feat (dashboard): Add Webauthn to dashboard
+
+### Patch Changes
+
+- 61eb6cd: fix (dashboard): Fix update project e2e test
+  - @nhost/react-apollo@18.0.0
+  - @nhost/nextjs@2.2.8
+
+## 2.30.0
+
+### Minor Changes
+
+- f6947a2: fix: fetch job-backup services logs using Live filter
+- 44a3e6b: fix: collapsed main navigation sidebar overlaps mobile navbar
+- 99b78f1: feat: dashboard: add download button for soc2 report
+- 9acae7d: fix: e2e tests, stop on error when refreshing metadata
+
+### Patch Changes
+
+- 31e636a: fix (dashboard): Use the correct payload to reset metadata before the e2e tests
+
+## 2.29.0
+
+### Minor Changes
+
+- c97b43f: fix: update vite to address vulnerability audit
+- a0931e2: fix: improve logs time range and filter selection
+- c0635ae: feat (dashboard): Add information about that free organization cannot be upgraded.
+- e87505c: fix: can downsize postgres storage capacity using local dashboard
+
+## 2.28.0
+
+### Minor Changes
+
+- 8552678: feat: dashboard: add additional events to segment
+- 0bf2808: chore: refresh metadata before end-to-end tests
+- 72a365c: fix: correct graphql page roles dropdown's source
+- cef6471: fix: dashboard: add anonid to user's metadata
+
+### Patch Changes
+
+- d9eb906: fix: update vite and nextjs because of vulnerability
+- 233232b: feat (dashboard): improve Upgrade project dialog
+- Updated dependencies [d9eb906]
+  - @nhost/nextjs@2.2.7
+  - @nhost/react-apollo@17.0.4
+
+## 2.27.0
+
+### Minor Changes
+
+- 013e1c1: fix: update vite and image-size dependencies to address security audit vulnerabilities
+- 4fd176b: chore: re-add user event ci tests, updated sveltekit example tests to e2e suite
+
+### Patch Changes
+
+- a1333df: fix: update vite because of vulnerability
+- 0420e4f: fix (dashboard): Display the selected date's month in the datetime picker component
+  - @nhost/react-apollo@17.0.3
+  - @nhost/nextjs@2.2.6
+
+## 2.26.0
+
+### Minor Changes
+
+- 7b9cdf1: chore: remove legacy workspaces
+- 1c4f321: fix: update vite to fix audit vulnerabilities
+
+## 2.25.0
+
+### Minor Changes
+
+- 34fdcb8: chore: add prettier plugins as devDependencies to root of monorepo
+- 4937c5e: fix: stop content overflowing in projects and database permissions page
+- 1542132: fix: update babel dependencies to address security audit vulnerabilities
+
+### Patch Changes
+
+- 78436ca: chore (dashboard): add tests and small updates to PiTR settings and restore page
+- b5a3895: chore (dashboard): update page context after each navigation
+- 9b24807: chore: fix link to PiTR documentation
+- ea65846: chore (dashboard): update nextjs to fix middleware exploit
+
+## 2.17.0
+
+### Minor Changes
+
+- fd59918: fix: redirect to 404 with nhost cli dashboard
+
+## 2.16.0
+
+### Minor Changes
+
+- f8e6b61: fix: can add rule groups in table permissions
+- 9e404c8: fix: not redirect to 404 page if using local Nhost backend
+- ac4aa01: fix: can delete column in database page
+- 4385524: fix: update url to check service health in local dashboard
+
+### Patch Changes
+
+- @nhost/react-apollo@16.0.1
+- @nhost/nextjs@2.2.2
+
+## 2.15.0
+
+### Minor Changes
+
+- f1052a8: fix: improve stability of the dashboard when pausing projects
+- 30daa41: fix: update links to docs in overview page
+- 7537237: feat: add image preview toggle in storage
+
+## 2.14.0
+
+### Minor Changes
+
+- d43931e: fix: invalid organization slug/project subdomain doesn't open 404 page
+- 5df6fa2: feat: add unencrypted disk warning in storage capacity settings
+
+### Patch Changes
+
+- 44c1e17: chore: update `msw` to v1.3.5 to fix vulnerabilities
+  - @nhost/react-apollo@16.0.0
+  - @nhost/nextjs@2.2.1
+
+## 2.13.0
+
+### Minor Changes
+
+- 21e90da: chore: remove restrictions on SMTP sender so My Name <name@acme.com> can be added
+- 865dd93: fix: duplicate Run placeholders when there is an error in the backend
+- 6902a36: fix: can remove resources if postgres capacity is higher than 10
+- a535aa3: fix: fetch user roles locally in auth section
+- 0c50816: fix: allow decimal numbers in database row insert
+- aea6d18: chore: add warning when pausing a project about losing Run services persistent volume data
+- d3b4fc3: feat: allow to change postgres settings if project is paused
+- 29d27e1: chore: update `next` to v14.2.22 to fix vulnerabilities
+- c9dca09: feat: add reset password form
+- b3bcacb: fix: paused project banner cannot read null project name
+
+### Patch Changes
+
+- Updated dependencies [46fc520]
+- Updated dependencies [29d27e1]
+  - @nhost/nextjs@2.2.0
+  - @nhost/react-apollo@15.0.1
+
+## 2.12.0
+
+### Minor Changes
+
+- eb95562: fix: show all available permission variables in permission dropdown select
+
+### Patch Changes
+
+- 8b5c4a0: chore: cleanup layout and add disable duplicate atom key checking in development mode
+
+## 2.11.3
+
+### Patch Changes
+
+- 714dffa: fix: improve project polling logic and unify usage across components
+
+## 2.11.2
+
+### Patch Changes
+
+- 6a34f89: fix: improve project polling logic and unify usage across components
+
+## 2.11.1
+
+### Patch Changes
+
+- 0f6ce52: fix: consolidate useProject hook and fix jwt expired error
+
+## 2.11.0
+
+### Minor Changes
+
+- cea3ef5: Feat: add org and project placeholders
+
+## 2.10.0
+
+### Minor Changes
+
+- 86ecf27: feat: add support for additional metrics in overview
+- 21708be: feat: dashboard: add support for storage buckets to AI assistants
+
+## 1.30.0
+
+### Minor Changes
+
+- 50441a8: feat: add ui for project autoscaler settings and run services autoscaler settings
+
+## 1.29.0
+
+### Minor Changes
+
+- 55d8bb5: feat: integrate turnstile for signup verification
+- 2a2e54c: fix: update docs url in run services form tooltip
+- 18f942f: fix: display long error messages in error toast without overflow
+
+### Patch Changes
+
+- @nhost/react-apollo@13.0.0
+- @nhost/nextjs@2.1.22
+
+## 1.28.2
+
+### Patch Changes
+
+- 52a38fe: chore: update dependencies to address security vulnerabilities
+- Updated dependencies [52a38fe]
+  - @nhost/nextjs@2.1.21
+
+## 1.28.1
+
+### Patch Changes
+
+- 9735fa2: chore: remove broken link
+
+## 1.28.0
+
+### Minor Changes
+
+- 526183a: feat: allow filtering users in "make request as" in graphql section
+- be3b85b: feat: add conceal errors toggle on auth settings page
+
+### Patch Changes
+
+- 35a2f12: fix: prevent run service details from opening when attempting to delete
+  - @nhost/react-apollo@12.0.6
+  - @nhost/nextjs@2.1.20
+
+## 1.27.0
+
+### Minor Changes
+
+- a7cd02c: fix: resolve rate limit query
+
+## 1.26.0
+
+### Minor Changes
+
+- 3773ad7: chore: update pricing information
+- b63250d: fix: not allow run service creation form resubmission while creating a run service
+- a44a1d4: feat: add rate limits settings page
+
+### Patch Changes
+
+- @nhost/react-apollo@12.0.5
+- @nhost/nextjs@2.1.19
+
+## 1.25.0
+
+### Minor Changes
+
+- d1ceede: feat: add setting to migrate postgres major and/or minor versions
+- e5d3d1a: fix: allow manually typing column for custom check in database row permissions
+
+### Patch Changes
+
+- @nhost/react-apollo@12.0.4
+- @nhost/nextjs@2.1.18
+
+## 1.24.1
+
+### Patch Changes
+
+- 49f2e55: fix: use service subdomain in service form and service details dialog
+- 598b988: fix: use current project subdomain in ServiceDetailsDialog component
+
+## 1.24.0
+
+### Minor Changes
+
+- abb24af: chore: add redirect to support page when project is locked
+- 18a6455: feat: show contact us info and locked reason when project is locked
+
+### Patch Changes
+
+- e31eefa: fix: include ingresses field when updating run services
+
+## 1.23.0
+
+### Minor Changes
+
+- 33284d3: fix: don't show double scrollbar in configuration editor
+
+### Patch Changes
+
+- @nhost/react-apollo@12.0.3
+- @nhost/nextjs@2.1.17
+
+## 1.22.0
+
+### Minor Changes
+
+- 998c037: fix: align drop-down list in select component
+- 807b8c0: fix: show city name in region selection for project creation
+
+## 1.21.0
+
+### Minor Changes
+
+- a2efeed: fix: improve project health error handling, add unknown state and polling interval for health state
+
+## 1.20.0
+
+### Minor Changes
+
+- 8ea4210: fix: error toasts can be closed individually, instead of dismissing all toasts at once
+- 58919ba: chore: add blink animation when project health service is updating
+
+## 1.19.0
+
+### Minor Changes
+
+- b519862: fix: get configuration in configuration editor using local development environment
+
+## 1.18.0
+
+### Minor Changes
+
+- 502abad: feat: add services health checks indicators to the overview page
+- b3ff6ad: chore: update title text on service status modal
+- dbadf59: feat: add project configuration TOML editor to the settings page
+
+## 1.17.0
+
+### Minor Changes
+
+- 77fba27: fix: postgres version validation when activating ai in ai settings page
+- ac6d1b6: feat: use name instead of awsName
+
+## 1.16.3
+
+### Patch Changes
+
+- 87a37cf: fix: remove unnecessary isPlatform check from verify button disable logic on custom domains
+  - @nhost/react-apollo@12.0.2
+  - @nhost/nextjs@2.1.16
+
+## 1.16.2
+
+### Patch Changes
+
+- a9413af: fix: update `GetAllWorkspacesAndProjects` query polling to use exponential backoff
+  - @nhost/react-apollo@12.0.1
+  - @nhost/nextjs@2.1.15
+
+## 1.16.1
+
+### Patch Changes
+
+- @nhost/react-apollo@12.0.0
+- @nhost/nextjs@2.1.14
+
+## 1.16.0
+
+### Minor Changes
+
+- c6d5c5c: feat: add toggle switch to enable/disable public access in the database settings
+
+## 1.15.2
+
+### Patch Changes
+
+- @nhost/react-apollo@11.0.4
+- @nhost/nextjs@2.1.13
+
+## 1.15.1
+
+### Patch Changes
+
+- @nhost/react-apollo@11.0.3
+- @nhost/nextjs@2.1.12
+
 ## 1.15.0
 
 ### Minor Changes

dashboard/Dockerfile

@@ -1,13 +1,13 @@
-FROM node:18-alpine AS pruner
+FROM node:20-alpine AS pruner
 RUN apk add --no-cache libc6-compat
 RUN apk update
 WORKDIR /app
 
-RUN yarn global add turbo@1.11.3
+RUN yarn global add turbo@2.2.3
 COPY . .
 RUN turbo prune --scope="@nhost/dashboard" --docker
 
-FROM node:18-alpine AS builder
+FROM node:20-alpine AS builder
 ARG TURBO_TOKEN
 ARG TURBO_TEAM
 
@@ -15,25 +15,25 @@ RUN apk add --no-cache libc6-compat python3 make g++
 RUN apk update
 WORKDIR /app
 
-ENV NEXT_TELEMETRY_DISABLED 1
-ENV NEXT_PUBLIC_ENV dev
-ENV NEXT_PUBLIC_NHOST_PLATFORM false
+ENV NEXT_TELEMETRY_DISABLED=1
+ENV NEXT_PUBLIC_ENV=dev
+ENV NEXT_PUBLIC_NHOST_PLATFORM=false
 
 # placeholders for URLs, will be replaced on runtime by entrypoint script
-ENV NEXT_PUBLIC_NHOST_ADMIN_SECRET __NEXT_PUBLIC_NHOST_ADMIN_SECRET__
-ENV NEXT_PUBLIC_NHOST_AUTH_URL __NEXT_PUBLIC_NHOST_AUTH_URL__
-ENV NEXT_PUBLIC_NHOST_FUNCTIONS_URL __NEXT_PUBLIC_NHOST_FUNCTIONS_URL__
-ENV NEXT_PUBLIC_NHOST_GRAPHQL_URL __NEXT_PUBLIC_NHOST_GRAPHQL_URL__
-ENV NEXT_PUBLIC_NHOST_STORAGE_URL __NEXT_PUBLIC_NHOST_STORAGE_URL__
-ENV NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL __NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL__
-ENV NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL __NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL__
-ENV NEXT_PUBLIC_NHOST_HASURA_API_URL __NEXT_PUBLIC_NHOST_HASURA_API_URL__
-ENV NEXT_PUBLIC_NHOST_CONFIGSERVER_URL __NEXT_PUBLIC_NHOST_CONFIGSERVER_URL__
+ENV NEXT_PUBLIC_NHOST_ADMIN_SECRET=__NEXT_PUBLIC_NHOST_ADMIN_SECRET__
+ENV NEXT_PUBLIC_NHOST_AUTH_URL=__NEXT_PUBLIC_NHOST_AUTH_URL__
+ENV NEXT_PUBLIC_NHOST_FUNCTIONS_URL=__NEXT_PUBLIC_NHOST_FUNCTIONS_URL__
+ENV NEXT_PUBLIC_NHOST_GRAPHQL_URL=__NEXT_PUBLIC_NHOST_GRAPHQL_URL__
+ENV NEXT_PUBLIC_NHOST_STORAGE_URL=__NEXT_PUBLIC_NHOST_STORAGE_URL__
+ENV NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL=__NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL__
+ENV NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL=__NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL__
+ENV NEXT_PUBLIC_NHOST_HASURA_API_URL=__NEXT_PUBLIC_NHOST_HASURA_API_URL__
+ENV NEXT_PUBLIC_NHOST_CONFIGSERVER_URL=__NEXT_PUBLIC_NHOST_CONFIGSERVER_URL__
 
-RUN yarn global add pnpm@8.10.5
+RUN yarn global add pnpm@9.15.0
 COPY .gitignore .gitignore
 COPY --from=pruner /app/out/json/ .
-COPY --from=pruner /app/out/pnpm-*.yaml .
+COPY --from=pruner /app/out/pnpm-*.yaml ./
 RUN pnpm install --frozen-lockfile
 
 COPY --from=pruner /app/out/full/ .
@@ -41,7 +41,7 @@ COPY turbo.json turbo.json
 COPY config/ config/
 RUN pnpm build:dashboard
 
-FROM node:18-alpine AS runner
+FROM node:20-alpine AS runner
 WORKDIR /app
 
 RUN addgroup --system --gid 1001 nodejs
@@ -58,4 +58,4 @@ COPY --from=builder --chown=nextjs:nodejs /app/dashboard/.next/standalone/app ./
 COPY --from=builder --chown=nextjs:nodejs /app/dashboard/.next/static ./dashboard/.next/static
 
 ENTRYPOINT ["./docker-entrypoint.sh"]
-CMD ["node", "dashboard/server.js"]
+CMD ["node", "dashboard/server.js"]

dashboard/README.md

@@ -38,7 +38,7 @@ These files are added to `.gitignore`, so you don't need to worry about committi
 
 ### Enable Local Development
 
-You can connect the Nhost Dashboard to your **locally running** Nhost backend in a few steps. Make sure you have the [Nhost CLI installed](https://docs.nhost.io/platform/cli#installation).
+You can connect the Nhost Dashboard to your **locally running** Nhost backend in a few steps. Make sure you have the [Nhost CLI installed](https://docs.nhost.io/platform/cli/local-development).
 
 First, you need to run the following command to start your backend locally:
 
@@ -51,13 +51,13 @@ You can connect the Nhost Dashboard to your locally running backend by setting t
 ```bash
 NEXT_PUBLIC_ENV=dev
 NEXT_PUBLIC_NHOST_PLATFORM=false
-NEXT_PUBLIC_NHOST_AUTH_URL=https://local.auth.nhost.run/v1
-NEXT_PUBLIC_NHOST_FUNCTIONS_URL=https://local.functions.nhost.run/v1
-NEXT_PUBLIC_NHOST_GRAPHQL_URL=https://local.graphql.nhost.run/v1
-NEXT_PUBLIC_NHOST_STORAGE_URL=https://local.storage.nhost.run/v1
-NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL=https://local.hasura.nhost.run
-NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL=https://local.hasura.nhost.run/v1/migrations
-NEXT_PUBLIC_NHOST_HASURA_API_URL=https://local.hasura.nhost.run
+NEXT_PUBLIC_NHOST_AUTH_URL=https://local.auth.local.nhost.run/v1
+NEXT_PUBLIC_NHOST_FUNCTIONS_URL=https://local.functions.local.nhost.run/v1
+NEXT_PUBLIC_NHOST_GRAPHQL_URL=https://local.graphql.local.nhost.run/v1
+NEXT_PUBLIC_NHOST_STORAGE_URL=https://local.storage.local.nhost.run/v1
+NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL=https://local.hasura.local.nhost.run
+NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL=https://local.hasura.local.nhost.run/v1/migrations
+NEXT_PUBLIC_NHOST_HASURA_API_URL=https://local.hasura.local.nhost.run
 ```
 
 This will connect the Nhost Dashboard to your locally running Nhost backend.
@@ -100,7 +100,6 @@ pnpm storybook --port 6007
 
 | Name                                    | Description                                                                                 |
 | --------------------------------------- | ------------------------------------------------------------------------------------------- |
-| `NEXT_PUBLIC_NHOST_BACKEND_URL`         | Backend URL. This is only used if `NEXT_PUBLIC_NHOST_PLATFORM` is `true`.                   |
 | `NEXT_PUBLIC_STRIPE_PK`                 | Stripe public key. This is only used if `NEXT_PUBLIC_NHOST_PLATFORM` is `true`.             |
 | `NEXT_PUBLIC_GITHUB_APP_INSTALL_URL`    | URL of the GitHub application. This is only used if `NEXT_PUBLIC_NHOST_PLATFORM` is `true`. |
 | `NEXT_PUBLIC_ANALYTICS_WRITE_KEY`       | Analytics key. This is only used if `NEXT_PUBLIC_NHOST_PLATFORM` is `true`.                 |
@@ -150,8 +149,11 @@ Next, you need to create a project. Create a `.env.test` file with the following
 NHOST_TEST_DASHBOARD_URL=<test_dashboard_url>
 NHOST_TEST_USER_EMAIL=<test_user_email>
 NHOST_TEST_USER_PASSWORD=<test_user_password>
-NHOST_TEST_WORKSPACE_NAME=<test_workspace_name>
+NHOST_TEST_ORGANIZATION_NAME=<test_organization_name>
+NHOST_TEST_ORGANIZATION_SLUG=<test_organization_slug>
+NHOST_TEST_PERSONAL_ORG_SLUG=<test_personal_org_slug>
 NHOST_TEST_PROJECT_NAME=<test_project_name>
+NHOST_TEST_PROJECT_SUBDOMAIN=<test_project_subdomain>
 NHOST_TEST_PROJECT_ADMIN_SECRET=<test_project_admin_secret>
 ```
 
@@ -160,11 +162,14 @@ NHOST_TEST_PROJECT_ADMIN_SECRET=<test_project_admin_secret>
 - `NHOST_TEST_DASHBOARD_URL`: The URL to run the tests against (e.g: http://localhost:3000 or https://staging.app.nhost.io)
 - `NHOST_TEST_USER_EMAIL`: Email address of the test user that owns the test project
 - `NHOST_TEST_USER_PASSWORD`: Password of the test user that owns the test project
-- `NHOST_TEST_WORKSPACE_NAME`: Name of the workspace that contains the test project
+- `NHOST_TEST_ORGANIZATION_NAME`: Name of the organization that contains the test project
+- `NHOST_TEST_ORGANIZATION_SLUG`: Slug of the organization that contains the test project
+- `NHOST_TEST_PERSONAL_ORG_SLUG`: Slug of the personal organization that contains the test project
 - `NHOST_TEST_PROJECT_NAME`: Name of the test project
+- `NHOST_TEST_PROJECT_SUBDOMAIN`: Subdomain of the test project
 - `NHOST_TEST_PROJECT_ADMIN_SECRET`: Admin secret of the test project
 
-Make sure to copy the workspace and project information from the [Nhost Dashboard](https://app.nhost.io/).
+Make sure to copy the organization and project information from the [Nhost Dashboard](https://app.nhost.io/).
 
 End-to-end tests are written using [Playwright](https://playwright.dev/). To run the tests, run the following command:
 

dashboard/components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/styles/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui/v3",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}

dashboard/docker-entrypoint.sh

@@ -21,6 +21,6 @@ find dashboard -type f -exec sed -i "s~__NEXT_PUBLIC_NHOST_STORAGE_URL__~${NEXT_
 find dashboard -type f -exec sed -i "s~__NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL__~${NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL}~g" {} +
 find dashboard -type f -exec sed -i "s~__NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL__~${NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL}~g" {} +
 find dashboard -type f -exec sed -i "s~__NEXT_PUBLIC_NHOST_HASURA_API_URL__~${NEXT_PUBLIC_NHOST_HASURA_API_URL}~g" {} +
-find dashboard -type f -exec sed -i "s~__NEXT_PUBLIC_NHOST_CONFIGSERVER_URL__~${NEXT_PUBLIC_NHOST_CONFIGSERVER_URL}~g" {} +
+find dashboard -type f -exec sed -i "s~__NEXT_PUBLIC_NHOST_CONFIGSERVER_URL__~${NEXT_PUBLIC_NHOST_CONFIGSERVER_URL:-""}~g" {} +
 
 exec "$@"

dashboard/e2e/account/pat/manage-pat.test.ts

@@ -1,23 +1,11 @@
+import { expect, test } from '@/e2e/fixtures/auth-hook';
+
 import { faker } from '@faker-js/faker';
-import type { Page } from '@playwright/test';
-import { expect, test } from '@playwright/test';
 
-let page: Page;
-
-test.beforeAll(async ({ browser }) => {
-  page = await browser.newPage();
-});
-
-test.beforeEach(async () => {
-  await page.goto('/');
-});
-
-test.afterAll(async () => {
-  await page.close();
-});
-
-test('should be able to create then delete a personal access token', async () => {
-  await page.waitForLoadState('networkidle');
+test('should be able to create then delete a personal access token', async ({
+  authenticatedNhostPage: page,
+}) => {
+  await page.waitForTimeout(1000);
   await page.getByRole('banner').getByRole('button').last().click();
   await page.getByRole('link', { name: /account settings/i }).click();
   await page

dashboard/e2e/ai/assistants.test.ts

@@ -0,0 +1,43 @@
+import { TEST_ORGANIZATION_SLUG, TEST_PROJECT_SUBDOMAIN } from '@/e2e/env';
+import { expect, test } from '@/e2e/fixtures/auth-hook';
+import { navigateToProject } from '@/e2e/utils';
+
+test.beforeEach(async ({ authenticatedNhostPage: page }) => {
+  await navigateToProject({
+    page,
+    orgSlug: TEST_ORGANIZATION_SLUG,
+    projectSubdomain: TEST_PROJECT_SUBDOMAIN,
+  });
+
+  const AIRoute = `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/ai/assistants`;
+  await page.goto(AIRoute);
+  await page.waitForURL(AIRoute);
+});
+
+test('should create and delete an Assistant', async ({
+  authenticatedNhostPage: page,
+}) => {
+  await page.getByRole('link', { name: 'Assistants' }).click();
+
+  await expect(page.getByText(/no assistants are configured/i)).toBeVisible();
+
+  await page.getByRole('button', { name: 'Create a new assistant' }).click();
+  await page.getByLabel('Name').fill('test');
+  await page.getByLabel('Description').fill('test');
+  await page.getByLabel('Instructions').fill('test');
+  await page.getByLabel('Model').fill('gpt-3.5-turbo-1106');
+
+  await page.getByRole('button', { name: 'Create' }).click();
+
+  await expect(page.getByRole('heading', { name: /test/i })).toBeVisible();
+
+  await page.getByLabel(/more options/i).click();
+  await page.getByRole('menuitem', { name: /delete test/i }).click();
+
+  await page.getByLabel('Confirm Delete Assistant').check();
+  await page.getByRole('button', { name: 'Delete Assistant' }).click();
+
+  await expect(
+    page.getByRole('heading', { name: /no assistants are configured/i }),
+  ).toBeVisible();
+});

dashboard/e2e/ai/auto-embeddings.test.ts

@@ -0,0 +1,39 @@
+import { TEST_ORGANIZATION_SLUG, TEST_PROJECT_SUBDOMAIN } from '@/e2e/env';
+import { navigateToProject } from '@/e2e/utils';
+
+import { expect, test } from '@/e2e/fixtures/auth-hook';
+
+test.beforeEach(async ({ authenticatedNhostPage: page }) => {
+  await navigateToProject({
+    page,
+    orgSlug: TEST_ORGANIZATION_SLUG,
+    projectSubdomain: TEST_PROJECT_SUBDOMAIN,
+  });
+
+  const AIRoute = `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/ai/auto-embeddings`;
+  await page.goto(AIRoute);
+  await page.waitForURL(AIRoute);
+});
+
+test('should create and delete an Auto-Embeddings', async ({
+  authenticatedNhostPage: page,
+}) => {
+  await page.getByRole('button', { name: 'Add a new Auto-Embeddings' }).click();
+
+  await page.getByLabel('Name').fill('test');
+  await page.getByLabel('Schema').fill('auth');
+  await page.getByLabel('Table').fill('users');
+  await page.getByLabel('Column').fill('email');
+
+  await page.getByRole('button', { name: 'Create' }).click();
+  await expect(page.getByRole('heading', { name: /test/i })).toBeVisible();
+
+  await page.getByLabel(/more options/i).click();
+  await page.getByRole('menuitem', { name: /delete test/i }).click();
+
+  await page.getByLabel('Confirm Delete Auto-').check();
+  await page.getByRole('button', { name: 'Delete Auto-Embeddings' }).click();
+  await expect(
+    page.getByRole('heading', { name: /No Auto-Embeddings are configured/i }),
+  ).toBeVisible();
+});

dashboard/e2e/auth/ban-user.test.ts

@@ -1,33 +1,21 @@
-import {
-  TEST_PROJECT_NAME,
-  TEST_PROJECT_SLUG,
-  TEST_WORKSPACE_SLUG,
-} from '@/e2e/env';
-import { createUser, generateTestEmail, openProject } from '@/e2e/utils';
+import { expect, test } from '@/e2e/fixtures/auth-hook';
+import { createUser, generateTestEmail, gotoAuthURL } from '@/e2e/utils';
 import { faker } from '@faker-js/faker';
-import test, { expect } from '@playwright/test';
 
-test('should be able to ban and unban a user', async ({ page }) => {
-  await page.goto('/');
-
-  await openProject({
-    page,
-    projectName: TEST_PROJECT_NAME,
-    workspaceSlug: TEST_WORKSPACE_SLUG,
-    projectSlug: TEST_PROJECT_SLUG,
-  });
-
-  await page
-    .getByRole('navigation', { name: /main navigation/i })
-    .getByRole('link', { name: /auth/i })
-    .click();
-
-  await page.waitForURL(`/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/users`);
+test.beforeEach(async ({ authenticatedNhostPage: page }) => {
+  await gotoAuthURL(page);
+});
 
+test('should be able to ban and unban a user', async ({
+  authenticatedNhostPage: page,
+}) => {
   const email = generateTestEmail();
   const password = faker.internet.password();
 
   await createUser({ page, email, password });
+  await page.waitForSelector(
+    'div:has-text("User has been created successfully.")',
+  );
 
   await page
     .getByRole('button', { name: `View ${email}`, exact: true })

dashboard/e2e/auth/create-user.test.ts

@@ -1,53 +1,28 @@
-import {
-  TEST_PROJECT_NAME,
-  TEST_PROJECT_SLUG,
-  TEST_WORKSPACE_SLUG,
-} from '@/e2e/env';
-import { createUser, generateTestEmail, openProject } from '@/e2e/utils';
+import { expect, test } from '@/e2e/fixtures/auth-hook';
+import { createUser, generateTestEmail, gotoAuthURL } from '@/e2e/utils';
 import { faker } from '@faker-js/faker';
-import type { Page } from '@playwright/test';
-import test, { expect } from '@playwright/test';
 
-let page: Page;
-
-test.beforeAll(async ({ browser }) => {
-  page = await browser.newPage();
+test.beforeEach(async ({ authenticatedNhostPage: page }) => {
+  await gotoAuthURL(page);
 });
 
-test.beforeEach(async () => {
-  await page.goto('/');
-
-  await openProject({
-    page,
-    projectName: TEST_PROJECT_NAME,
-    workspaceSlug: TEST_WORKSPACE_SLUG,
-    projectSlug: TEST_PROJECT_SLUG,
-  });
-
-  await page
-    .getByRole('navigation', { name: /main navigation/i })
-    .getByRole('link', { name: /auth/i })
-    .click();
-
-  await page.waitForURL(`/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/users`);
-});
-
-test.afterAll(async () => {
-  await page.close();
-});
-
-test('should create a user', async () => {
+test('should create a user', async ({ authenticatedNhostPage: page }) => {
   const email = generateTestEmail();
   const password = faker.internet.password();
 
   await createUser({ page, email, password });
+  await page.waitForSelector(
+    'div:has-text("User has been created successfully.")',
+  );
 
   await expect(
     page.getByRole('button', { name: `View ${email}`, exact: true }),
   ).toBeVisible();
 });
 
-test('should not be able to create a user with an existing email', async () => {
+test('should not be able to create a user with an existing email', async ({
+  authenticatedNhostPage: page,
+}) => {
   const email = generateTestEmail();
   const password = faker.internet.password();
 

dashboard/e2e/auth/delete-user.test.ts

@@ -1,46 +1,22 @@
-import {
-  TEST_PROJECT_NAME,
-  TEST_PROJECT_SLUG,
-  TEST_WORKSPACE_SLUG,
-} from '@/e2e/env';
-import { createUser, generateTestEmail, openProject } from '@/e2e/utils';
+import { createUser, generateTestEmail, gotoAuthURL } from '@/e2e/utils';
 import { faker } from '@faker-js/faker';
-import type { Page } from '@playwright/test';
-import test, { expect } from '@playwright/test';
 
-let page: Page;
+import { expect, test } from '@/e2e/fixtures/auth-hook';
 
-test.beforeAll(async ({ browser }) => {
-  page = await browser.newPage();
+test.beforeEach(async ({ authenticatedNhostPage: page }) => {
+  await gotoAuthURL(page);
 });
 
-test.beforeEach(async () => {
-  await page.goto('/');
-
-  await openProject({
-    page,
-    projectName: TEST_PROJECT_NAME,
-    workspaceSlug: TEST_WORKSPACE_SLUG,
-    projectSlug: TEST_PROJECT_SLUG,
-  });
-
-  await page
-    .getByRole('navigation', { name: /main navigation/i })
-    .getByRole('link', { name: /auth/i })
-    .click();
-
-  await page.waitForURL(`/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/users`);
-});
-
-test.afterAll(async () => {
-  await page.close();
-});
-
-test('should be able to delete a user', async () => {
+test('should be able to delete a user', async ({
+  authenticatedNhostPage: page,
+}) => {
   const email = generateTestEmail();
   const password = faker.internet.password();
 
   await createUser({ page, email, password });
+  await page.waitForSelector(
+    'div:has-text("User has been created successfully.")',
+  );
 
   await expect(
     page.getByRole('button', { name: `View ${email}`, exact: true }),
@@ -66,14 +42,21 @@ test('should be able to delete a user', async () => {
   await expect(
     page.getByRole('button', { name: `View ${email}`, exact: true }),
   ).not.toBeVisible();
+  await expect(page.getByText('User deleted successfully.')).toBeVisible();
 });
 
-test('should be able to delete a user from the details page', async () => {
+test('should be able to delete a user from the details page', async ({
+  authenticatedNhostPage: page,
+}) => {
   const email = generateTestEmail();
   const password = faker.internet.password();
 
   await createUser({ page, email, password });
 
+  await page.waitForSelector(
+    'div:has-text("User has been created successfully.")',
+  );
+
   await page
     .getByRole('button', { name: `View ${email}`, exact: true })
     .click();
@@ -93,4 +76,5 @@ test('should be able to delete a user from the details page', async () => {
   await expect(
     page.getByRole('button', { name: `View ${email}`, exact: true }),
   ).not.toBeVisible();
+  await expect(page.getByText('User deleted successfully.')).toBeVisible();
 });

dashboard/e2e/auth/edit-user.test.ts

@@ -0,0 +1,34 @@
+import { expect, test } from '@/e2e/fixtures/auth-hook';
+import { createUser, generateTestEmail, gotoAuthURL } from '@/e2e/utils';
+import { faker } from '@faker-js/faker';
+
+test.beforeEach(async ({ authenticatedNhostPage: page }) => {
+  await gotoAuthURL(page);
+});
+
+test('should be able to edit user roles from the details page', async ({
+  authenticatedNhostPage: page,
+}) => {
+  const email = generateTestEmail();
+  const password = faker.internet.password();
+
+  await createUser({ page, email, password });
+  await page.waitForSelector(
+    'div:has-text("User has been created successfully.")',
+  );
+
+  await page
+    .getByRole('button', { name: `View ${email}`, exact: true })
+    .click();
+
+  await page.locator('#defaultRole').click();
+  await page.getByRole('option', { name: /anonymous/i }).click();
+
+  await page.getByLabel('anonymous').click();
+
+  await page.getByRole('button', { name: /save/i }).click();
+
+  await expect(
+    page.getByText('User settings have been updated successfully.'),
+  ).toBeVisible();
+});

dashboard/e2e/auth/verify-user.test.ts

@@ -1,47 +1,23 @@
-import {
-  TEST_PROJECT_NAME,
-  TEST_PROJECT_SLUG,
-  TEST_WORKSPACE_SLUG,
-} from '@/e2e/env';
-import { createUser, generateTestEmail, openProject } from '@/e2e/utils';
+import { expect, test } from '@/e2e/fixtures/auth-hook';
+import { createUser, generateTestEmail, gotoAuthURL } from '@/e2e/utils';
 import { faker } from '@faker-js/faker';
-import type { Page } from '@playwright/test';
-import { expect, test } from '@playwright/test';
 
-let page: Page;
-
-test.beforeAll(async ({ browser }) => {
-  page = await browser.newPage();
+test.beforeEach(async ({ authenticatedNhostPage: page }) => {
+  await gotoAuthURL(page);
 });
 
-test.beforeEach(async () => {
-  await page.goto('/');
-
-  await openProject({
-    page,
-    projectName: TEST_PROJECT_NAME,
-    workspaceSlug: TEST_WORKSPACE_SLUG,
-    projectSlug: TEST_PROJECT_SLUG,
-  });
-
-  await page
-    .getByRole('navigation', { name: /main navigation/i })
-    .getByRole('link', { name: /auth/i })
-    .click();
-
-  await page.waitForURL(`/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/users`);
-});
-
-test.afterAll(async () => {
-  await page.close();
-});
-
-test('should be able to verify the email of a user', async () => {
+test('should be able to verify the email of a user', async ({
+  authenticatedNhostPage: page,
+}) => {
   const email = generateTestEmail();
   const password = faker.internet.password();
 
   await createUser({ page, email, password });
 
+  await page.waitForSelector(
+    'div:has-text("User has been created successfully.")',
+  );
+
   await page
     .getByRole('button', { name: `View ${email}`, exact: true })
     .click();
@@ -66,7 +42,9 @@ test('should be able to verify the email of a user', async () => {
   ).toBeChecked();
 });
 
-test('should be able to verify the phone number of a user', async () => {
+test('should be able to verify the phone number of a user', async ({
+  authenticatedNhostPage: page,
+}) => {
   const email = generateTestEmail();
   const password = faker.internet.password();
   const phoneNumber = faker.phone.number();

dashboard/e2e/cli-local-dashboard/cli-local-dashboard.test.ts

@@ -0,0 +1,21 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Local Dashboard CLI e2e tests', () => {
+  test('should redirect / to the correct project URL', async ({ page }) => {
+    await page.goto('https://local.dashboard.local.nhost.run/');
+    await page.waitForURL(
+      'https://local.dashboard.local.nhost.run/orgs/local/projects/local',
+    );
+    expect(page.url()).toBe(
+      'https://local.dashboard.local.nhost.run/orgs/local/projects/local',
+    );
+  });
+
+  test('should load the project URL correctly', async ({ page }) => {
+    const projectUrl =
+      'https://local.dashboard.local.nhost.run/orgs/local/projects/local';
+    await page.goto(projectUrl);
+    await expect(page).toHaveURL(projectUrl);
+    await expect(page.getByText(/Subdomain/i)).toBeVisible();
+  });
+});

dashboard/e2e/database/create-table.test.ts

@@ -1,41 +1,18 @@
-import {
-  TEST_PROJECT_NAME,
-  TEST_PROJECT_SLUG,
-  TEST_WORKSPACE_SLUG,
-} from '@/e2e/env';
-import { openProject, prepareTable } from '@/e2e/utils';
+import { TEST_ORGANIZATION_SLUG, TEST_PROJECT_SUBDOMAIN } from '@/e2e/env';
+import { expect, test } from '@/e2e/fixtures/auth-hook';
+import { prepareTable } from '@/e2e/utils';
 import { faker } from '@faker-js/faker';
-import type { Page } from '@playwright/test';
-import { expect, test } from '@playwright/test';
 import { snakeCase } from 'snake-case';
 
-let page: Page;
-
-test.beforeAll(async ({ browser }) => {
-  page = await browser.newPage();
+test.beforeEach(async ({ authenticatedNhostPage: page }) => {
+  const databaseRoute = `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default`;
+  await page.goto(databaseRoute);
+  await page.waitForURL(databaseRoute);
 });
 
-test.beforeEach(async () => {
-  await page.goto('/');
-
-  await openProject({
-    page,
-    projectName: TEST_PROJECT_NAME,
-    workspaceSlug: TEST_WORKSPACE_SLUG,
-    projectSlug: TEST_PROJECT_SLUG,
-  });
-
-  await page
-    .getByRole('navigation', { name: /main navigation/i })
-    .getByRole('link', { name: /database/i })
-    .click();
-});
-
-test.afterAll(async () => {
-  await page.close();
-});
-
-test('should create a simple table', async () => {
+test('should create a simple table', async ({
+  authenticatedNhostPage: page,
+}) => {
   await page.getByRole('button', { name: /new table/i }).click();
   await expect(page.getByText(/create a new table/i)).toBeVisible();
 
@@ -44,7 +21,7 @@ test('should create a simple table', async () => {
   await prepareTable({
     page,
     name: tableName,
-    primaryKey: 'id',
+    primaryKeys: ['id'],
     columns: [
       { name: 'id', type: 'uuid', defaultValue: 'gen_random_uuid()' },
       { name: 'title', type: 'text' },
@@ -55,7 +32,7 @@ test('should create a simple table', async () => {
   await page.getByRole('button', { name: /create/i }).click();
 
   await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/${tableName}`,
+    `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default/public/${tableName}`,
   );
 
   await expect(
@@ -63,7 +40,9 @@ test('should create a simple table', async () => {
   ).toBeVisible();
 });
 
-test('should create a table with unique constraints', async () => {
+test('should create a table with unique constraints', async ({
+  authenticatedNhostPage: page,
+}) => {
   await page.getByRole('button', { name: /new table/i }).click();
   await expect(page.getByText(/create a new table/i)).toBeVisible();
 
@@ -72,7 +51,7 @@ test('should create a table with unique constraints', async () => {
   await prepareTable({
     page,
     name: tableName,
-    primaryKey: 'id',
+    primaryKeys: ['id'],
     columns: [
       { name: 'id', type: 'uuid', defaultValue: 'gen_random_uuid()' },
       { name: 'title', type: 'text', unique: true },
@@ -84,7 +63,7 @@ test('should create a table with unique constraints', async () => {
   await page.getByRole('button', { name: /create/i }).click();
 
   await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/${tableName}`,
+    `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default/public/${tableName}`,
   );
 
   await expect(
@@ -92,7 +71,9 @@ test('should create a table with unique constraints', async () => {
   ).toBeVisible();
 });
 
-test('should create a table with nullable columns', async () => {
+test('should create a table with nullable columns', async ({
+  authenticatedNhostPage: page,
+}) => {
   await page.getByRole('button', { name: /new table/i }).click();
   await expect(page.getByText(/create a new table/i)).toBeVisible();
 
@@ -101,7 +82,7 @@ test('should create a table with nullable columns', async () => {
   await prepareTable({
     page,
     name: tableName,
-    primaryKey: 'id',
+    primaryKeys: ['id'],
     columns: [
       { name: 'id', type: 'uuid', defaultValue: 'gen_random_uuid()' },
       { name: 'title', type: 'text', nullable: true },
@@ -113,7 +94,7 @@ test('should create a table with nullable columns', async () => {
   await page.getByRole('button', { name: /create/i }).click();
 
   await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/${tableName}`,
+    `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default/public/${tableName}`,
   );
 
   await expect(
@@ -121,7 +102,9 @@ test('should create a table with nullable columns', async () => {
   ).toBeVisible();
 });
 
-test('should create a table with an identity column', async () => {
+test('should create a table with an identity column', async ({
+  authenticatedNhostPage: page,
+}) => {
   await page.getByRole('button', { name: /new table/i }).click();
   await expect(page.getByText(/create a new table/i)).toBeVisible();
 
@@ -130,7 +113,7 @@ test('should create a table with an identity column', async () => {
   await prepareTable({
     page,
     name: tableName,
-    primaryKey: 'id',
+    primaryKeys: ['id'],
     columns: [
       { name: 'id', type: 'int4' },
       { name: 'title', type: 'text', nullable: true },
@@ -146,7 +129,7 @@ test('should create a table with an identity column', async () => {
   await page.getByRole('button', { name: /create/i }).click();
 
   await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/${tableName}`,
+    `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default/public/${tableName}`,
   );
 
   await expect(
@@ -154,7 +137,9 @@ test('should create a table with an identity column', async () => {
   ).toBeVisible();
 });
 
-test('should create table with foreign key constraint', async () => {
+test('should create table with foreign key constraint', async ({
+  authenticatedNhostPage: page,
+}) => {
   await page.getByRole('button', { name: /new table/i }).click();
   await expect(page.getByText(/create a new table/i)).toBeVisible();
 
@@ -163,7 +148,7 @@ test('should create table with foreign key constraint', async () => {
   await prepareTable({
     page,
     name: firstTableName,
-    primaryKey: 'id',
+    primaryKeys: ['id'],
     columns: [
       { name: 'id', type: 'uuid', defaultValue: 'gen_random_uuid()' },
       { name: 'name', type: 'text' },
@@ -174,7 +159,7 @@ test('should create table with foreign key constraint', async () => {
   await page.getByRole('button', { name: /create/i }).click();
 
   await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/${firstTableName}`,
+    `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default/public/${firstTableName}`,
   );
 
   await page.getByRole('button', { name: /new table/i }).click();
@@ -185,7 +170,7 @@ test('should create table with foreign key constraint', async () => {
   await prepareTable({
     page,
     name: secondTableName,
-    primaryKey: 'id',
+    primaryKeys: ['id'],
     columns: [
       { name: 'id', type: 'uuid', defaultValue: 'gen_random_uuid()' },
       { name: 'title', type: 'text' },
@@ -211,6 +196,10 @@ test('should create table with foreign key constraint', async () => {
 
   await page.getByRole('button', { name: /add/i }).click();
 
+  await expect(
+    page.getByTestId('foreignKeyFormSubmitButton'),
+  ).not.toBeVisible();
+
   await expect(
     page.getByText(`public.${firstTableName}.id`, { exact: true }),
   ).toBeVisible();
@@ -219,7 +208,7 @@ test('should create table with foreign key constraint', async () => {
   await page.getByRole('button', { name: /create/i }).click();
 
   await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/${secondTableName}`,
+    `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default/public/${secondTableName}`,
   );
 
   await expect(
@@ -227,7 +216,9 @@ test('should create table with foreign key constraint', async () => {
   ).toBeVisible();
 });
 
-test('should not be able to create a table with a name that already exists', async () => {
+test('should not be able to create a table with a name that already exists', async ({
+  authenticatedNhostPage: page,
+}) => {
   await page.getByRole('button', { name: /new table/i }).click();
   await expect(page.getByText(/create a new table/i)).toBeVisible();
 
@@ -236,7 +227,7 @@ test('should not be able to create a table with a name that already exists', asy
   await prepareTable({
     page,
     name: tableName,
-    primaryKey: 'id',
+    primaryKeys: ['id'],
     columns: [
       { name: 'id', type: 'uuid', defaultValue: 'gen_random_uuid()' },
       { name: 'name', type: 'text' },
@@ -247,7 +238,7 @@ test('should not be able to create a table with a name that already exists', asy
   await page.getByRole('button', { name: /create/i }).click();
 
   await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/${tableName}`,
+    `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default/public/${tableName}`,
   );
 
   await page.getByRole('button', { name: /new table/i }).click();
@@ -256,7 +247,7 @@ test('should not be able to create a table with a name that already exists', asy
   await prepareTable({
     page,
     name: tableName,
-    primaryKey: 'id',
+    primaryKeys: ['id'],
     columns: [
       { name: 'id', type: 'uuid', defaultValue: 'gen_random_uuid()' },
       { name: 'title', type: 'text' },
@@ -271,3 +262,33 @@ test('should not be able to create a table with a name that already exists', asy
     page.getByText(/error: a table with this name already exists/i),
   ).toBeVisible();
 });
+
+test('should be able to create a table with a composite key', async ({
+  authenticatedNhostPage: page,
+}) => {
+  await page.getByRole('button', { name: /new table/i }).click();
+  await expect(page.getByText(/create a new table/i)).toBeVisible();
+
+  const tableName = snakeCase(faker.lorem.words(3));
+
+  await prepareTable({
+    page,
+    name: tableName,
+    primaryKeys: ['id', 'second_id'],
+    columns: [
+      { name: 'id', type: 'uuid', defaultValue: 'gen_random_uuid()' },
+      { name: 'second_id', type: 'uuid', defaultValue: 'gen_random_uuid()' },
+      { name: 'name', type: 'text' },
+    ],
+  });
+
+  await page.getByRole('button', { name: /create/i }).click();
+
+  await page.waitForURL(
+    `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default/public/${tableName}`,
+  );
+
+  await expect(
+    page.getByRole('link', { name: tableName, exact: true }),
+  ).toBeVisible();
+});

dashboard/e2e/database/delete-table.test.ts

@@ -1,41 +1,17 @@
-import {
-  TEST_PROJECT_NAME,
-  TEST_PROJECT_SLUG,
-  TEST_WORKSPACE_SLUG,
-} from '@/e2e/env';
-import { deleteTable, openProject, prepareTable } from '@/e2e/utils';
+import { TEST_ORGANIZATION_SLUG, TEST_PROJECT_SUBDOMAIN } from '@/e2e/env';
+import { deleteTable, prepareTable } from '@/e2e/utils';
 import { faker } from '@faker-js/faker';
-import type { Page } from '@playwright/test';
-import { expect, test } from '@playwright/test';
+
+import { expect, test } from '@/e2e/fixtures/auth-hook';
 import { snakeCase } from 'snake-case';
 
-let page: Page;
-
-test.beforeAll(async ({ browser }) => {
-  page = await browser.newPage();
+test.beforeEach(async ({ authenticatedNhostPage: page }) => {
+  const databaseRoute = `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default`;
+  await page.goto(databaseRoute);
+  await page.waitForURL(databaseRoute);
 });
 
-test.beforeEach(async () => {
-  await page.goto('/');
-
-  await openProject({
-    page,
-    projectName: TEST_PROJECT_NAME,
-    workspaceSlug: TEST_WORKSPACE_SLUG,
-    projectSlug: TEST_PROJECT_SLUG,
-  });
-
-  await page
-    .getByRole('navigation', { name: /main navigation/i })
-    .getByRole('link', { name: /database/i })
-    .click();
-});
-
-test.afterAll(async () => {
-  await page.close();
-});
-
-test('should delete a table', async () => {
+test('should delete a table', async ({ authenticatedNhostPage: page }) => {
   const tableName = snakeCase(faker.lorem.words(3));
 
   await page.getByRole('button', { name: /new table/i }).click();
@@ -43,7 +19,7 @@ test('should delete a table', async () => {
   await prepareTable({
     page,
     name: tableName,
-    primaryKey: 'id',
+    primaryKeys: ['id'],
     columns: [
       { name: 'id', type: 'uuid', defaultValue: 'gen_random_uuid()' },
       { name: 'title', type: 'text' },
@@ -53,7 +29,7 @@ test('should delete a table', async () => {
   await page.getByRole('button', { name: /create/i }).click();
 
   await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/${tableName}`,
+    `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default/public/${tableName}`,
   );
 
   await deleteTable({
@@ -63,7 +39,7 @@ test('should delete a table', async () => {
 
   // navigate to next URL
   await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/**`,
+    `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default/public/**`,
   );
 
   await expect(
@@ -71,7 +47,10 @@ test('should delete a table', async () => {
   ).not.toBeVisible();
 });
 
-test('should not be able to delete a table if other tables have foreign keys referencing it', async () => {
+test('should not be able to delete a table if other tables have foreign keys referencing it', async ({
+  authenticatedNhostPage: page,
+}) => {
+  test.setTimeout(60000);
   await page.getByRole('button', { name: /new table/i }).click();
   await expect(page.getByText(/create a new table/i)).toBeVisible();
 
@@ -80,7 +59,7 @@ test('should not be able to delete a table if other tables have foreign keys ref
   await prepareTable({
     page,
     name: firstTableName,
-    primaryKey: 'id',
+    primaryKeys: ['id'],
     columns: [
       { name: 'id', type: 'uuid', defaultValue: 'gen_random_uuid()' },
       { name: 'name', type: 'text' },
@@ -91,7 +70,7 @@ test('should not be able to delete a table if other tables have foreign keys ref
   await page.getByRole('button', { name: /create/i }).click();
 
   await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/${firstTableName}`,
+    `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default/public/${firstTableName}`,
   );
 
   await page.getByRole('button', { name: /new table/i }).click();
@@ -102,7 +81,7 @@ test('should not be able to delete a table if other tables have foreign keys ref
   await prepareTable({
     page,
     name: secondTableName,
-    primaryKey: 'id',
+    primaryKeys: ['id'],
     columns: [
       { name: 'id', type: 'uuid', defaultValue: 'gen_random_uuid()' },
       { name: 'title', type: 'text' },
@@ -138,7 +117,7 @@ test('should not be able to delete a table if other tables have foreign keys ref
   await page.getByRole('button', { name: /create/i }).click();
 
   await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/${secondTableName}`,
+    `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default/public/${secondTableName}`,
   );
 
   await expect(

dashboard/e2e/database/permissions-table.test.ts

@@ -0,0 +1,130 @@
+import { TEST_ORGANIZATION_SLUG, TEST_PROJECT_SUBDOMAIN } from '@/e2e/env';
+import { expect, test } from '@/e2e/fixtures/auth-hook';
+import { clickPermissionButton, prepareTable } from '@/e2e/utils';
+import { faker } from '@faker-js/faker';
+import { snakeCase } from 'snake-case';
+
+test.beforeEach(async ({ authenticatedNhostPage: page }) => {
+  const databaseRoute = `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default`;
+  await page.goto(databaseRoute);
+  await page.waitForURL(databaseRoute);
+});
+
+test('should create a table with role permissions to select row', async ({
+  authenticatedNhostPage: page,
+}) => {
+  await page.getByRole('button', { name: /new table/i }).click();
+  await expect(page.getByText(/create a new table/i)).toBeVisible();
+
+  const tableName = snakeCase(faker.lorem.words(3));
+
+  await prepareTable({
+    page,
+    name: tableName,
+    primaryKeys: ['id'],
+    columns: [
+      { name: 'id', type: 'uuid', defaultValue: 'gen_random_uuid()' },
+      { name: 'title', type: 'text' },
+    ],
+  });
+
+  // create table
+  await page.getByRole('button', { name: /create/i }).click();
+
+  await page.waitForURL(
+    `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default/public/${tableName}`,
+  );
+
+  await expect(
+    page.getByRole('link', { name: tableName, exact: true }),
+  ).toBeVisible();
+
+  // Press three horizontal dots more options button next to the table name
+  await page
+    .locator(`li:has-text("${tableName}") #table-management-menu button`)
+    .click();
+
+  await page.getByRole('menuitem', { name: /edit permissions/i }).click();
+
+  await clickPermissionButton({ page, role: 'user', permission: 'Select' });
+
+  await page.getByLabel('Without any checks').click();
+  await page.getByRole('button', { name: /select all/i }).click();
+
+  await page.getByRole('button', { name: /save/i }).click();
+
+  await expect(
+    page.getByText(/permission has been saved successfully/i),
+  ).toBeVisible();
+});
+
+test('should create a table with role permissions and a custom check to select rows', async ({
+  authenticatedNhostPage: page,
+}) => {
+  await page.getByRole('button', { name: /new table/i }).click();
+  await expect(page.getByText(/create a new table/i)).toBeVisible();
+
+  const tableName = snakeCase(faker.lorem.words(3));
+
+  await prepareTable({
+    page,
+    name: tableName,
+    primaryKeys: ['id'],
+    columns: [
+      { name: 'id', type: 'uuid', defaultValue: 'gen_random_uuid()' },
+      { name: 'title', type: 'text' },
+    ],
+  });
+
+  // create table
+  await page.getByRole('button', { name: /create/i }).click();
+
+  await page.waitForURL(
+    `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default/public/${tableName}`,
+  );
+
+  await expect(
+    page.getByRole('link', { name: tableName, exact: true }),
+  ).toBeVisible();
+
+  // Press three horizontal dots more options button next to the table name
+  await page
+    .locator(`li:has-text("${tableName}") #table-management-menu button`)
+    .click();
+
+  await page.getByRole('menuitem', { name: /edit permissions/i }).click();
+
+  await clickPermissionButton({ page, role: 'user', permission: 'Select' });
+
+  await page.getByLabel('With custom check').click();
+
+  // await page.getByRole('combobox', { name: /select a column/i }).click();
+  await page.getByText('Select a column', { exact: true }).click();
+
+  const columnSelector = page.locator('input[role="combobox"]');
+
+  await columnSelector.fill('id');
+
+  await columnSelector.press('Enter');
+
+  await expect(page.getByText(/_eq/i)).toBeVisible();
+
+  // limit on number of rows fetched per request.
+  await page.locator('#limit').fill('100');
+
+  await page.getByText('Select variable...', { exact: true }).click();
+
+  const variableSelector = await page.locator('input[role="combobox"]');
+
+  await variableSelector.fill('X-Hasura-User-Id');
+
+  await variableSelector.press('Enter');
+
+  await page.getByRole('button', { name: /select all/i }).click();
+
+  await page.getByRole('button', { name: /save/i }).click();
+
+  await expect(
+    page.getByText(/permission has been saved successfully/i),
+  ).toBeVisible();
+});

dashboard/e2e/env.ts

@@ -1,48 +1,46 @@
-import slugify from 'slugify';
-
 /**
  * URL of the dashboard to test against.
  */
-export const TEST_DASHBOARD_URL = process.env.NHOST_TEST_DASHBOARD_URL;
+export const TEST_DASHBOARD_URL = process.env.NHOST_TEST_DASHBOARD_URL!;
 
 /**
- * Name of the workspace to test against.
+ * Name of the organization to test against.
  */
-export const TEST_WORKSPACE_NAME = process.env.NHOST_TEST_WORKSPACE_NAME;
+export const TEST_ORGANIZATION_NAME = process.env.NHOST_TEST_ORGANIZATION_NAME!;
 
 /**
- * Slugified name of the workspace to test against.
+ * Slug of the organization to test against.
  */
-export const TEST_WORKSPACE_SLUG = slugify(TEST_WORKSPACE_NAME, {
-  lower: true,
-  strict: true,
-});
+export const TEST_ORGANIZATION_SLUG = process.env.NHOST_TEST_ORGANIZATION_SLUG!;
 
 /**
  * Name of the project to test against.
  */
-export const TEST_PROJECT_NAME = process.env.NHOST_TEST_PROJECT_NAME;
+export const TEST_PROJECT_NAME = process.env.NHOST_TEST_PROJECT_NAME!;
 
 /**
- * Slugified name of the project to test against.
+ * Subdomain of the project to test against.
  */
-export const TEST_PROJECT_SLUG = slugify(TEST_PROJECT_NAME, {
-  lower: true,
-  strict: true,
-});
+export const TEST_PROJECT_SUBDOMAIN = process.env.NHOST_TEST_PROJECT_SUBDOMAIN!;
 
 /**
  * Hasura admin secret of the test project to use.
  */
 export const TEST_PROJECT_ADMIN_SECRET =
-  process.env.NHOST_TEST_PROJECT_ADMIN_SECRET;
+  process.env.NHOST_TEST_PROJECT_ADMIN_SECRET!;
 
 /**
  * Email of the test account to use.
  */
-export const TEST_USER_EMAIL = process.env.NHOST_TEST_USER_EMAIL;
+export const TEST_USER_EMAIL = process.env.NHOST_TEST_USER_EMAIL!;
 
 /**
  * Password of the test account to use.
  */
-export const TEST_USER_PASSWORD = process.env.NHOST_TEST_USER_PASSWORD;
+export const TEST_USER_PASSWORD = process.env.NHOST_TEST_USER_PASSWORD!;
+
+export const TEST_PERSONAL_ORG_SLUG = process.env.NHOST_TEST_PERSONAL_ORG_SLUG!;
+
+const freeUserEmails = process.env.NHOST_TEST_FREE_USER_EMAILS!;
+
+export const TEST_FREE_USER_EMAILS: string[] = JSON.parse(freeUserEmails);

dashboard/e2e/fixtures/auth-hook.ts

@@ -0,0 +1,23 @@
+import { TEST_DASHBOARD_URL, TEST_PERSONAL_ORG_SLUG } from '@/e2e/env';
+import { type Page, test as base } from '@playwright/test';
+
+export const AUTH_CONTEXT = 'e2e/.auth/user.json';
+
+export const test = base.extend<{ authenticatedNhostPage: Page }>({
+  authenticatedNhostPage: async ({ browser }, use) => {
+    const context = await browser.newContext({ storageState: AUTH_CONTEXT });
+    const page = await context.newPage();
+    await page.goto('/');
+    await page.waitForURL(
+      `${TEST_DASHBOARD_URL}/orgs/${TEST_PERSONAL_ORG_SLUG}/projects`,
+      { waitUntil: 'load' },
+    );
+    await use(page);
+    // update the context to get the new refresh token
+    await page.waitForLoadState('load');
+    await page.context().storageState({ path: AUTH_CONTEXT });
+    await page.close();
+  },
+});
+
+export { expect } from '@playwright/test';

dashboard/e2e/onboarding/onboarding.test.ts

@@ -0,0 +1,223 @@
+import { expect, test } from '@/e2e/fixtures/auth-hook';
+import {
+  getCardExpiration,
+  getOrgSlugFromUrl,
+  getProjectSlugFromUrl,
+  gotoUrl,
+  loginWithFreeUser,
+  setFreeUserStarterOrgSlug,
+  setNewProjectName,
+  setNewProjectSlug,
+} from '@/e2e/utils';
+import { faker } from '@faker-js/faker';
+import type { Page } from '@playwright/test';
+
+let page: Page;
+
+test.beforeAll(async ({ browser }) => {
+  page = await browser.newPage();
+  await loginWithFreeUser(page);
+});
+
+test('user should be able to finish onboarding', async () => {
+  await gotoUrl(page, `/onboarding`);
+  expect(page.getByText('Welcome to Nhost!')).toBeVisible();
+  const organizationName = faker.lorem.words(3).slice(0, 32);
+
+  await page.getByLabel('Organization Name').fill(organizationName);
+  await page.getByText('Select organization type', { exact: true }).click();
+  await page.getByText('Personal Project').nth(1).click();
+
+  await page.getByText('Pro', { exact: true }).click();
+
+  await page.getByText('Create Organization').click();
+
+  const stripeFrame = page
+    .frameLocator('iframe[name="embedded-checkout"]')
+    .first();
+  stripeFrame.getByText('Subscribe to Nhost');
+  await stripeFrame.getByLabel('Email').fill(faker.internet.email());
+
+  await stripeFrame
+    .getByPlaceholder('1234 1234 1234 1234')
+    .fill('4242424242424242');
+
+  await stripeFrame.getByPlaceholder('MM / YY').fill(getCardExpiration());
+  await stripeFrame.getByPlaceholder('CVC').fill('123');
+  await stripeFrame
+    .getByPlaceholder('Full name on card')
+    .fill('EndyTo EndyTest');
+  await stripeFrame.locator('#billingCountry').scrollIntoViewIfNeeded();
+  // Need to comment out for testing outside US START
+  // await stripeFrame.getByPlaceholder('Address', { exact: true }).click();
+  // stripeFrame.locator('span:has-text("Enter address manually")');
+  // await stripeFrame.getByText('Enter address manually').click();
+  // await stripeFrame
+  //   .getByPlaceholder('Address line 1', { exact: true })
+  //   .fill('123 Main Street');
+  // await stripeFrame
+  //   .getByPlaceholder('City', { exact: true })
+  //   .fill('Springfield');
+  // await stripeFrame.getByPlaceholder('ZIP', { exact: true }).fill('62701');
+  // await stripeFrame.locator('#enableStripePass').click({ force: true });
+  // Need to comment out for testing outside US END
+  stripeFrame
+    .getByTestId('hosted-payment-submit-button')
+    .scrollIntoViewIfNeeded();
+  await stripeFrame
+    .getByTestId('hosted-payment-submit-button')
+    .click({ force: true });
+
+  expect(
+    page.getByText('Processing new organization request').first(),
+  ).toBeVisible();
+  await page.waitForSelector(
+    'div:has-text("Organization created successfully. Redirecting...")',
+  );
+
+  expect(page.getByText('Create Your First Project')).toBeVisible();
+
+  const projectName = faker.lorem.words(3).slice(0, 32);
+  await page.getByLabel('Project Name').fill(projectName);
+
+  await page.getByText('Create Project', { exact: true }).click();
+
+  expect(page.getByText('Creating your project...')).toBeVisible();
+  expect(page.getByText('Project created successfully!')).toBeVisible();
+
+  expect(page.getByText('Internal info')).toBeVisible();
+
+  await page.waitForSelector('h3:has-text("Project Health")', {
+    timeout: 180000,
+  });
+
+  const newProjectSlug = getProjectSlugFromUrl(page.url());
+  setNewProjectSlug(newProjectSlug);
+  setNewProjectName(organizationName);
+  const newOrgSlug = getOrgSlugFromUrl(page.url());
+  setFreeUserStarterOrgSlug(newOrgSlug);
+});
+
+test('should delete the new organization', async () => {
+  const newOrgSlug = getOrgSlugFromUrl(page.url());
+  await gotoUrl(page, `/orgs/${newOrgSlug}/projects`);
+  await page.getByRole('link', { name: 'Settings' }).click();
+
+  await page.waitForSelector('h3:has-text("Delete Organization")');
+  await page.getByRole('button', { name: 'Delete' }).click();
+
+  await page.waitForSelector('h2:has-text("Delete Organization")');
+  expect(page.getByTestId('deleteOrgButton')).toBeDisabled();
+
+  await page.getByLabel("I'm sure I want to delete this Organization").click();
+  expect(page.getByTestId('deleteOrgButton')).toBeDisabled();
+  await page.getByLabel('I understand this action cannot be undone').click();
+  expect(page.getByTestId('deleteOrgButton')).not.toBeDisabled();
+
+  await page.getByTestId('deleteOrgButton').click();
+
+  await page.waitForSelector('div:has-text("Deleting the organization")');
+  await page.waitForSelector(
+    'div:has-text("Successfully deleted the organization")',
+  );
+
+  await page.waitForSelector('h2:has-text("Welcome to Nhost!")');
+});
+
+test('should be able to upgrade an organization', async () => {
+  await gotoUrl(page, `/onboarding`);
+  expect(page.getByText('Welcome to Nhost!')).toBeVisible();
+  const organizationName = faker.lorem.words(3).slice(0, 32);
+
+  await page.getByLabel('Organization Name').fill(organizationName);
+  await page.getByText('Select organization type', { exact: true }).click();
+  await page.getByText('Personal Project').nth(1).click();
+
+  await page.getByText('Create Organization').click();
+
+  await page.waitForSelector(
+    'div:has-text("Organization created successfully!")',
+  );
+  await page.getByText('Select organization', { exact: true }).click();
+  await page.getByLabel('Organizations').getByText(organizationName).click();
+
+  await page.waitForSelector('h2:has-text("Welcome to Nhost!")');
+  await page.getByRole('link', { name: 'Billing' }).click();
+
+  await page.waitForSelector('h4:has-text("Subscription plan")');
+  expect(page.getByText('Upgrade')).toBeEnabled();
+  await page.getByText('Upgrade').click();
+  await page.waitForSelector('h2:has-text("Upgrade Organization")');
+
+  await page.getByText('Pro', { exact: true }).click();
+
+  await page.getByTestId('upgradeOrgSubmitButton').click();
+  await page.waitForSelector('button[data-testid="upgradeOrgSubmitButton"]', {
+    state: 'hidden',
+  });
+
+  const stripeFrame = page
+    .frameLocator('iframe[name="embedded-checkout"]')
+    .first();
+  stripeFrame
+    .locator('div[data-testid="product-summary"]')
+    .waitFor({ state: 'visible' });
+  await stripeFrame.getByLabel('Email').fill(faker.internet.email());
+
+  await stripeFrame
+    .getByPlaceholder('1234 1234 1234 1234')
+    .fill('4242424242424242');
+
+  await stripeFrame.getByPlaceholder('MM / YY').fill(getCardExpiration());
+  await stripeFrame.getByPlaceholder('CVC').fill('123');
+  await stripeFrame
+    .getByPlaceholder('Full name on card')
+    .fill('EndyTo EndyTest');
+  await stripeFrame.locator('#billingCountry').scrollIntoViewIfNeeded();
+  // Need to comment out for testing outside US START
+  // await stripeFrame.getByPlaceholder('Address', { exact: true }).click();
+  // stripeFrame.locator('span:has-text("Enter address manually")');
+  // await stripeFrame.getByText('Enter address manually').click();
+  // await stripeFrame
+  //   .getByPlaceholder('Address line 1', { exact: true })
+  //   .fill('123 Main Street');
+  // await stripeFrame
+  //   .getByPlaceholder('City', { exact: true })
+  //   .fill('Springfield');
+  // await stripeFrame.getByPlaceholder('ZIP', { exact: true }).fill('62701');
+  // await stripeFrame.locator('#enableStripePass').click({ force: true });
+  // Need to comment out for testing outside US END
+  stripeFrame
+    .getByTestId('hosted-payment-submit-button')
+    .scrollIntoViewIfNeeded();
+  await stripeFrame
+    .getByTestId('hosted-payment-submit-button')
+    .click({ force: true });
+  await page.waitForSelector('div:has-text("Upgrading organization")');
+  await page.waitForSelector(
+    'div:has-text("Organization has been upgraded successfully.")',
+  );
+  await page.waitForSelector('span:has-text("Spending Notifications")');
+
+  await page.getByRole('link', { name: 'Settings' }).click();
+
+  await page.waitForSelector('h3:has-text("Delete Organization")');
+  await page.getByRole('button', { name: 'Delete' }).click();
+
+  await page.waitForSelector('h2:has-text("Delete Organization")');
+  expect(page.getByTestId('deleteOrgButton')).toBeDisabled();
+
+  await page.getByLabel("I'm sure I want to delete this Organization").click();
+  expect(page.getByTestId('deleteOrgButton')).toBeDisabled();
+  await page.getByLabel('I understand this action cannot be undone').click();
+  expect(page.getByTestId('deleteOrgButton')).not.toBeDisabled();
+
+  await page.getByTestId('deleteOrgButton').click();
+
+  await page.waitForSelector('div:has-text("Deleting the organization")');
+  await page.waitForSelector(
+    'div:has-text("Successfully deleted the organization")',
+  );
+
+  await page.waitForSelector('h2:has-text("Welcome to Nhost!")');
+});

dashboard/e2e/overview/overview.test.ts

@@ -1,88 +1,52 @@
-import {
-  TEST_PROJECT_NAME,
-  TEST_PROJECT_SLUG,
-  TEST_WORKSPACE_NAME,
-  TEST_WORKSPACE_SLUG,
-} from '@/e2e/env';
-import { openProject } from '@/e2e/utils';
-import type { Page } from '@playwright/test';
-import { expect, test } from '@playwright/test';
+import { TEST_ORGANIZATION_SLUG, TEST_PROJECT_SUBDOMAIN } from '@/e2e/env';
+import { expect, test } from '@/e2e/fixtures/auth-hook';
+import { navigateToProject } from '@/e2e/utils';
 
-let page: Page;
-
-test.beforeAll(async ({ browser }) => {
-  page = await browser.newPage();
-
-  await page.goto('/');
-  await openProject({
+test.beforeEach(async ({ authenticatedNhostPage: page }) => {
+  await navigateToProject({
     page,
-    projectName: TEST_PROJECT_NAME,
-    workspaceSlug: TEST_WORKSPACE_SLUG,
-    projectSlug: TEST_PROJECT_SLUG,
+    orgSlug: TEST_ORGANIZATION_SLUG,
+    projectSubdomain: TEST_PROJECT_SUBDOMAIN,
   });
 });
 
-test.afterAll(async () => {
-  await page.close();
-});
-
-test('should show a sidebar with menu items', async () => {
-  const navLocator = page.getByRole('navigation', { name: /main navigation/i });
+test('should show the navtree with all links visible', async ({
+  authenticatedNhostPage: page,
+}) => {
+  const navLocator = page.getByLabel('Navigation Tree');
   await expect(navLocator).toBeVisible();
-  await expect(navLocator.getByRole('list').getByRole('listitem')).toHaveCount(
-    13,
-  );
-  await expect(
-    navLocator.getByRole('link', { name: /overview/i }),
-  ).toBeVisible();
-  await expect(
-    navLocator.getByRole('link', { name: /database/i }),
-  ).toBeVisible();
-  await expect(
-    navLocator.getByRole('link', { name: /graphql/i }),
-  ).toBeVisible();
-  await expect(navLocator.getByRole('link', { name: /hasura/i })).toBeVisible();
-  await expect(navLocator.getByRole('link', { name: /auth/i })).toBeVisible();
-  await expect(
-    navLocator.getByRole('link', { name: /storage/i }),
-  ).toBeVisible();
-  await expect(
-    navLocator.getByRole('link', { name: /deployments/i }),
-  ).toBeVisible();
-  await expect(
-    navLocator.getByRole('link', { name: /backups/i }),
-  ).toBeVisible();
-  await expect(navLocator.getByRole('link', { name: /logs/i })).toBeVisible();
-  await expect(
-    navLocator.getByRole('link', { name: /metrics/i }),
-  ).toBeVisible();
-  await expect(
-    navLocator.getByRole('link', { name: /settings/i }),
-  ).toBeVisible();
+
+  const links = [
+    'Nhost Automation Test Project',
+    'Overview',
+    'Database',
+    'GraphQL',
+    'Hasura',
+    'Auth',
+    'Storage',
+    'Run',
+    'AI',
+    'Deployments',
+    'Backups',
+    'Logs',
+    'Metrics',
+    'Settings',
+  ];
+
+  // eslint-disable-next-line no-restricted-syntax
+  for (const linkName of links) {
+    const link =
+      linkName === 'Settings'
+        ? page.getByRole('link', { name: linkName }).first()
+        : page.getByRole('link', { name: linkName });
+    // eslint-disable-next-line no-await-in-loop
+    await expect(link).toBeVisible();
+  }
 });
 
-test('should show a header with a logo, the workspace name, and the project name', async () => {
-  await expect(
-    page.getByRole('banner').getByRole('link', { name: TEST_WORKSPACE_NAME }),
-  ).toBeVisible();
-
-  await expect(
-    page.getByRole('banner').getByRole('link', { name: TEST_PROJECT_NAME }),
-  ).toBeVisible();
-});
-
-test("should show the project's name, the Upgrade button and the Settings button", async () => {
-  await expect(
-    page.getByRole('heading', { name: TEST_PROJECT_NAME }),
-  ).toBeVisible();
-  await expect(page.getByText(/starter/i)).toBeVisible();
-  await expect(page.getByRole('button', { name: /upgrade/i })).toBeVisible();
-  await expect(
-    page.getByRole('main').getByRole('link', { name: /settings/i }),
-  ).toBeVisible();
-});
-
-test("should show the project's region and subdomain", async () => {
+test("should show the project's region and subdomain", async ({
+  authenticatedNhostPage: page,
+}) => {
   await expect(page.locator('p:has-text("Region") + div p').nth(0)).toHaveText(
     /frankfurt \(eu-central-1\)/i,
   );
@@ -91,32 +55,10 @@ test("should show the project's region and subdomain", async () => {
   ).toHaveText(/[a-z]{20}/i);
 });
 
-test('should not have a GitHub repository connected', async () => {
+test('should not have a GitHub repository connected', async ({
+  authenticatedNhostPage: page,
+}) => {
   await expect(
     page.getByRole('button', { name: /connect to github/i }).first(),
   ).toBeVisible();
 });
-
-test('should show metrics', async () => {
-  await expect(page.getByText(/cpu usage seconds\d+/i)).toBeVisible();
-  await expect(page.getByText(/total requests\d+/i)).toBeVisible();
-  await expect(page.getByText(/function invocations\d+/i)).toBeVisible();
-  await expect(
-    page.getByText(/egress volume\d+(\.\d+)? [a-zA-Z]+/i),
-  ).toBeVisible();
-  await expect(page.getByText(/logs\d+(\.\d+)? [a-zA-Z]+/i)).toBeVisible();
-});
-
-test('should show proper limits for the free project', async () => {
-  await expect(
-    page.getByText(/database\d+(\.\d+)? [a-zA-Z]+ of \d+(\.\d+)? [a-zA-Z]+/i),
-  ).toBeVisible();
-
-  await expect(
-    page.getByText(/storage\d+(\.\d+)? [a-zA-Z]+ of \d+(\.\d+)? [a-zA-Z]+/i),
-  ).toBeVisible();
-
-  await expect(page.getByText(/users[0-9]+ of [0-9]+/i)).toBeVisible();
-
-  await expect(page.getByText(/functions[0-9]+ of [0-9]+/i)).toBeVisible();
-});

dashboard/e2e/run/run.test.ts

@@ -0,0 +1,47 @@
+import { TEST_ORGANIZATION_SLUG, TEST_PROJECT_SUBDOMAIN } from '@/e2e/env';
+import { expect, test } from '@/e2e/fixtures/auth-hook';
+
+test.beforeEach(async ({ authenticatedNhostPage: page }) => {
+  const runRoute = `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/run`;
+  await page.goto(runRoute);
+  await page.waitForURL(runRoute);
+});
+
+test('should create and delete a run service', async ({
+  authenticatedNhostPage: page,
+}) => {
+  await page.getByRole('button', { name: 'Add service' }).first().click();
+  await expect(page.getByText(/create a new service/i)).toBeVisible();
+  await page.getByPlaceholder(/service name/i).click();
+  await page.getByPlaceholder(/service name/i).fill('test');
+
+  await page.getByText('Nhost registry').click();
+  await page.getByPlaceholder('Replicas').click();
+  await page.getByPlaceholder('Replicas').fill('0');
+
+  await page.getByRole('button', { name: /create/i }).click();
+
+  await expect(
+    page.getByRole('heading', { name: /confirm resources/i }),
+  ).toBeVisible();
+
+  await page.getByRole('button', { name: /confirm/i }).click();
+
+  await expect(page.getByRole('heading', { name: /test/i })).toBeVisible();
+
+  await page.getByLabel(/more options/i).click();
+
+  await page.getByRole('menuitem', { name: /delete service/i }).click();
+
+  await page.getByLabel(/confirm delete project #/i).check();
+
+  await page.getByRole('button', { name: /delete service/i }).click();
+
+  await expect(
+    page
+      .getByRole('main')
+      .locator('div')
+      .filter({ hasText: 'No custom services are' })
+      .nth(2),
+  ).toBeVisible();
+});

dashboard/e2e/setup/auth.setup.ts

@@ -1,5 +1,6 @@
 import {
   TEST_DASHBOARD_URL,
+  TEST_PERSONAL_ORG_SLUG,
   TEST_USER_EMAIL,
   TEST_USER_PASSWORD,
 } from '@/e2e/env';
@@ -15,6 +16,9 @@ setup('authenticate user', async ({ page }) => {
   await page.getByLabel('Password').fill(TEST_USER_PASSWORD);
   await page.getByRole('button', { name: /sign in/i }).click();
 
-  await page.waitForURL(TEST_DASHBOARD_URL);
+  await page.waitForURL(
+    `${TEST_DASHBOARD_URL}/orgs/${TEST_PERSONAL_ORG_SLUG}/projects`,
+    { waitUntil: 'load' },
+  );
   await page.context().storageState({ path: 'e2e/.auth/user.json' });
 });

dashboard/e2e/setup/refresh-metadata.setup.ts

@@ -0,0 +1,55 @@
+/* eslint-disable no-console */
+import { TEST_PROJECT_ADMIN_SECRET, TEST_PROJECT_SUBDOMAIN } from '@/e2e/env';
+import { test as setup } from '@playwright/test';
+
+setup('refresh metadata', async () => {
+  try {
+    const response = await fetch(
+      `https://${TEST_PROJECT_SUBDOMAIN}.hasura.eu-central-1.staging.nhost.run/v1/metadata`,
+      {
+        method: 'POST',
+        headers: {
+          'x-hasura-admin-secret': TEST_PROJECT_ADMIN_SECRET,
+        },
+        body: JSON.stringify({
+          args: [
+            {
+              type: 'reload_metadata',
+              args: {
+                reload_sources: false,
+              },
+            },
+            {
+              args: {},
+              type: 'get_inconsistent_metadata',
+            },
+          ],
+          source: 'default',
+          type: 'bulk',
+        }),
+      },
+    );
+    const body = await response.json();
+
+    if (!response.ok) {
+      const message = `[${body.code}]:${body.error}`;
+      throw new Error(message);
+    } else {
+      const isConsistent = body[0].is_consistent;
+      if (isConsistent) {
+        console.log('Metadata is consistent.');
+      } else {
+        console.error('Metadata is not consistent.');
+        console.error(body[0].inconsistent_objects);
+        throw new Error('Metadata is not consistent');
+      }
+    }
+  } catch (error) {
+    // Log safe error information
+    console.error(
+      'Failed to refresh metadata:',
+      error instanceof Error ? error.message : 'Unknown error',
+    );
+    throw new Error('Failed to refresh metadata');
+  }
+});

dashboard/e2e/teardown/database.teardown.ts

@@ -0,0 +1,36 @@
+import { TEST_ORGANIZATION_SLUG, TEST_PROJECT_SUBDOMAIN } from '@/e2e/env';
+import { expect, test as teardown } from '@/e2e/fixtures/auth-hook';
+
+teardown.beforeEach(async ({ authenticatedNhostPage: page }) => {
+  const databaseRoute = `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default`;
+  await page.goto(databaseRoute);
+  await page.waitForURL(databaseRoute);
+});
+
+teardown(
+  'clean up database tables',
+  async ({ authenticatedNhostPage: page }) => {
+    await page.getByRole('link', { name: /sql editor/i }).click();
+
+    await page.waitForURL(
+      `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default/editor`,
+    );
+
+    const inputField = page.locator('[contenteditable]');
+    await inputField.fill(`
+      DO $$ DECLARE
+        tablename text;
+      BEGIN
+        FOR tablename IN
+          SELECT table_name FROM information_schema.tables
+          WHERE table_schema = 'public'
+        LOOP
+          EXECUTE 'DROP TABLE IF EXISTS public.' || quote_ident(tablename) || ' CASCADE';
+        END LOOP;
+      END $$;
+    `);
+
+    await page.locator('button[type="button"]', { hasText: /run/i }).click();
+    await expect(page.getByText(/success/i)).toBeVisible();
+  },
+);

dashboard/e2e/utils.ts

@@ -1,28 +1,38 @@
+import {
+  TEST_FREE_USER_EMAILS,
+  TEST_ORGANIZATION_SLUG,
+  TEST_PROJECT_SUBDOMAIN,
+  TEST_USER_PASSWORD,
+} from '@/e2e/env';
 import { faker } from '@faker-js/faker';
-import type { Page } from '@playwright/test';
+import { type Page } from '@playwright/test';
+import { add, format } from 'date-fns-v4';
 
 /**
  * Open a project by navigating to the project's overview page.
  *
  * @param page - The Playwright page object.
- * @param workspaceSlug - The slug of the workspace that contains the project.
- * @param projectSlug - The slug of the project to open.
- * @param projectName - The name of the project to open.
+ * @param orgSlug - The slug of the organization that contains the project.
+ * @param projectSubdomain - The subdomain of the project to open.
  * @returns A promise that resolves when the project is opened.
  */
-export async function openProject({
+export async function navigateToProject({
   page,
-  projectName,
-  workspaceSlug,
-  projectSlug,
+  orgSlug,
+  projectSubdomain,
 }: {
   page: Page;
-  workspaceSlug: string;
-  projectSlug: string;
-  projectName: string;
+  orgSlug: string;
+  projectSubdomain: string;
 }) {
-  await page.getByRole('link', { name: projectName }).click();
-  await page.waitForURL(`/${workspaceSlug}/${projectSlug}`);
+  const projectUrl = `/orgs/${orgSlug}/projects/${projectSubdomain}`;
+
+  try {
+    await page.goto(projectUrl, { waitUntil: 'load' });
+    await page.waitForURL(projectUrl, { timeout: 10000 });
+  } catch (error) {
+    console.error(`Failed to navigate to project URL: ${projectUrl}`, error);
+  }
 }
 
 /**
@@ -36,12 +46,12 @@ export async function openProject({
 export async function prepareTable({
   page,
   name: tableName,
-  primaryKey,
+  primaryKeys,
   columns,
 }: {
   page: Page;
   name: string;
-  primaryKey: string;
+  primaryKeys: string[];
   columns: Array<{
     name: string;
     type: string;
@@ -50,7 +60,7 @@ export async function prepareTable({
     defaultValue?: string;
   }>;
 }) {
-  if (!columns.some(({ name }) => name === primaryKey)) {
+  if (!columns.some(({ name }) => primaryKeys.includes(name))) {
     throw new Error('Primary key must be one of the columns.');
   }
 
@@ -114,11 +124,13 @@ export async function prepareTable({
       },
     ),
   );
-
-  // select the first column as primary key
-  // await page.getByRole('button', { name: /primary key/i }).click();
   await page.getByLabel('Primary Key').click();
-  await page.getByRole('option', { name: primaryKey, exact: true }).click();
+  await Promise.all(
+    primaryKeys.map(async (primaryKey) => {
+      await page.getByRole('option', { name: primaryKey, exact: true }).click();
+    }),
+  );
+  await page.getByText('Create a New Table').click();
 }
 
 /**
@@ -188,3 +200,115 @@ export function generateTestEmail(prefix: string = 'Nhost_Test_') {
 
   return [prefix, email].join('');
 }
+
+export async function clickPermissionButton({
+  page,
+  role,
+  permission,
+}: {
+  page: Page;
+  role: string;
+  permission: 'Insert' | 'Select' | 'Update' | 'Delete';
+}) {
+  const permissionIndex =
+    ['Insert', 'Select', 'Update', 'Delete'].indexOf(permission) + 1;
+
+  await page
+    .locator('tr', { hasText: role })
+    .locator('td')
+    .nth(permissionIndex)
+    .locator('button')
+    .click();
+}
+
+export async function gotoAuthURL(page: Page) {
+  const authUrl = `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/users`;
+  await page.goto(authUrl);
+  await page.waitForURL(authUrl, { waitUntil: 'load' });
+}
+
+export async function gotoUrl(page: Page, url: string) {
+  await page.goto(url);
+  await page.waitForURL(url, { waitUntil: 'load' });
+}
+
+let newOrgSlug: string;
+
+export function getNewOrgSlug() {
+  return newOrgSlug;
+}
+
+export function setNewOrgSlug(slug: string) {
+  newOrgSlug = slug;
+}
+
+let freeUserStarterOrgSlug: string;
+
+export function getFreeUserStarterOrgSlug() {
+  return freeUserStarterOrgSlug;
+}
+
+export function setFreeUserStarterOrgSlug(slug: string) {
+  freeUserStarterOrgSlug = slug;
+}
+
+let newProjectSlug: string;
+
+export function getNewProjectSlug() {
+  return newProjectSlug;
+}
+
+export function setNewProjectSlug(slug: string) {
+  newProjectSlug = slug;
+}
+
+export function getProjectSlugFromUrl(url: string) {
+  const [, projectSlug] = url.split('/projects/');
+
+  return projectSlug;
+}
+
+export function getOrgSlugFromUrl(url: string) {
+  const orgSlug = url.split('/orgs/')[1].split('/projects/')[0];
+  return orgSlug;
+}
+
+export function getCardExpiration() {
+  const now = add(new Date(), { years: 3 });
+  return format(now, 'MMyy');
+}
+
+let newProjectName: string;
+
+export function getNewProjectName() {
+  return newProjectName;
+}
+
+export function setNewProjectName(name: string) {
+  newProjectName = name;
+}
+
+function getRandomUserIndex(): number {
+  return Math.floor(Math.random() * TEST_FREE_USER_EMAILS.length);
+}
+
+export async function loginWithFreeUser(page: Page) {
+  const userIndex = getRandomUserIndex();
+
+  const freeUserEmail = TEST_FREE_USER_EMAILS[userIndex];
+
+  // eslint-disable-next-line no-console
+  console.log(`Selected userIndex: ${userIndex}`);
+  await page.goto('/');
+  await page.waitForURL('/signin');
+  await page.getByRole('link', { name: /continue with email/i }).click();
+
+  await page.waitForURL('/signin/email');
+  await page.getByLabel('Email').fill(freeUserEmail);
+  await page.getByLabel('Password').fill(TEST_USER_PASSWORD);
+  await page.getByRole('button', { name: /sign in/i }).click();
+
+  await page.waitForSelector('h2:has-text("Welcome to Nhost!")', {
+    timeout: 20000,
+  });
+}

dashboard/global-teardown.ts

@@ -1,71 +0,0 @@
-import {
-  TEST_DASHBOARD_URL,
-  TEST_PROJECT_ADMIN_SECRET,
-  TEST_PROJECT_NAME,
-  TEST_PROJECT_SLUG,
-  TEST_WORKSPACE_SLUG,
-} from '@/e2e/env';
-import { openProject } from '@/e2e/utils';
-import { chromium } from '@playwright/test';
-
-async function globalTeardown() {
-  const browser = await chromium.launch({ slowMo: 1000 });
-
-  const context = await browser.newContext({
-    baseURL: TEST_DASHBOARD_URL,
-    storageState: 'e2e/.auth/user.json',
-  });
-
-  const page = await context.newPage();
-
-  await page.goto('/');
-
-  await openProject({
-    page,
-    projectName: TEST_PROJECT_NAME,
-    workspaceSlug: TEST_WORKSPACE_SLUG,
-    projectSlug: TEST_PROJECT_SLUG,
-  });
-
-  const pagePromise = context.waitForEvent('page');
-
-  await page.getByRole('link', { name: /hasura/i }).click();
-  await page.getByRole('link', { name: /open hasura/i }).click();
-
-  const hasuraPage = await pagePromise;
-  await hasuraPage.waitForLoadState();
-
-  const adminSecretInput = hasuraPage.getByPlaceholder(/enter admin-secret/i);
-
-  // note: a more ideal way would be to paste from clipboard, but Playwright
-  // doesn't support that yet
-  await adminSecretInput.fill(TEST_PROJECT_ADMIN_SECRET);
-  await adminSecretInput.press('Enter');
-
-  // note: getByRole doesn't work here
-  await hasuraPage.locator('a', { hasText: /data/i }).click();
-  await hasuraPage.getByRole('link', { name: /sql/i }).click();
-
-  // Set the value of the Ace code editor using JavaScript evaluation in the browser context
-  await hasuraPage.evaluate(() => {
-    const editor = ace.edit('raw_sql');
-
-    editor.setValue(`
-        DO $$ DECLARE
-          tablename text;
-        BEGIN
-          FOR tablename IN
-            SELECT table_name FROM information_schema.tables
-            WHERE table_schema = 'public'
-          LOOP
-            EXECUTE 'DROP TABLE IF EXISTS public.' || quote_ident(tablename) || ' CASCADE';
-          END LOOP;
-        END $$;
-     `);
-  });
-
-  await hasuraPage.getByRole('button', { name: /run!/i }).click();
-  await hasuraPage.getByText(/sql executed!/i).waitFor();
-}
-
-export default globalTeardown;

dashboard/graphite.graphql.config.yaml

@@ -1,5 +1,5 @@
 schema:
-  - https://local.graphql.nhost.run/v1:
+  - https://local.graphql.local.nhost.run/v1:
       headers:
         x-hasura-admin-secret: nhost-admin-secret
 generates:

dashboard/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

dashboard/next.config.js

@@ -5,21 +5,26 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({
 const { version } = require('./package.json');
 
 const cspHeader = `
-    default-src 'self' *.nhost.run ws://*.nhost.run nhost.run ws://nhost.run;
-    script-src 'self' 'unsafe-eval' 'unsafe-inline' cdn.segment.com js.stripe.com;
-    connect-src 'self' *.nhost.run ws://*.nhost.run nhost.run ws://nhost.run discord.com;
+    default-src 'self' *.nhost.run wss://*.nhost.run nhost.run wss://nhost.run;
+    script-src 'self' 'unsafe-eval' cdn.segment.com js.stripe.com challenges.cloudflare.com googletagmanager.com;
+    connect-src 'self' *.nhost.run wss://*.nhost.run nhost.run wss://nhost.run discord.com api.segment.io api.segment.com cdn.segment.com nhost.zendesk.com;
     style-src 'self' 'unsafe-inline';
-    img-src 'self' blob: data: avatars.githubusercontent.com s.gravatar.com *.nhost.run nhost.run;
+    img-src 'self' blob: data: github.com avatars.githubusercontent.com s.gravatar.com *.nhost.run nhost.run;
     font-src 'self' data:;
     object-src 'none';
     base-uri 'self';
     form-action 'self';
     frame-ancestors 'none';
-    frame-src 'self' js.stripe.com;
+    frame-src 'self' js.stripe.com challenges.cloudflare.com;
+    block-all-mixed-content;
 `;
 
+if (process.env.NEXT_PUBLIC_ENV !== 'development') {
+    cspHeader.concat(` upgrade-insecure-requests;`);
+}
+
 module.exports = withBundleAnalyzer({
-  reactStrictMode: true,
+  reactStrictMode: false,
   swcMinify: false,
   output: 'standalone',
   experimental: {
@@ -36,9 +41,13 @@ module.exports = withBundleAnalyzer({
       {
         source: '/(.*)',
         headers: [
+          {
+            key: 'Content-Security-Policy',
+            value: cspHeader.replace(/\s+/g, ' ').trim(),
+          },
           {
             key: 'X-Frame-Options',
-            value: 'SAMEORIGIN',
+            value: 'DENY',
           },
         ],
       },

dashboard/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@nhost/dashboard",
-  "version": "1.15.0",
+  "version": "2.36.0",
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
-    "dev": "next dev",
+    "dev": "RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED=false next dev",
     "build": "next build --no-lint",
     "analyze": "ANALYZE=true pnpm build --no-lint",
     "start": "next start",
@@ -16,79 +16,118 @@
     "storybook": "start-storybook -p 6006 -s public",
     "build-storybook": "build-storybook",
     "install-browsers": "pnpm playwright install && pnpm playwright install-deps",
-    "e2e": "pnpm install-browsers && pnpm playwright test"
+    "e2e:tests": "pnpm install-browsers && pnpm playwright test --config=playwright.config.ts -x",
+    "e2e": "pnpm e2e:tests --project=main",
+    "e2e:local": "pnpm e2e:tests --project=local",
+    "e2e:onboarding": "pnpm e2e:tests --project=onboarding"
   },
   "dependencies": {
     "@apollo/client": "^3.9.9",
     "@codemirror/lang-sql": "^6.6.2",
+    "@codemirror/language": "^6.10.1",
+    "@codemirror/legacy-modes": "^6.4.0",
+    "@date-fns/tz": "^1.2.0",
     "@emotion/cache": "^11.11.0",
     "@emotion/react": "^11.11.4",
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.11.5",
-    "@fontsource/inter": "^5.0.17",
-    "@fontsource/roboto-mono": "^5.0.17",
-    "@graphiql/react": "^0.20.3",
+    "@fontsource/inter": "^5.0.21",
+    "@fontsource/roboto-mono": "^5.0.20",
+    "@graphiql/react": "^0.22.3",
     "@graphiql/toolkit": "^0.9.1",
     "@headlessui/react": "^1.7.18",
     "@heroicons/react": "^1.0.6",
-    "@hookform/resolvers": "^3.3.4",
+    "@hookform/resolvers": "^3.9.0",
+    "@iarna/toml": "^2.2.5",
+    "@icons-pack/react-simple-icons": "^9.6.0",
+    "@marsidev/react-turnstile": "^1.0.2",
     "@mui/base": "5.0.0-beta.31",
     "@mui/material": "^5.15.14",
     "@mui/system": "^5.15.14",
     "@mui/x-date-pickers": "^5.0.20",
-    "@nhost/nextjs": "workspace:*",
-    "@nhost/react-apollo": "workspace:*",
-    "@segment/snippet": "^4.16.2",
+    "@nhost/nhost-js-beta": "npm:@nhost/nhost-js@5.0.0-beta.9",
+    "@radix-ui/react-accordion": "^1.2.1",
+    "@radix-ui/react-alert-dialog": "^1.1.2",
+    "@radix-ui/react-checkbox": "^1.1.2",
+    "@radix-ui/react-dialog": "^1.1.3",
+    "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-hover-card": "^1.1.2",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-popover": "^1.1.3",
+    "@radix-ui/react-progress": "^1.1.0",
+    "@radix-ui/react-radio-group": "^1.2.0",
+    "@radix-ui/react-select": "^2.1.2",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-tabs": "^1.1.3",
+    "@radix-ui/react-tooltip": "^1.1.2",
+    "@segment/analytics-next": "^1.77.0",
+    "@simplewebauthn/browser": "^9.0.1",
     "@stripe/react-stripe-js": "^2.6.2",
     "@stripe/stripe-js": "^1.54.2",
     "@tailwindcss/forms": "^0.5.7",
     "@tanstack/react-query": "^4.36.1",
     "@tanstack/react-table": "^8.15.3",
-    "@tanstack/react-virtual": "^3.2.0",
+    "@tanstack/react-virtual": "^3.5.0",
+    "@uidotdev/usehooks": "^2.4.1",
+    "@uiw/codemirror-theme-bbedit": "^4.22.2",
     "@uiw/codemirror-theme-github": "^4.21.25",
     "@uiw/react-codemirror": "^4.21.25",
-    "analytics-node": "^6.2.0",
     "bcryptjs": "^2.4.3",
+    "class-variance-authority": "^0.7.0",
     "clsx": "^1.2.1",
+    "cmdk": "1.0.0",
     "date-fns": "^2.30.0",
+    "date-fns-v4": "npm:date-fns@4.1.0",
+    "dequal": "^2.0.3",
     "framer-motion": "^10.18.0",
     "generate-password": "^1.7.1",
-    "graphiql": "^3.1.1",
+    "graphiql": "^3.3.1",
     "graphql": "16.8.1",
     "graphql-request": "^6.1.0",
     "graphql-tag": "^2.12.6",
     "graphql-ws": "^5.16.0",
     "just-kebab-case": "^4.2.0",
+    "jwt-decode": "^4.0.0",
     "lodash.debounce": "^4.0.8",
-    "next": "^14.1.4",
+    "lucide-react": "^0.416.0",
+    "next": "^14.2.31",
+    "next-nprogress-bar": "^2.3.13",
     "next-seo": "^6.5.0",
+    "next-themes": "^0.3.0",
     "node-pg-format": "^1.3.5",
     "pluralize": "^8.0.0",
     "react": "18.2.0",
     "react-children-utilities": "^2.10.0",
+    "react-complex-tree": "^2.6.0",
+    "react-day-picker": "9.6.3",
     "react-dom": "18.2.0",
     "react-error-boundary": "^4.0.13",
-    "react-hook-form": "^7.51.2",
+    "react-hook-form": "^7.53.0",
     "react-hot-toast": "^2.4.1",
     "react-intersection-observer": "^9.8.1",
     "react-is": "18.2.0",
     "react-loading-skeleton": "^2.2.0",
     "react-markdown": "^9.0.1",
-    "react-merge-refs": "^1.1.0",
+    "react-merge-refs": "^3.0.2",
     "react-resizable-layout": "^0.7.2",
     "react-table": "^7.8.0",
     "recoil": "^0.7.7",
     "recoil-persist": "^5.1.0",
     "rehype-highlight": "^7.0.0",
     "remark-gfm": "^4.0.0",
-    "shell-quote": "^1.8.1",
     "slugify": "^1.6.6",
     "stripe": "^10.17.0",
     "tailwind-merge": "^1.14.0",
+    "tailwindcss-animate": "^1.0.7",
+    "test@latest": "link:playwright/test@latest",
+    "timezones-list": "^3.1.0",
     "utility-types": "^3.11.0",
+    "uuid": "^9.0.1",
     "validator": "^13.11.0",
     "yup": "^1.4.0",
-    "yup-password": "^0.2.2"
+    "yup-password": "^0.2.2",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@babel/core": "^7.24.3",
@@ -98,7 +137,7 @@
     "@graphql-codegen/typescript-operations": "^3.0.4",
     "@graphql-codegen/typescript-react-apollo": "^3.3.7",
     "@next/bundle-analyzer": "^12.3.4",
-    "@playwright/test": "1.41.0",
+    "@playwright/test": "1.47.0",
     "@storybook/addon-actions": "^6.5.16",
     "@storybook/addon-essentials": "^6.5.16",
     "@storybook/addon-interactions": "^6.5.16",
@@ -122,8 +161,8 @@
     "@types/react": "^18.2.73",
     "@types/react-dom": "^18.2.23",
     "@types/react-table": "^7.7.20",
-    "@types/shell-quote": "^1.7.5",
     "@types/testing-library__jest-dom": "^5.14.9",
+    "@types/uuid": "^9.0.8",
     "@types/validator": "^13.11.9",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
@@ -146,21 +185,21 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "jsdom": "^22.1.0",
     "lint-staged": "^15.2.2",
-    "msw": "^1.3.3",
+    "msw": "^1.3.5",
     "msw-storybook-addon": "^1.10.0",
     "node-fetch": "^3.3.2",
     "postcss": "^8.4.38",
-    "prettier": "^2.8.8",
-    "prettier-plugin-organize-imports": "^3.2.4",
-    "prettier-plugin-tailwindcss": "^0.4.1",
+    "prettier": "^3.4.2",
+    "prettier-plugin-organize-imports": "^4.1.0",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "react-date-fns-hooks": "^0.9.4",
     "require-from-string": "^2.0.2",
     "snake-case": "^3.0.4",
     "storybook-addon-next-router": "^4.0.2",
-    "tailwindcss": "^3.4.3",
+    "tailwindcss": "^3.4.12",
     "ts-node": "^10.9.2",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
-    "vite": "^5.2.7",
+    "vite": "^5.4.20",
     "vite-tsconfig-paths": "^4.3.2",
     "vitest": "^0.32.4"
   },

dashboard/playwright.config.ts

@@ -6,33 +6,56 @@ dotenv.config({ path: path.resolve(__dirname, '.env.test') });
 
 export default defineConfig({
   testDir: './e2e',
-  timeout: 30 * 1000,
+  timeout: 120 * 1000,
   expect: {
-    timeout: 5000,
+    timeout: 10000,
   },
-  fullyParallel: true,
+  fullyParallel: false,
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
-  workers: process.env.CI ? 1 : undefined,
+  workers: 1,
   reporter: 'html',
-  globalTeardown: require.resolve('./global-teardown'),
   use: {
     actionTimeout: 0,
-    trace: 'on-first-retry',
+    trace: 'retain-on-failure',
     baseURL: process.env.NHOST_TEST_DASHBOARD_URL,
+    launchOptions: {
+      slowMo: 500,
+    },
   },
   projects: [
     {
       name: 'setup',
       testMatch: ['**/setup/*.setup.ts'],
+      teardown: 'teardown',
     },
     {
-      name: 'chromium',
+      name: 'teardown',
+      testMatch: ['**/teardown/*.teardown.ts'],
+    },
+    {
+      name: 'main',
       use: {
         ...devices['Desktop Chrome'],
         storageState: 'e2e/.auth/user.json',
       },
       dependencies: ['setup'],
+      testIgnore: ['onboarding.test.ts', 'cli-local-dashboard.test.ts'],
+    },
+    {
+      name: 'local',
+      use: {
+        ...devices['Desktop Chrome'],
+        baseURL: '', // Local dashboard URL
+      },
+      testMatch: 'cli-local-dashboard.test.ts',
+    },
+    {
+      name: 'onboarding',
+      testMatch: 'onboarding.test.ts',
+      use: {
+        ...devices['Desktop Chrome'],
+      },
     },
   ],
 });

dashboard/prettier.config.js

@@ -9,7 +9,7 @@ module.exports = {
   endOfLine: 'auto',
   semi: true,
   plugins: [
-    require('prettier-plugin-organize-imports'),
-    require('prettier-plugin-tailwindcss'),
+    'prettier-plugin-organize-imports',
+    'prettier-plugin-tailwindcss'
   ],
 };

dashboard/public/assets/LockedApp.svg

@@ -0,0 +1,12 @@
+<svg width="72" height="73" viewBox="0 0 72 73" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_10501_253)">
+<path d="M0 8.5C0 4.08172 3.58172 0.5 8 0.5H64C68.4183 0.5 72 4.08172 72 8.5V64.5C72 68.9183 68.4183 72.5 64 72.5H8C3.58172 72.5 0 68.9183 0 64.5V8.5Z" fill="#9C73DF" fill-opacity="0.2"/>
+<path d="M43.1203 35.5H29.7687C28.7153 35.5 27.8613 36.3954 27.8613 37.5V44.5C27.8613 45.6046 28.7153 46.5 29.7687 46.5H43.1203C44.1737 46.5 45.0276 45.6046 45.0276 44.5V37.5C45.0276 36.3954 44.1737 35.5 43.1203 35.5Z" stroke="#9C73DF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M31.6758 35.5V31.5C31.6758 30.1739 32.1782 28.9021 33.0724 27.9645C33.9667 27.0268 35.1795 26.5 36.4442 26.5C37.7089 26.5 38.9217 27.0268 39.816 27.9645C40.7102 28.9021 41.2126 30.1739 41.2126 31.5V35.5" stroke="#9C73DF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_10501_253">
+<rect width="72" height="72" fill="white" transform="translate(0 0.5)"/>
+</clipPath>
+</defs>
+</svg>

dashboard/src/components/analytics/analytics.tsx

@@ -0,0 +1,30 @@
+import { useCurrentOrg } from '@/features/orgs/projects/hooks/useCurrentOrg';
+import { useProject } from '@/features/orgs/projects/hooks/useProject';
+import { analytics } from '@/lib/segment';
+import { useRouter } from 'next/router';
+import { useEffect } from 'react';
+
+export default function Analytics() {
+  const router = useRouter();
+  const { org } = useCurrentOrg();
+  const { project } = useProject();
+
+  useEffect(() => {
+    const customProperties = {
+      organizationSlug: org?.slug || '',
+      projectSubdomain: project?.subdomain || '',
+    };
+
+    analytics.page(customProperties);
+
+    const handleRouteChange = () => analytics.page(customProperties);
+
+    router.events.on('routeChangeComplete', handleRouteChange);
+
+    return () => {
+      router.events.off('routeChangeComplete', handleRouteChange);
+    };
+  }, [router.events, org?.slug, project?.subdomain]);
+
+  return null;
+}

dashboard/src/components/auth/SignInRightColumn.tsx

@@ -0,0 +1,59 @@
+import Image from 'next/image';
+
+export function SignInRightColumn() {
+  return (
+    <div className="grid gap-6 font-[Inter]">
+      <div className="text-center">
+        <h2 className="mb-2 text-2xl font-semibold text-white">
+          Ship 10x faster
+        </h2>
+        <p className="text-sm text-[#A2B3BE]">
+          Skip months of backend setup and focus on building what matters
+        </p>
+      </div>
+
+      <div className="rounded-lg border border-white/10 bg-gradient-to-r from-[#0052CD]/10 to-[#FF02F5]/10 p-5">
+        <div className="flex items-start gap-4">
+          <div className="flex-shrink-0">
+            <Image
+              src="/assets/signup/CircleWavyCheck.svg"
+              width={20}
+              height={20}
+              alt="Check"
+            />
+          </div>
+          <div>
+            <h3 className="mb-2 text-sm font-semibold text-white">
+              From idea to production
+            </h3>
+            <p className="text-xs text-[#A2B3BE]">
+              Everything you need to ship fast, without the setup complexity.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div className="rounded-lg border border-white/10 bg-gradient-to-r from-[#0052CD]/10 to-[#FF02F5]/10 p-5">
+        <div className="flex items-start gap-4">
+          <div className="flex-shrink-0">
+            <Image
+              src="/assets/key.svg"
+              width={20}
+              height={20}
+              alt="Security"
+            />
+          </div>
+          <div>
+            <h3 className="mb-2 text-sm font-semibold text-white">
+              Sleep easy at night
+            </h3>
+            <p className="text-xs text-[#A2B3BE]">
+              Rock-solid security so you can focus on building, not
+              vulnerabilities.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

dashboard/src/components/common/ApplyLocalSettingsDialog/ApplyLocalSettingsDialog.tsx

@@ -10,7 +10,7 @@ export default function ApplyLocalSettingsDialog() {
       <div className="flex flex-col gap-2">
         <Text color="secondary">
           Run{' '}
-          <code className="px-1 py-px mx-1 rounded-md bg-slate-500 text-slate-100">
+          <code className="mx-1 rounded-md bg-slate-500 px-1 py-px text-slate-100">
             $ nhost up
           </code>{' '}
           using the cli to apply your changes

dashboard/src/components/common/ContactUs/ContactUs.tsx

@@ -1,102 +0,0 @@
-import { Link } from '@/components/ui/v2/Link';
-import { Text } from '@/components/ui/v2/Text';
-import type { DetailedHTMLProps, HTMLProps } from 'react';
-import { twMerge } from 'tailwind-merge';
-
-export interface ContactUsProps
-  extends DetailedHTMLProps<HTMLProps<HTMLDivElement>, HTMLDivElement> {
-  isTeam?: boolean;
-  isOwner?: boolean;
-}
-
-export default function FeedbackForm({
-  className,
-  isTeam,
-  isOwner,
-  ...props
-}: ContactUsProps) {
-  return (
-    <div
-      className={twMerge(
-        'grid max-w-md grid-flow-row gap-2 py-4 px-5',
-        className,
-      )}
-      {...props}
-    >
-      <Text variant="h3" component="h2">
-        Contact us
-      </Text>
-
-      {isTeam && isOwner && (
-        <Text>
-          If this is a new Team project, or you need to manage members, reach
-          out to us on discord or via email at{' '}
-          <Link
-            href="mailto:support@nhost.io"
-            target="_blank"
-            rel="noopener noreferrer"
-            underline="hover"
-          >
-            support@nhost.io
-          </Link>{' '}
-          so we can have your dedicated channel set up.
-        </Text>
-      )}
-
-      {isTeam && !isOwner && (
-        <Text>
-          As part of a team plan you can reach out to us on the private channel
-          for this workspace. If you haven&apos;t been added to the channel, ask
-          the workspace owner to add you.
-        </Text>
-      )}
-
-      <Text>
-        To report issues with Nhost, please open a GitHub issue in the{' '}
-        <Link
-          href="https://github.com/nhost/nhost/issues/new"
-          target="_blank"
-          rel="noopener noreferrer"
-          underline="hover"
-        >
-          nhost/nhost
-        </Link>{' '}
-        repository.
-      </Text>
-      <Text>
-        For issues related to the CLI, please visit the{' '}
-        <Link
-          href="https://github.com/nhost/cli/issues/new"
-          target="_blank"
-          rel="noopener noreferrer"
-          underline="hover"
-        >
-          nhost/cli
-        </Link>{' '}
-        repository.
-      </Text>
-      <Text>
-        If you need assistance or have any questions, feel free to join us on{' '}
-        <Link
-          href="https://discord.com/invite/9V7Qb2U"
-          target="_blank"
-          rel="noopener noreferrer"
-          underline="hover"
-        >
-          Discord
-        </Link>
-        . Alternatively, if you prefer, you can also open a{' '}
-        <Link
-          href="https://github.com/nhost/nhost/discussions/new/choose"
-          target="_blank"
-          rel="noopener noreferrer"
-          underline="hover"
-        >
-          GitHub discussion
-        </Link>
-        .
-      </Text>
-      <Text>We&apos;re here to help, so don&apos;t hesitate to reach out!</Text>
-    </div>
-  );
-}

dashboard/src/components/common/ContactUs/index.ts

@@ -1,2 +0,0 @@
-export * from './ContactUs';
-export { default as ContactUs } from './ContactUs';

dashboard/src/components/common/CookieConsent/CookieConsent.tsx

@@ -0,0 +1,93 @@
+import { Button } from '@/components/ui/v3/button';
+import { useSSRLocalStorage } from '@/hooks/useSSRLocalStorage';
+import { X } from 'lucide-react';
+import NextLink from 'next/link';
+import { useEffect, useState } from 'react';
+
+interface CookieConsentProps {
+  onAccept: () => void;
+}
+
+export default function CookieConsent({ onAccept }: CookieConsentProps) {
+  const [consentGiven, setConsentGiven] = useSSRLocalStorage<boolean | null>(
+    'cookie-consent',
+    null,
+  );
+  const [showBanner, setShowBanner] = useState(false);
+
+  useEffect(() => {
+    if (consentGiven === null) {
+      setShowBanner(true);
+    } else if (consentGiven === true) {
+      onAccept();
+    }
+  }, [consentGiven, onAccept]);
+
+  const handleAccept = () => {
+    setConsentGiven(true);
+    setShowBanner(false);
+    onAccept();
+  };
+
+  const handleDecline = () => {
+    setConsentGiven(false);
+    setShowBanner(false);
+  };
+
+  const handleClose = () => {
+    handleDecline();
+  };
+
+  if (!showBanner) {
+    return null;
+  }
+
+  return (
+    <div className="fixed bottom-4 right-4 z-50 w-96">
+      <div className="rounded-lg border bg-black/95 p-6 shadow-lg backdrop-blur-sm">
+        <div className="flex items-start justify-between gap-4">
+          <div className="flex-1">
+            <h3 className="mb-3 text-sm font-semibold text-white">
+              We use cookies for payments and analytics to improve our services.
+            </h3>
+            <p className="mb-4 text-xs text-[#A2B3BE]">
+              <NextLink
+                href="https://nhost.io/legal/privacy-policy"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-white underline hover:no-underline"
+              >
+                Learn more
+              </NextLink>
+            </p>
+            <div className="flex gap-2">
+              <Button
+                onClick={handleAccept}
+                size="sm"
+                className="bg-blue-600 px-3 py-1 text-xs text-white hover:bg-blue-700"
+              >
+                Accept all
+              </Button>
+              <Button
+                onClick={handleDecline}
+                variant="outline"
+                size="sm"
+                className="border-gray-600 px-3 py-1 text-xs text-white hover:bg-gray-800"
+              >
+                Essential only
+              </Button>
+            </div>
+          </div>
+          <button
+            onClick={handleClose}
+            type="button"
+            className="text-[#A2B3BE] hover:text-white"
+            aria-label="Close cookie banner"
+          >
+            <X size={16} />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

dashboard/src/components/common/CookieConsent/index.ts

@@ -0,0 +1,2 @@
+export { default as CookieConsent } from './CookieConsent';
+

dashboard/src/components/common/DateTimePicker/DateTimePicker.test.tsx

@@ -0,0 +1,177 @@
+import { isTZDate } from '@/components/common/TimePicker/time-picker-utils';
+import { render, screen, TestUserEvent, waitFor } from '@/tests/testUtils';
+import { isBefore, startOfDay } from 'date-fns-v4';
+import { useState } from 'react';
+import { TZDate } from 'react-day-picker';
+import { vi } from 'vitest';
+import DateTimePicker, { type DateTimePickerProps } from './DateTimePicker';
+
+vi.mock('@/utils/timezoneUtils', async () => {
+  const actualTimezoneUtils = await vi.importActual<any>(
+    '@/utils/timezoneUtils',
+  );
+  return {
+    ...actualTimezoneUtils,
+    guessTimezone: () => 'Europe/Helsinki',
+  };
+});
+
+const earliestBackupDate = '2025-03-13T02:00:05.000Z';
+
+function TestComponent(
+  props: Omit<DateTimePickerProps, 'dateTime' | 'onDateTimeChange'>,
+) {
+  const [dateTime, setDateTime] = useState(earliestBackupDate);
+
+  function isCalendarDayDisabled(date: Date | TZDate) {
+    if (isTZDate(date)) {
+      const utcDay = new Date(date.getTime()).toISOString();
+      const tzDate = new TZDate(utcDay, date.timeZone);
+      const earliestBackupDateInTz = new TZDate(
+        earliestBackupDate,
+        date.timeZone,
+      );
+      return isBefore(startOfDay(tzDate), startOfDay(earliestBackupDateInTz));
+    }
+
+    return isBefore(
+      startOfDay(new Date(date.getTime()).toISOString()),
+      startOfDay(earliestBackupDate),
+    );
+  }
+
+  return (
+    <>
+      <h1 data-testid="utcDate">{dateTime}</h1>
+      <DateTimePicker
+        {...props}
+        isCalendarDayDisabled={isCalendarDayDisabled}
+        dateTime={dateTime}
+        onDateTimeChange={setDateTime}
+      />
+    </>
+  );
+}
+
+describe('DateTimePicker', () => {
+  test('when the date changes datetime is emitted in utc string format', async () => {
+    render(<TestComponent />);
+    const user = new TestUserEvent();
+
+    await user.click(await screen.findByTestId('dateTimePickerTrigger'));
+
+    expect(
+      await screen.findByRole('button', { name: 'Select' }),
+    ).toBeInTheDocument();
+
+    expect(screen.getByText('March 2025')).toBeInTheDocument();
+
+    await user.click(
+      screen.getByRole('button', { name: 'Go to the Next Month' }),
+    );
+    expect(screen.getByText('April 2025')).toBeInTheDocument();
+
+    await user.click(screen.getByText('13'));
+
+    const hoursInput = screen.getByLabelText('Hours');
+    await user.type(hoursInput, '11');
+
+    const minutesInput = screen.getByLabelText('Minutes');
+    await user.type(minutesInput, '12');
+
+    const secondsInput = screen.getByLabelText('Seconds');
+    await user.type(secondsInput, '13');
+
+    await user.click(screen.getByRole('button', { name: 'Select' }));
+
+    await waitFor(async () =>
+      expect(
+        screen.queryByRole('button', { name: 'Select' }),
+      ).not.toBeInTheDocument(),
+    );
+
+    expect(screen.getByTestId('utcDate')).toHaveTextContent(
+      '2025-04-13T08:12:13.000Z',
+    );
+  });
+
+  test('timezone can be changed and the calendar is updated', async () => {
+    await waitFor(() => render(<TestComponent withTimezone />));
+    const user = new TestUserEvent();
+
+    await user.click(await screen.findByTestId('dateTimePickerTrigger'));
+
+    expect(await screen.findByText(/Timezone:/)).toBeInTheDocument();
+
+    expect(
+      await screen.findByTestId('timezoneSettingsButton'),
+    ).toBeInTheDocument();
+
+    expect(await screen.findByText(/Timezone: /i)).toHaveTextContent(
+      'Timezone: UTC+02:00',
+    );
+    expect(await screen.getByText('12')).toBeDisabled();
+
+    await user.click(await screen.findByTestId('timezoneSettingsButton'));
+    const tzInput = await screen.findByPlaceholderText('Search timezones...');
+    expect(tzInput).toBeInTheDocument();
+
+    await user.type(tzInput, 'America/Chicago{ArrowDown}{Enter}');
+
+    expect(
+      screen.queryByPlaceholderText('Search timezones...'),
+    ).not.toBeInTheDocument();
+
+    expect(await screen.findByText(/Timezone: /i)).toHaveTextContent(
+      'Timezone: UTC-05:00',
+    );
+
+    const selectedDay = screen.getByText('12');
+    expect(selectedDay).not.toBeDisabled();
+    expect(await screen.getByText('11')).toBeDisabled();
+    const gridCell = selectedDay.closest('[role="gridcell"]');
+    expect(gridCell).toHaveClass('[&>button]:bg-primary');
+  });
+
+  test('Displays the correct time zone offset when changing the selected date from standard time (ST) to daylight saving time (DST)', async () => {
+    await waitFor(() => render(<TestComponent withTimezone />));
+    const user = new TestUserEvent();
+
+    await user.click(await screen.findByTestId('dateTimePickerTrigger'));
+
+    expect(await screen.findByText(/Timezone:/)).toBeInTheDocument();
+    expect(
+      await screen.findByTestId('timezoneSettingsButton'),
+    ).toBeInTheDocument();
+
+    expect(await screen.findByText(/Timezone: /i)).toHaveTextContent(
+      'Timezone: UTC+02:00',
+    );
+
+    expect(screen.getByText('March 2025')).toBeInTheDocument();
+
+    await user.click(
+      screen.getByRole('button', { name: 'Go to the Next Month' }),
+    );
+
+    expect(screen.getByText('April 2025')).toBeInTheDocument();
+
+    await user.click(screen.getByText('18'));
+
+    expect(await screen.findByText(/Timezone: /i)).toHaveTextContent(
+      'Timezone: UTC+03:00',
+    );
+
+    await user.click(
+      screen.getByRole('button', { name: 'Go to the Previous Month' }),
+    );
+
+    expect(screen.getByText('March 2025')).toBeInTheDocument();
+
+    await user.click(screen.getByText('21'));
+
+    expect(await screen.findByText(/Timezone: /i)).toHaveTextContent(
+      'Timezone: UTC+02:00',
+    );
+  });
+});

dashboard/src/components/common/DateTimePicker/DateTimePicker.tsx

@@ -0,0 +1,173 @@
+'use client';
+
+import { TimePicker } from '@/components/common/TimePicker';
+
+import { Button } from '@/components/ui/v3/button';
+import { Calendar } from '@/components/ui/v3/calendar';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/v3/popover';
+import { cn } from '@/lib/utils';
+import { guessTimezone } from '@/utils/timezoneUtils';
+import { TZDate } from '@date-fns/tz';
+import { add, format, parseISO } from 'date-fns-v4';
+import { Calendar as CalendarIcon } from 'lucide-react';
+import { useState } from 'react';
+import TimezoneSettings from './TimezoneSettings';
+
+export interface DateTimePickerProps {
+  dateTime: string;
+  onDateTimeChange: (newDate: string) => void;
+  withTimezone?: boolean;
+  defaultTimezone?: string;
+  formatDateFn?: (date: Date | string) => string;
+  isCalendarDayDisabled?: (date: Date) => boolean;
+  align?: 'start' | 'center' | 'end';
+  validateDateFn?: (date: Date) => string;
+}
+
+function DateTimePicker({
+  dateTime,
+  withTimezone = false,
+  defaultTimezone,
+  formatDateFn,
+  onDateTimeChange,
+  isCalendarDayDisabled,
+  align = 'start',
+  validateDateFn,
+}: DateTimePickerProps) {
+  const [date, setDate] = useState(() => {
+    if (withTimezone) {
+      const tz = defaultTimezone || guessTimezone();
+      return new TZDate(dateTime, tz);
+    }
+    return parseISO(dateTime);
+  });
+  const [open, setOpen] = useState(false);
+
+  const [timezone, setTimezone] = useState(
+    () => defaultTimezone || guessTimezone(),
+  );
+
+  function emitNewDateTime() {
+    onDateTimeChange(new Date(date.getTime()).toISOString());
+  }
+
+  /**
+   * carry over the current time when a user clicks a new day
+   * instead of resetting to 00:00
+   */
+  function handleSelect(newDay: Date | undefined) {
+    if (!newDay) {
+      return;
+    }
+    if (!date) {
+      setDate(newDay);
+      return;
+    }
+    const diff = newDay.getTime() - date.getTime();
+    const diffInDays = diff / (1000 * 60 * 60 * 24);
+    const newDateFull = add(date, { days: Math.ceil(diffInDays) });
+    setDate(newDateFull);
+  }
+
+  function handleTimezoneChange(newTimezone: string) {
+    const newDateWithTimezone = new TZDate(date.toISOString(), newTimezone);
+    setTimezone(newTimezone);
+    setDate(newDateWithTimezone);
+  }
+
+  function handleOpenChange(newOpenState: boolean) {
+    if (!newOpenState) {
+      if (withTimezone) {
+        const tz = defaultTimezone || guessTimezone();
+        setTimezone(tz);
+        setDate(new TZDate(dateTime, tz));
+      }
+      setDate(parseISO(dateTime));
+    }
+    setOpen(newOpenState);
+  }
+
+  function onSelect() {
+    emitNewDateTime();
+    setOpen(false);
+  }
+
+  const selectedDateInUTC = new Date(date.getTime()).toISOString();
+
+  const dateString = formatDateFn?.(date) || format(date, 'PPP HH:mm:ss');
+
+  const errorText = validateDateFn?.(date);
+  const hasError = !!errorText;
+
+  return (
+    <Popover open={open} onOpenChange={handleOpenChange}>
+      <PopoverTrigger asChild>
+        <Button
+          data-testid="dateTimePickerTrigger"
+          variant="outline"
+          className={cn(
+            'w-full justify-between text-left font-normal',
+            !date && 'text-muted-foreground',
+            { 'border-destructive': hasError },
+          )}
+          onClick={() => setOpen(true)}
+        >
+          {date ? dateString : <span>Pick a date</span>}
+          <CalendarIcon className="h-4 w-4" />
+        </Button>
+      </PopoverTrigger>
+
+      <PopoverContent className="w-auto p-0" align={align}>
+        <div className="flex">
+          <div className="flex">
+            <Calendar
+              mode="single"
+              selected={date}
+              defaultMonth={date}
+              onSelect={(d) => handleSelect(d)}
+              disabled={isCalendarDayDisabled}
+              timeZone={timezone}
+            />
+            <div className="flex flex-col justify-between">
+              <div>
+                <div className="border-t border-border p-3">
+                  <TimePicker setDate={setDate} date={date} />
+                </div>
+                {withTimezone && (
+                  <div className="border-t border-border p-3">
+                    <TimezoneSettings
+                      dateTime={selectedDateInUTC}
+                      onTimezoneChange={handleTimezoneChange}
+                    />
+                  </div>
+                )}
+              </div>
+              <div className="flex flex-row justify-between gap-5 p-3">
+                <Button
+                  className="w-full"
+                  onClick={onSelect}
+                  disabled={hasError}
+                >
+                  Select
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          className={cn('p-3 text-center text-[11px] text-destructive', {
+            invisible: !hasError,
+          })}
+        >
+          {errorText}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+export default DateTimePicker;

dashboard/src/components/common/DateTimePicker/TimezoneSettings.tsx

@@ -0,0 +1,46 @@
+import { TimezonePicker } from '@/components/common/TimezonePicker';
+import { Button } from '@/components/ui/v3/button';
+import { getUTCOffsetInHours, guessTimezone } from '@/utils/timezoneUtils';
+import { Settings2 } from 'lucide-react';
+import { useState } from 'react';
+
+interface Props {
+  dateTime: string;
+  onTimezoneChange: (timezone: string) => void;
+}
+
+function TimezoneSettings({ dateTime, onTimezoneChange }: Props) {
+  const [selectedTimezone, setTimezone] = useState<string>(() =>
+    guessTimezone(),
+  );
+
+  function handleTimezoneSelect(tz: { value: string; label: string }) {
+    setTimezone(tz.value);
+    onTimezoneChange?.(tz.value);
+  }
+
+  const utcOffset = getUTCOffsetInHours(selectedTimezone, dateTime, 'OOOO');
+
+  return (
+    <div className="flex w-full items-center justify-between">
+      <span>Timezone: {utcOffset}</span>
+      <TimezonePicker
+        dateTime={dateTime}
+        selectedTimezone={selectedTimezone}
+        onTimezoneSelect={handleTimezoneSelect}
+        button={
+          <Button
+            variant="ghost"
+            size="icon"
+            aria-label="Open timezone settings"
+            data-testid="timezoneSettingsButton"
+          >
+            <Settings2 className="h-4 w-4 dark:text-foreground" />
+          </Button>
+        }
+      />
+    </div>
+  );
+}
+
+export default TimezoneSettings;

dashboard/src/components/common/DateTimePicker/index.ts

@@ -0,0 +1 @@
+export { default as DateTimePicker } from './DateTimePicker';

dashboard/src/components/common/DialogProvider/DialogContext.ts

@@ -51,7 +51,7 @@ export interface DialogContextProps {
   /**
    * Call this function to open an alert dialog.
    */
-  openAlertDialog: <TPayload = string>(config?: DialogConfig<TPayload>) => void;
+  openAlertDialog: <TPayload = string>(config: DialogConfig<TPayload>) => void;
   /**
    * Call this function to close the active dialog.
    */

dashboard/src/components/common/DialogProvider/DialogProvider.tsx

@@ -23,6 +23,10 @@ import {
   drawerReducer,
 } from './dialogReducers';
 
+function isBaseSyntheticEvent(event: any): event is BaseSyntheticEvent {
+  return event?.type !== undefined;
+}
+
 function DialogProvider({ children }: PropsWithChildren<unknown>) {
   const router = useRouter();
 
@@ -87,7 +91,7 @@ function DialogProvider({ children }: PropsWithChildren<unknown>) {
     drawerDispatch({ type: 'CLEAR_DRAWER_CONTENT' });
   }, []);
 
-  function openAlertDialog<TConfig = string>(config?: DialogConfig<TConfig>) {
+  function openAlertDialog<TConfig = string>(config: DialogConfig<TConfig>) {
     alertDialogDispatch({ type: 'OPEN_ALERT', payload: config });
   }
 
@@ -122,8 +126,12 @@ function DialogProvider({ children }: PropsWithChildren<unknown>) {
   );
 
   const closeDrawerWithDirtyGuard = useCallback(
-    (event?: BaseSyntheticEvent) => {
-      if (isDrawerDirty.current && event?.type !== 'submit') {
+    (event?: any) => {
+      if (
+        isDrawerDirty.current &&
+        isBaseSyntheticEvent(event) &&
+        event.type !== 'submit'
+      ) {
         setShowDirtyConfirmation(true);
         openDirtyConfirmation({ props: { onPrimaryAction: closeDrawer } });
         return;
@@ -135,8 +143,12 @@ function DialogProvider({ children }: PropsWithChildren<unknown>) {
   );
 
   const closeDialogWithDirtyGuard = useCallback(
-    (event?: BaseSyntheticEvent) => {
-      if (isDialogDirty.current && event?.type !== 'submit') {
+    (event?: any) => {
+      if (
+        isDialogDirty.current &&
+        isBaseSyntheticEvent(event) &&
+        event.type !== 'submit'
+      ) {
         setShowDirtyConfirmation(true);
         openDirtyConfirmation({ props: { onPrimaryAction: closeDialog } });
         return;
@@ -250,7 +262,7 @@ function DialogProvider({ children }: PropsWithChildren<unknown>) {
       <BaseDialog
         {...dialogProps}
         title={dialogTitle}
-        open={dialogOpen}
+        open={!!dialogOpen}
         onClose={closeDialogWithDirtyGuard}
         TransitionProps={{ onExited: clearDialogContent, unmountOnExit: false }}
         PaperProps={{
@@ -258,6 +270,7 @@ function DialogProvider({ children }: PropsWithChildren<unknown>) {
           className: twMerge(
             'max-w-md w-full',
             dialogProps?.PaperProps?.className,
+            'z-30',
           ),
         }}
       >
@@ -288,10 +301,11 @@ function DialogProvider({ children }: PropsWithChildren<unknown>) {
         open={drawerOpen}
         onClose={closeDrawerWithDirtyGuard}
         SlideProps={{ onExited: clearDrawerContent, unmountOnExit: false }}
+        className="z-40"
         PaperProps={{
           ...drawerProps?.PaperProps,
           className: twMerge(
-            'max-w-2.5xl w-full',
+            'max-w-4xl w-full',
             drawerProps?.PaperProps?.className,
           ),
         }}

dashboard/src/components/common/DialogProvider/dialogReducers.ts

@@ -115,7 +115,7 @@ export function drawerReducer(
 }
 
 export type AlertDialogAction =
-  | { type: 'OPEN_ALERT'; payload?: DialogConfig }
+  | { type: 'OPEN_ALERT'; payload: DialogConfig }
   | { type: 'HIDE_ALERT' }
   | { type: 'CLEAR_ALERT_CONTENT' };
 

dashboard/src/components/common/IconLink/IconLink.tsx

@@ -24,7 +24,7 @@ function IconLink(
     return (
       <span
         className={twMerge(
-          'grid cursor-default grid-flow-row justify-items-center gap-1 rounded-md py-2.5 px-0.5 text-center text-[10px] font-medium opacity-40',
+          'grid cursor-default grid-flow-row justify-items-center gap-1 rounded-md px-0.5 py-2.5 text-center text-[10px] font-medium opacity-40',
           className,
         )}
       >
@@ -68,7 +68,7 @@ function IconLink(
       href={href}
       underline="none"
       className={twMerge(
-        'grid grid-flow-row justify-items-center gap-1 rounded-md py-2.5 px-0.5 text-center font-medium motion-safe:transition-colors',
+        'grid grid-flow-row justify-items-center gap-1 rounded-md px-0.5 py-2.5 text-center font-medium motion-safe:transition-colors',
         className,
       )}
       sx={{

dashboard/src/components/common/InviteNotification/InviteNotification.tsx

@@ -1,200 +0,0 @@
-import { Box } from '@/components/ui/v2/Box';
-import { Button } from '@/components/ui/v2/Button';
-import { Text } from '@/components/ui/v2/Text';
-import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
-import {
-  GetAllWorkspacesAndProjectsDocument,
-  GetWorkspaceMemberInvitesToManageDocument,
-  useGetWorkspaceMemberInvitesToManageQuery,
-} from '@/generated/graphql';
-import { useSubmitState } from '@/hooks/useSubmitState';
-import { nhost } from '@/utils/nhost';
-import { triggerToast } from '@/utils/toast';
-import { useApolloClient } from '@apollo/client';
-import { alpha } from '@mui/system';
-import { useUserData } from '@nhost/nextjs';
-import { useRouter } from 'next/router';
-import { useEffect } from 'react';
-
-export default function InviteNotification() {
-  const user = useUserData();
-
-  const isPlatform = useIsPlatform();
-  const client = useApolloClient();
-  const router = useRouter();
-  const { submitState, setSubmitState } = useSubmitState();
-  const { submitState: ignoreState, setSubmitState: setIgnoreState } =
-    useSubmitState();
-
-  // @FIX: We probably don't want to poll every ten seconds for possible invites. (We can change later depending on how it works in production.) Maybe just on the workspace page?
-  const {
-    data,
-    loading,
-    error,
-    refetch: refetchInvitations,
-    startPolling,
-  } = useGetWorkspaceMemberInvitesToManageQuery({
-    variables: {
-      userId: user?.id,
-    },
-    skip: !isPlatform || !user,
-  });
-
-  useEffect(() => {
-    startPolling(15000);
-  }, [startPolling]);
-
-  if (loading) {
-    return null;
-  }
-
-  if (error) {
-    // TODO: Throw error instead and wrap this component in an ErrorBoundary
-    // that would handle the error
-    return null;
-  }
-
-  if (!data || data.workspaceMemberInvites.length === 0) {
-    return null;
-  }
-
-  const handleInviteAccept = async (
-    _event: React.SyntheticEvent<HTMLButtonElement>,
-    invite: typeof data.workspaceMemberInvites[number],
-  ) => {
-    setSubmitState({
-      error: null,
-      loading: true,
-    });
-    const { res, error: acceptError } = await nhost.functions.call(
-      '/accept-workspace-invite',
-      {
-        workspaceMemberInviteId: invite.id,
-        isAccepted: true,
-      },
-    );
-
-    if (res?.status !== 200) {
-      triggerToast('An error occurred when trying to accept the invitation.');
-
-      return setSubmitState({
-        error: new Error(acceptError.message),
-        loading: false,
-      });
-    }
-
-    await client.refetchQueries({
-      include: [
-        GetAllWorkspacesAndProjectsDocument,
-        GetWorkspaceMemberInvitesToManageDocument,
-      ],
-    });
-    await router.push(`/${invite.workspace.slug}`);
-    await refetchInvitations();
-    triggerToast('Workspace invite accepted');
-    return setSubmitState({
-      error: null,
-      loading: false,
-    });
-  };
-
-  async function handleIgnoreInvitation(
-    inviteId: typeof data.workspaceMemberInvites[number]['id'],
-  ) {
-    setIgnoreState({
-      loading: true,
-      error: null,
-    });
-
-    const { error: ignoreError } = await nhost.functions.call(
-      '/accept-workspace-invite',
-      {
-        workspaceMemberInviteId: inviteId,
-        isAccepted: false,
-      },
-    );
-
-    if (ignoreError) {
-      triggerToast('An error occurred when trying to ignore the invitation.');
-
-      setIgnoreState({
-        loading: false,
-        error: new Error(ignoreError.message),
-      });
-
-      return;
-    }
-
-    // just refetch all data
-    await client.refetchQueries({
-      include: [
-        GetAllWorkspacesAndProjectsDocument,
-        GetWorkspaceMemberInvitesToManageDocument,
-      ],
-    });
-
-    setIgnoreState({
-      loading: false,
-      error: null,
-    });
-  }
-
-  return (
-    <Box
-      className="absolute right-10 z-50 mt-14 w-workspaceSidebar rounded-lg px-6 py-6 text-left"
-      sx={{
-        backgroundColor: (theme) =>
-          theme.palette.mode === 'dark' ? 'grey.200' : 'grey.700',
-        borderWidth: (theme) => (theme.palette.mode === 'dark' ? 1 : 0),
-        borderColor: (theme) =>
-          theme.palette.mode === 'dark' ? theme.palette.grey[400] : 'none',
-      }}
-    >
-      {data?.workspaceMemberInvites?.map(
-        (invite: typeof data.workspaceMemberInvites[number]) => (
-          <div key={invite.id} className="grid grid-flow-row gap-4 text-center">
-            <div className="grid grid-flow-row gap-1">
-              <Text variant="h3" component="h2" sx={{ color: 'common.white' }}>
-                You have been invited to
-              </Text>
-              <Text variant="h3" component="p" sx={{ color: 'common.white' }}>
-                {invite.workspace.name}
-              </Text>
-            </div>
-
-            <div className="grid grid-flow-row gap-2">
-              <Button
-                onClick={(e: React.SyntheticEvent<HTMLButtonElement>) =>
-                  handleInviteAccept(e, invite)
-                }
-                loading={submitState.loading}
-              >
-                Accept Invite
-              </Button>
-
-              <Button
-                variant="outlined"
-                color="secondary"
-                sx={{
-                  color: 'common.white',
-                  '&:hover': {
-                    backgroundColor: (theme) =>
-                      alpha(theme.palette.common.white, 0.05),
-                  },
-                  '&:focus': {
-                    backgroundColor: (theme) =>
-                      alpha(theme.palette.common.white, 0.1),
-                  },
-                }}
-                onClick={() => handleIgnoreInvitation(invite.id)}
-                loading={ignoreState.loading}
-              >
-                Ignore Invite
-              </Button>
-            </div>
-          </div>
-        ),
-      )}
-    </Box>
-  );
-}

dashboard/src/components/common/InviteNotification/index.ts

@@ -1 +0,0 @@
-export { default as InviteNotification } from './InviteNotification';

dashboard/src/components/common/MfaOtpForm/MfaOtpForm.test.tsx

@@ -0,0 +1,518 @@
+import { render, screen, TestUserEvent, waitFor } from '@/tests/testUtils';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import MfaOtpForm from './MfaOtpForm';
+
+const mocks = vi.hoisted(() => ({
+  toastError: vi.fn(),
+}));
+// Mock react-hot-toast
+vi.mock('react-hot-toast', async () => {
+  const actualToast = await vi.importActual<any>('react-hot-toast');
+  return {
+    ...actualToast,
+    default: {
+      ...actualToast.default,
+      error: mocks.toastError,
+    },
+  };
+});
+
+// Mock the toast style props utility
+vi.mock('@/utils/constants/settings', () => ({
+  getToastStyleProps: vi.fn(() => ({})),
+}));
+
+describe('MfaOtpForm', () => {
+  const mockSendMfaOtp = vi.fn();
+  const mockRequestNewMfaTicket = vi.fn();
+  const user = new TestUserEvent();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.clearAllTimers();
+  });
+
+  const defaultProps = {
+    sendMfaOtp: mockSendMfaOtp,
+    loading: false,
+    requestNewMfaTicket: mockRequestNewMfaTicket,
+  } as any;
+
+  describe('Rendering and Initial State', () => {
+    it('renders with correct initial state', () => {
+      render(<MfaOtpForm {...defaultProps} />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+      const button = screen.getByRole('button', { name: 'Verify' });
+
+      expect(input).toBeInTheDocument();
+      expect(input).toHaveValue('');
+      expect(button).toBeInTheDocument();
+      expect(button).toBeDisabled();
+    });
+
+    it('focuses input on mount', () => {
+      render(<MfaOtpForm {...defaultProps} />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+      expect(input).toHaveFocus();
+    });
+  });
+
+  describe('Input Validation and Formatting', () => {
+    it('only accepts numeric characters', async () => {
+      render(<MfaOtpForm {...defaultProps} />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+      await user.type(input, 'abc123def456');
+
+      expect(input).toHaveValue('123456');
+    });
+
+    it('filters out non-numeric characters in real time', async () => {
+      render(<MfaOtpForm {...defaultProps} />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+      await user.type(input, '1a2b3c');
+
+      expect(input).toHaveValue('123');
+    });
+
+    it('button is disabled when input has fewer than 6 digits', async () => {
+      render(<MfaOtpForm {...defaultProps} />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+      const button = screen.getByRole('button', { name: 'Verify' });
+
+      await user.type(input, '12345');
+      expect(button).toBeDisabled();
+    });
+
+    it('button is enabled when input has exactly 6 digits', async () => {
+      render(<MfaOtpForm {...defaultProps} />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+      const button = screen.getByRole('button', { name: 'Verify' });
+
+      await user.type(input, '123456');
+      expect(button).toBeEnabled();
+    });
+
+    it('button is disabled when input has more than 6 digits', async () => {
+      render(<MfaOtpForm {...defaultProps} />);
+      const input = screen.getByPlaceholderText('Enter TOTP');
+      const button = screen.getByRole('button', { name: 'Verify' });
+
+      await user.type(input, '6123457');
+      expect(button).toBeDisabled();
+    });
+  });
+
+  describe('Loading States', () => {
+    it('disables input and button when loading prop is true', () => {
+      render(<MfaOtpForm {...defaultProps} loading />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+      const button = screen.getByRole('button');
+
+      expect(input).toBeDisabled();
+      expect(button).toBeDisabled();
+      expect(
+        screen.getByRole('button', { name: 'Verifying...' }),
+      ).toBeInTheDocument();
+    });
+
+    it('input and button are disabled during submission', async () => {
+      // Mock sendMfaOtp to return a promise that we can control
+      const promise = new Promise(() => {}); // Never resolves
+      mockSendMfaOtp.mockReturnValue(promise);
+
+      render(<MfaOtpForm {...defaultProps} />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+      const button = screen.getByRole('button', { name: 'Verify' });
+
+      await user.type(input, '123456');
+      await user.click(button);
+
+      expect(input).toBeDisabled();
+      expect(button).toBeDisabled();
+    });
+  });
+
+  describe('Form Submission', () => {
+    it('triggers sendMfaOtp with correct code on button click', async () => {
+      mockSendMfaOtp.mockResolvedValue({ success: true });
+
+      render(<MfaOtpForm {...defaultProps} />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+      const button = screen.getByRole('button', { name: 'Verify' });
+
+      await user.type(input, '123456');
+      await user.click(button);
+
+      expect(mockSendMfaOtp).toHaveBeenCalledWith('123456');
+      expect(mockSendMfaOtp).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not submit when input has fewer than 6 digits', async () => {
+      render(<MfaOtpForm {...defaultProps} />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+      const button = screen.getByRole('button', { name: 'Verify' });
+
+      await user.type(input, '12345');
+      await user.click(button);
+
+      expect(mockSendMfaOtp).not.toHaveBeenCalled();
+    });
+
+    it('does not submit multiple times when already submitting', async () => {
+      let resolvePromise: (value: any) => void;
+      const promise = new Promise((resolve) => {
+        resolvePromise = resolve;
+      });
+      mockSendMfaOtp.mockReturnValue(promise);
+
+      render(<MfaOtpForm {...defaultProps} />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+      const button = screen.getByRole('button', { name: 'Verify' });
+
+      await user.type(input, '123456');
+      await user.click(button);
+      await user.click(button); // Second click should be ignored
+
+      expect(mockSendMfaOtp).toHaveBeenCalledTimes(1);
+
+      // Resolve the promise to clean up
+      resolvePromise!({ success: true });
+      await waitFor(async () => {
+        await promise;
+      });
+    });
+
+    it('manages submission state properly', async () => {
+      let resolvePromise: (value: any) => void;
+      const promise = new Promise((resolve) => {
+        resolvePromise = resolve;
+      });
+      mockSendMfaOtp.mockReturnValue(promise);
+
+      render(<MfaOtpForm {...defaultProps} />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+      const button = screen.getByRole('button', { name: 'Verify' });
+
+      await user.type(input, '123456');
+      await user.click(button);
+
+      // During submission
+      expect(button).toBeDisabled();
+      expect(input).toBeDisabled();
+
+      // Resolve the promise
+      resolvePromise!({ success: true });
+      await waitFor(async () => {
+        await promise;
+      });
+
+      // After submission
+      await waitFor(() => {
+        expect(button).not.toBeDisabled();
+        expect(input).not.toBeDisabled();
+      });
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('displays error toast when sendMfaOtp returns an error', async () => {
+      const errorMessage = 'Invalid TOTP code';
+
+      mockSendMfaOtp.mockRejectedValueOnce({ message: errorMessage });
+
+      render(<MfaOtpForm {...defaultProps} />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+      const button = screen.getByRole('button', { name: 'Verify' });
+
+      await user.type(input, '123456');
+      await user.click(button);
+
+      await waitFor(() => {
+        expect(mocks.toastError).toHaveBeenCalledWith(errorMessage, {});
+      });
+    });
+
+    it('shows generic error message when no specific error message is provided', async () => {
+      mockSendMfaOtp.mockRejectedValueOnce({});
+
+      render(<MfaOtpForm {...defaultProps} />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+      const button = screen.getByRole('button', { name: 'Verify' });
+
+      await user.type(input, '123456');
+      await user.click(button);
+
+      await waitFor(() => {
+        expect(mocks.toastError).toHaveBeenCalledWith(
+          'An error occurred. Please try again.',
+          {},
+        );
+      });
+    });
+
+    it('handles undefined error gracefully', async () => {
+      mockSendMfaOtp.mockResolvedValue({
+        error: undefined,
+      });
+
+      render(<MfaOtpForm {...defaultProps} />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+      const button = screen.getByRole('button', { name: 'Verify' });
+
+      await user.type(input, '123456');
+      await user.click(button);
+
+      // Should not throw an error
+      await waitFor(() => {
+        expect(mockSendMfaOtp).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('MFA Ticket Renewal', () => {
+    it('calls requestNewMfaTicket when ticket is invalid', async () => {
+      // First call - set ticket as invalid
+      mockSendMfaOtp.mockRejectedValueOnce({ message: 'Invalid ticket' });
+      // Second call - should work
+      mockSendMfaOtp.mockResolvedValueOnce({ success: true });
+
+      render(<MfaOtpForm {...defaultProps} />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+      const button = screen.getByRole('button', { name: 'Verify' });
+
+      // First submission - creates error and marks ticket invalid
+      await user.type(input, '123456');
+      await user.click(button);
+
+      await waitFor(() => {
+        expect(mocks.toastError).toHaveBeenCalled();
+      });
+
+      // Clear input and try again
+      await user.clear(input);
+      await user.type(input, '654321');
+      await user.click(button);
+
+      await waitFor(() => {
+        expect(mockRequestNewMfaTicket).toHaveBeenCalled();
+      });
+    });
+
+    it('does not call requestNewMfaTicket on first submission', async () => {
+      mockSendMfaOtp.mockResolvedValue({ success: true });
+
+      render(<MfaOtpForm {...defaultProps} />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+      const button = screen.getByRole('button', { name: 'Verify' });
+
+      await user.type(input, '123456');
+      await user.click(button);
+
+      expect(mockRequestNewMfaTicket).not.toHaveBeenCalled();
+    });
+
+    it('works correctly when requestNewMfaTicket is not provided', async () => {
+      const propsWithoutTicketRenewal = {
+        sendMfaOtp: mockSendMfaOtp,
+        loading: false,
+      } as any;
+
+      mockSendMfaOtp.mockRejectedValueOnce({ message: 'Some error' });
+
+      render(<MfaOtpForm {...propsWithoutTicketRenewal} />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+      const button = screen.getByRole('button', { name: 'Verify' });
+
+      await user.type(input, '123456');
+      await user.click(button);
+
+      // Should not throw an error even without requestNewMfaTicket
+      await waitFor(() => {
+        expect(mocks.toastError).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('User Interactions', () => {
+    it('updates input value correctly when typing', async () => {
+      render(<MfaOtpForm {...defaultProps} />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+
+      await user.type(input, '123');
+      expect(input).toHaveValue('123');
+
+      await user.type(input, '456');
+      expect(input).toHaveValue('123456');
+    });
+
+    it('can clear and retype input value', async () => {
+      render(<MfaOtpForm {...defaultProps} />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+
+      await user.type(input, '123456');
+      expect(input).toHaveValue('123456');
+
+      await user.clear(input);
+      expect(input).toHaveValue('');
+
+      await user.type(input, '654321');
+      expect(input).toHaveValue('654321');
+    });
+
+    it('button triggers submission with valid code', async () => {
+      mockSendMfaOtp.mockResolvedValue({ success: true });
+
+      render(<MfaOtpForm {...defaultProps} />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+      const button = screen.getByRole('button', { name: 'Verify' });
+
+      await user.type(input, '123456');
+      await user.click(button);
+
+      expect(mockSendMfaOtp).toHaveBeenCalledWith('123456');
+    });
+    it('submits form when pressing Enter key with valid code', async () => {
+      mockSendMfaOtp.mockResolvedValue({ success: true });
+
+      render(<MfaOtpForm {...defaultProps} />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+
+      await user.type(input, '123456');
+      await user.type(input, '{Enter}');
+
+      expect(mockSendMfaOtp).toHaveBeenCalledWith('123456');
+      expect(mockSendMfaOtp).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not submit when pressing Enter with invalid code length', async () => {
+      render(<MfaOtpForm {...defaultProps} />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+
+      await user.type(input, '12345');
+      await user.type(input, '{Enter}');
+
+      expect(mockSendMfaOtp).not.toHaveBeenCalled();
+    });
+
+    it('does not submit when pressing Enter while loading', async () => {
+      render(<MfaOtpForm {...defaultProps} loading />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+
+      await user.type(input, '123456');
+      await user.type(input, '{Enter}');
+
+      expect(mockSendMfaOtp).not.toHaveBeenCalled();
+    });
+
+    it('does not submit multiple times when pressing Enter while submitting', async () => {
+      let resolvePromise: (value: any) => void;
+      const promise = new Promise((resolve) => {
+        resolvePromise = resolve;
+      });
+      mockSendMfaOtp.mockReturnValue(promise);
+
+      render(<MfaOtpForm {...defaultProps} />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+
+      await user.type(input, '123456');
+      await user.type(input, '{Enter}');
+      await user.type(input, '{Enter}'); // Second Enter should be ignored
+
+      expect(mockSendMfaOtp).toHaveBeenCalledTimes(1);
+
+      // Clean up
+      resolvePromise!({ success: true });
+      await waitFor(async () => {
+        await promise;
+      });
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles null error message gracefully', async () => {
+      mockSendMfaOtp.mockRejectedValueOnce({ message: null });
+
+      render(<MfaOtpForm {...defaultProps} />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+      const button = screen.getByRole('button', { name: 'Verify' });
+
+      await user.type(input, '123456');
+      await user.click(button);
+
+      await waitFor(() => {
+        expect(mocks.toastError).toHaveBeenCalledWith(
+          'An error occurred. Please try again.',
+          {},
+        );
+      });
+    });
+
+    it('prevents multiple rapid submissions', async () => {
+      let resolvePromise: (value: any) => void;
+      const promise = new Promise((resolve) => {
+        resolvePromise = resolve;
+      });
+      mockSendMfaOtp.mockReturnValue(promise);
+
+      render(<MfaOtpForm {...defaultProps} />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+      const button = screen.getByRole('button', { name: 'Verify' });
+
+      await user.type(input, '123456');
+
+      // Rapid clicks
+      await user.click(button);
+      await user.click(button);
+      await user.click(button);
+
+      expect(mockSendMfaOtp).toHaveBeenCalledTimes(1);
+
+      // Clean up
+      resolvePromise!({ success: true });
+      await waitFor(async () => {
+        await promise;
+      });
+    });
+
+    it('handles empty input correctly', async () => {
+      render(<MfaOtpForm {...defaultProps} />);
+
+      const button = screen.getByRole('button', { name: 'Verify' });
+
+      await user.click(button);
+
+      expect(mockSendMfaOtp).not.toHaveBeenCalled();
+      expect(button).toBeDisabled();
+    });
+  });
+});

dashboard/src/components/common/MfaOtpForm/MfaOtpForm.tsx

@@ -0,0 +1,87 @@
+import { Button } from '@/components/ui/v3/button';
+import { Input } from '@/components/ui/v3/input';
+import { getToastStyleProps } from '@/utils/constants/settings';
+import {
+  useEffect,
+  useRef,
+  useState,
+  type ChangeEvent,
+  type KeyboardEvent,
+} from 'react';
+import toast from 'react-hot-toast';
+
+interface Props {
+  sendMfaOtp: (code: string) => Promise<any>;
+  loading: boolean;
+  requestNewMfaTicket?: () => Promise<void>;
+}
+
+function MfaOtpForm({ sendMfaOtp, loading, requestNewMfaTicket }: Props) {
+  const [otpValue, setOtpValue] = useState<string>('');
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const isMfaTicketInvalid = useRef(false);
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, []);
+
+  async function submitTOTP() {
+    if (otpValue.length === 6 && !isSubmitting) {
+      try {
+        setIsSubmitting(true);
+
+        if (requestNewMfaTicket && isMfaTicketInvalid.current) {
+          await requestNewMfaTicket();
+        }
+        await sendMfaOtp(otpValue);
+      } catch (error) {
+        isMfaTicketInvalid.current = true;
+        toast.error(
+          error?.message || 'An error occurred. Please try again.',
+          getToastStyleProps(),
+        );
+        setTimeout(() => {
+          inputRef.current?.focus();
+        }, 10);
+      } finally {
+        setIsSubmitting(false);
+      }
+    }
+  }
+
+  async function handleChange(event: ChangeEvent<HTMLInputElement>) {
+    const code = event.target.value.replace(/[^0-9]/g, '');
+    setOtpValue(code);
+  }
+
+  async function handleKeyDown(event: KeyboardEvent<HTMLInputElement>) {
+    if (event.key === 'Enter') {
+      submitTOTP();
+    }
+  }
+
+  const isInputDisabled = loading || isSubmitting;
+  const isButtonDisabled = isInputDisabled || otpValue.length !== 6;
+
+  return (
+    <div className="relative grid w-full grid-flow-row gap-4 bg-transparent">
+      <Input
+        ref={inputRef}
+        value={otpValue}
+        placeholder="Enter TOTP"
+        className="!bg-transparent"
+        disabled={isInputDisabled}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+      />
+      <Button disabled={isButtonDisabled} onClick={submitTOTP}>
+        {loading ? 'Verifying...' : 'Verify'}
+      </Button>
+    </div>
+  );
+}
+
+export default MfaOtpForm;

dashboard/src/components/common/MfaOtpForm/index.ts

@@ -0,0 +1 @@
+export { default as MfaOtpForm } from './MfaOtpForm';

dashboard/src/components/common/NavLink/NavLink.tsx

@@ -1,11 +1,13 @@
 import type { LinkProps } from '@/components/ui/v2/Link';
 import { Link } from '@/components/ui/v2/Link';
+import type { MakeRequired } from '@/types/common';
 import NextLink from 'next/link';
 import type { ForwardedRef, PropsWithoutRef } from 'react';
 import { forwardRef } from 'react';
 import { twMerge } from 'tailwind-merge';
 
-export interface NavLinkProps extends PropsWithoutRef<LinkProps> {
+export interface NavLinkProps
+  extends MakeRequired<PropsWithoutRef<LinkProps>, 'href'> {
   /**
    * Determines whether or not the link should be disabled.
    */

dashboard/src/components/common/OpenTransferDialogButton/OpenTransferDialogButton.tsx

@@ -0,0 +1,40 @@
+import { useDialog } from '@/components/common/DialogProvider';
+import { Button } from '@/components/ui/v2/Button';
+import { Text } from '@/components/ui/v2/Text';
+import { useIsCurrentUserOwner } from '@/features/orgs/projects/common/hooks/useIsCurrentUserOwner';
+
+interface Props {
+  buttonText?: string;
+  onClick: () => void;
+}
+
+function OpenTransferDialogButton({ buttonText, onClick }: Props) {
+  const text = buttonText ?? 'Transfer Project';
+  const isOwner = useIsCurrentUserOwner();
+  const { openAlertDialog } = useDialog();
+  const handleClick = () => {
+    if (isOwner) {
+      onClick();
+    } else {
+      openAlertDialog({
+        title: "You can't migrate this project",
+        payload: (
+          <Text variant="subtitle1" component="span">
+            Ask an owner of this organization to migrate the project.
+          </Text>
+        ),
+        props: {
+          secondaryButtonText: 'I understand',
+          hidePrimaryAction: true,
+        },
+      });
+    }
+  };
+  return (
+    <Button className="max-w-xs lg:w-auto" onClick={handleClick}>
+      {text}
+    </Button>
+  );
+}
+
+export default OpenTransferDialogButton;

dashboard/src/components/common/OpenTransferDialogButton/index.ts

@@ -0,0 +1 @@
+export { default as OpenTransferDialogButton } from './OpenTransferDialogButton';

dashboard/src/components/common/Pagination/Pagination.tsx

@@ -19,7 +19,7 @@ export type PaginationProps = DetailedHTMLProps<
   /**
    * Number of total elements per page.
    */
-  elementsPerPage?: number;
+  elementsPerPage: number;
   /**
    * Total number of elements.
    */

dashboard/src/components/common/SelectOrg/SelectOrg.tsx

@@ -0,0 +1,128 @@
+import { RetryableErrorBoundary } from '@/components/presentational/RetryableErrorBoundary';
+import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
+import { Box } from '@/components/ui/v2/Box';
+import { Button } from '@/components/ui/v2/Button';
+import { Input } from '@/components/ui/v2/Input';
+import { List } from '@/components/ui/v2/List';
+import { ListItem } from '@/components/ui/v2/ListItem';
+import { Text } from '@/components/ui/v2/Text';
+import { useOrgs } from '@/features/orgs/projects/hooks/useOrgs';
+import {} from '@/utils/__generated__/graphql';
+import { Divider } from '@mui/material';
+import debounce from 'lodash.debounce';
+import Image from 'next/image';
+import { useRouter } from 'next/router';
+import type { ChangeEvent } from 'react';
+import { Fragment, useEffect, useMemo, useState } from 'react';
+
+export default function SelectOrganizationAndProject() {
+  const { orgs, loading } = useOrgs();
+  const router = useRouter();
+
+  const organizations = orgs.map((org) => ({
+    name: org.name,
+    value: `/orgs/${org.slug}`,
+  }));
+
+  const [filter, setFilter] = useState('');
+
+  const handleFilterChange = useMemo(
+    () =>
+      debounce((event: ChangeEvent<HTMLInputElement>) => {
+        setFilter(event.target.value);
+      }, 200),
+    [],
+  );
+
+  useEffect(() => () => handleFilterChange.cancel(), [handleFilterChange]);
+
+  const goToOrgPage = async (org: { name: string; value: string }) => {
+    const { slug } = router.query;
+    await router.push({
+      pathname: `${org.value}/${(() => {
+        if (!slug) {
+          return '';
+        }
+        return Array.isArray(slug) ? slug.join('/') : slug;
+      })()}`,
+    });
+  };
+
+  const orgsToDisplay = filter
+    ? organizations.filter((org) =>
+        org.name.toLowerCase().includes(filter.toLowerCase()),
+      )
+    : organizations;
+
+  if (loading) {
+    return (
+      <div className="flex w-full justify-center">
+        <ActivityIndicator delay={500} label="Loading organizations..." />
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto flex h-full w-full flex-col items-start bg-background px-5 py-4">
+      <div className="mx-auto flex h-full w-full max-w-[760px] flex-col gap-4 py-6 sm:py-14">
+        <Text variant="h2" component="h1" className="">
+          Select an Organization
+        </Text>
+
+        <div>
+          <div className="mb-2 flex w-full">
+            <Input
+              placeholder="Search..."
+              onChange={handleFilterChange}
+              fullWidth
+              autoFocus
+            />
+          </div>
+          <RetryableErrorBoundary>
+            {orgsToDisplay.length === 0 ? (
+              <Box className="h-import py-2">
+                <Text variant="subtitle2">No results found.</Text>
+              </Box>
+            ) : (
+              <List className="h-import overflow-y-auto">
+                {orgsToDisplay.map((org, index) => (
+                  <Fragment key={org.value}>
+                    <ListItem.Root
+                      className="grid grid-flow-col justify-start gap-2 py-2.5"
+                      secondaryAction={
+                        <Button
+                          variant="borderless"
+                          color="primary"
+                          onClick={() => goToOrgPage(org)}
+                        >
+                          Select
+                        </Button>
+                      }
+                    >
+                      <ListItem.Avatar>
+                        <span className="inline-block h-6 w-6 overflow-hidden rounded-md">
+                          <Image
+                            src="/logos/new.svg"
+                            alt="Nhost Logo"
+                            width={24}
+                            height={24}
+                          />
+                        </span>
+                      </ListItem.Avatar>
+                      <ListItem.Text
+                        primary={org.name}
+                        secondary={`${org.name} / ${org.name}`}
+                      />
+                    </ListItem.Root>
+
+                    {index < orgs.length - 1 && <Divider component="li" />}
+                  </Fragment>
+                ))}
+              </List>
+            )}
+          </RetryableErrorBoundary>
+        </div>
+      </div>
+    </div>
+  );
+}

dashboard/src/components/common/SelectOrg/index.ts

@@ -0,0 +1 @@
+export { default as SelectOrg } from './SelectOrg';

dashboard/src/components/common/SelectOrgAndProject/SelectOrgAndProject.tsx

@@ -1,5 +1,3 @@
-import { AuthenticatedLayout } from '@/components/layout/AuthenticatedLayout';
-import { Container } from '@/components/layout/Container';
 import { RetryableErrorBoundary } from '@/components/presentational/RetryableErrorBoundary';
 import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
 import { Box } from '@/components/ui/v2/Box';
@@ -8,38 +6,23 @@ import { Input } from '@/components/ui/v2/Input';
 import { List } from '@/components/ui/v2/List';
 import { ListItem } from '@/components/ui/v2/ListItem';
 import { Text } from '@/components/ui/v2/Text';
-import {
-  useGetAllWorkspacesAndProjectsQuery,
-  type GetAllWorkspacesAndProjectsQuery,
-} from '@/utils/__generated__/graphql';
+import { useOrgs } from '@/features/orgs/projects/hooks/useOrgs';
 import { Divider } from '@mui/material';
-import { useUserData } from '@nhost/nextjs';
 import debounce from 'lodash.debounce';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
-import type { ChangeEvent, ReactElement } from 'react';
+import type { ChangeEvent } from 'react';
 import { Fragment, useEffect, useMemo, useState } from 'react';
 
-type Workspace = Omit<
-  GetAllWorkspacesAndProjectsQuery['workspaces'][0],
-  '__typename'
->;
-
-export default function SelectWorkspaceAndProject() {
-  const user = useUserData();
+export default function SelectOrganizationAndProject() {
+  const { orgs, loading } = useOrgs();
   const router = useRouter();
 
-  const { data, loading } = useGetAllWorkspacesAndProjectsQuery({
-    skip: !user,
-  });
-
-  const workspaces: Workspace[] = data?.workspaces || [];
-
-  const projects = workspaces.flatMap((workspace) =>
-    workspace.projects.map((project) => ({
-      workspaceName: workspace.name,
-      projectName: project.name,
-      value: `${workspace.slug}/${project.slug}`,
+  const projects = orgs.flatMap((org) =>
+    org.apps.map((app) => ({
+      organizationName: org.name,
+      projectName: app.name,
+      value: `/orgs/${org.slug}/projects/${app.subdomain}`,
     })),
   );
 
@@ -56,16 +39,18 @@ export default function SelectWorkspaceAndProject() {
   useEffect(() => () => handleFilterChange.cancel(), [handleFilterChange]);
 
   const goToProjectPage = async (project: {
-    workspaceName: string;
+    organizationName: string;
     projectName: string;
     value: string;
   }) => {
     const { slug } = router.query;
-
     await router.push({
-      pathname: `/${project.value}/${
-        Array.isArray(slug) ? slug.join('/') : slug
-      }`,
+      pathname: `${project.value}/${(() => {
+        if (!slug) {
+          return '';
+        }
+        return Array.isArray(slug) ? slug.join('/') : slug;
+      })()}`,
     });
   };
 
@@ -80,15 +65,15 @@ export default function SelectWorkspaceAndProject() {
       <div className="flex w-full justify-center">
         <ActivityIndicator
           delay={500}
-          label="Loading workspaces and projects..."
+          label="Loading organizations and projects..."
         />
       </div>
     );
   }
 
   return (
-    <Container>
-      <div className="mx-auto grid max-w-[760px] grid-flow-row gap-4 py-6 sm:py-14">
+    <div className="mx-auto flex h-full w-full flex-col items-start bg-background px-5 py-4">
+      <div className="mx-auto flex h-full w-full max-w-[760px] flex-col gap-4 py-6 sm:py-14">
         <Text variant="h2" component="h1" className="">
           Select a Project
         </Text>
@@ -112,7 +97,7 @@ export default function SelectWorkspaceAndProject() {
                 {projectsToDisplay.map((project, index) => (
                   <Fragment key={project.value}>
                     <ListItem.Root
-                      className="grid grid-flow-col justify-start gap-2  py-2.5"
+                      className="grid grid-flow-col justify-start gap-2 py-2.5"
                       secondaryAction={
                         <Button
                           variant="borderless"
@@ -135,7 +120,7 @@ export default function SelectWorkspaceAndProject() {
                       </ListItem.Avatar>
                       <ListItem.Text
                         primary={project.projectName}
-                        secondary={`${project.workspaceName} / ${project.projectName}`}
+                        secondary={`${project.organizationName} / ${project.projectName}`}
                       />
                     </ListItem.Root>
 
@@ -147,12 +132,6 @@ export default function SelectWorkspaceAndProject() {
           </RetryableErrorBoundary>
         </div>
       </div>
-    </Container>
+    </div>
   );
 }
-
-SelectWorkspaceAndProject.getLayout = function getLayout(page: ReactElement) {
-  return (
-    <AuthenticatedLayout title="Select a Project">{page}</AuthenticatedLayout>
-  );
-};

dashboard/src/components/common/SelectOrgAndProject/index.ts

@@ -0,0 +1,2 @@
+
+export { default as SelectOrgAndProject } from './SelectOrgAndProject';

dashboard/src/components/common/TimePicker/TimePicker.test.tsx

@@ -0,0 +1,104 @@
+import { render, screen, TestUserEvent } from '@/tests/testUtils';
+import { guessTimezone } from '@/utils/timezoneUtils';
+import { TZDate } from '@date-fns/tz';
+import { parseISO } from 'date-fns';
+import { format } from 'date-fns-v4';
+import { useState } from 'react';
+import TimePicker from './TimePicker';
+
+function TestComponent({
+  dateTime,
+  withTimezone,
+}: {
+  dateTime: string;
+  withTimezone?: boolean;
+}) {
+  const [date, setDate] = useState(() => {
+    if (withTimezone) {
+      const tz = guessTimezone();
+      return new TZDate(dateTime, tz);
+    }
+    return parseISO(dateTime);
+  });
+
+  return (
+    <>
+      <h1>Time: {format(date, 'HH:mm:ss')}</h1>
+      <h1>Date class: {date instanceof TZDate ? 'TZDate' : 'Date'}</h1>
+      <TimePicker date={date} setDate={setDate} />
+    </>
+  );
+}
+describe('TimePicker', () => {
+  test('Updates only the hour of the date object', async () => {
+    render(<TestComponent dateTime="2025-03-10T03:00:05" />);
+    expect(await screen.getByText(/Time:/i)).toHaveTextContent(
+      'Time: 03:00:05',
+    );
+    const user = new TestUserEvent();
+    const hoursInput = await screen.getByLabelText('Hours');
+    await user.type(hoursInput, '18');
+    expect(await screen.getByText(/Time:/i)).toHaveTextContent(
+      'Time: 18:00:05',
+    );
+  });
+
+  test('only valid hours(0-23), minutes(0-59) and seconds(0-59) are allowed', async () => {
+    render(<TestComponent dateTime="2025-03-10T03:00:05" />);
+    const user = new TestUserEvent();
+    const hoursInput = await screen.getByLabelText('Hours');
+    await user.type(hoursInput, '30');
+    expect(await screen.getByText(/Time:/i)).toHaveTextContent(
+      'Time: 23:00:05',
+    );
+    const minutesInput = await screen.getByLabelText('Minutes');
+    await user.type(minutesInput, '66');
+    expect(await screen.getByText(/Time:/i)).toHaveTextContent(
+      'Time: 23:59:05',
+    );
+  });
+
+  test('Updates only the minutes of the date object', async () => {
+    render(<TestComponent dateTime="2025-03-10T03:00:05" />);
+    const user = new TestUserEvent();
+    const minutesInput = await screen.getByLabelText('Minutes');
+    await user.type(minutesInput, '44');
+    expect(await screen.getByText(/Time:/i)).toHaveTextContent(
+      'Time: 03:44:05',
+    );
+  });
+
+  test('Updates only the seconds of the date object', async () => {
+    render(<TestComponent dateTime="2025-03-10T03:00:05" />);
+    const user = new TestUserEvent();
+    const secondsInput = await screen.getByLabelText('Seconds');
+    await user.type(secondsInput, '11');
+    expect(await screen.getByText(/Time:/i)).toHaveTextContent(
+      'Time: 03:00:11',
+    );
+  });
+
+  test("will preserve the date's class after changing the date", async () => {
+    render(<TestComponent dateTime="2025-03-10T03:00:05" withTimezone />);
+    expect(await screen.getByText(/Date class:/i)).toHaveTextContent(
+      'Date class: TZDate',
+    );
+    const user = new TestUserEvent();
+
+    const hoursInput = await screen.getByLabelText('Hours');
+    await user.type(hoursInput, '18');
+    expect(await screen.getByText(/Date class:/i)).toHaveTextContent(
+      'Date class: TZDate',
+    );
+    const secondsInput = await screen.getByLabelText('Seconds');
+    await user.type(secondsInput, '11');
+    expect(await screen.getByText(/Date class:/i)).toHaveTextContent(
+      'Date class: TZDate',
+    );
+    const minutesInput = await screen.getByLabelText('Minutes');
+    await user.type(minutesInput, '44');
+    expect(await screen.getByText(/Date class:/i)).toHaveTextContent(
+      'Date class: TZDate',
+    );
+  });
+});

dashboard/src/components/common/TimePicker/TimePicker.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import { Label } from '@/components/ui/v3/label';
+import { Clock } from 'lucide-react';
+import * as React from 'react';
+import { TimePickerInput } from './TimePickerInput';
+
+interface TimePickerProps {
+  date: Date | undefined;
+  setDate: (date: Date) => void;
+}
+
+function TimePicker({ date, setDate }: TimePickerProps) {
+  const minuteRef = React.useRef<HTMLInputElement>(null);
+  const hourRef = React.useRef<HTMLInputElement>(null);
+  const secondRef = React.useRef<HTMLInputElement>(null);
+
+  return (
+    <div className="flex items-end gap-2">
+      <div className="grid gap-1 text-center">
+        <Label htmlFor="hours" className="text-xs">
+          Hours
+        </Label>
+        <TimePickerInput
+          picker="hours"
+          date={date}
+          setDate={setDate}
+          ref={hourRef}
+          onRightFocus={() => minuteRef.current?.focus()}
+        />
+      </div>
+      <div className="grid gap-1 text-center">
+        <Label htmlFor="minutes" className="text-xs">
+          Minutes
+        </Label>
+        <TimePickerInput
+          picker="minutes"
+          date={date}
+          setDate={setDate}
+          ref={minuteRef}
+          onLeftFocus={() => hourRef.current?.focus()}
+          onRightFocus={() => secondRef.current?.focus()}
+        />
+      </div>
+      <div className="grid gap-1 text-center">
+        <Label htmlFor="seconds" className="text-xs">
+          Seconds
+        </Label>
+        <TimePickerInput
+          picker="seconds"
+          date={date}
+          setDate={setDate}
+          ref={secondRef}
+          onLeftFocus={() => minuteRef.current?.focus()}
+        />
+      </div>
+      <div className="flex h-10 items-center">
+        <Clock className="ml-2 h-4 w-4" />
+      </div>
+    </div>
+  );
+}
+
+export default TimePicker;

dashboard/src/components/common/TimePicker/TimePickerInput.tsx

@@ -0,0 +1,148 @@
+import { Input } from '@/components/ui/v3/input';
+
+import { cn } from '@/lib/utils';
+import React from 'react';
+import {
+  copyDate,
+  getArrowByType,
+  getDateByType,
+  setDateByType,
+  type Period,
+  type TimePickerType,
+} from './time-picker-utils';
+
+export interface TimePickerInputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  picker: TimePickerType;
+  date: Date | undefined;
+  setDate: (date: Date) => void;
+  period?: Period;
+  onRightFocus?: () => void;
+  onLeftFocus?: () => void;
+}
+
+const TimePickerInput = React.forwardRef<
+  HTMLInputElement,
+  TimePickerInputProps
+>(
+  (
+    {
+      className,
+      type = 'tel',
+      value,
+      id,
+      name,
+      date = new Date(new Date().setHours(0, 0, 0, 0)),
+      setDate,
+      onChange,
+      onKeyDown,
+      picker,
+      period,
+      onLeftFocus,
+      onRightFocus,
+      ...props
+    },
+    ref,
+  ) => {
+    const [flag, setFlag] = React.useState<boolean>(false);
+    const [prevIntKey, setPrevIntKey] = React.useState<string>('0');
+
+    /**
+     * allow the user to enter the second digit within 2 seconds
+     * otherwise start again with entering first digit
+     */
+    // eslint-disable-next-line consistent-return
+    React.useEffect(() => {
+      if (flag) {
+        const timer = setTimeout(() => {
+          setFlag(false);
+        }, 2000);
+
+        return () => clearTimeout(timer);
+      }
+    }, [flag]);
+
+    const calculatedValue = React.useMemo(
+      () => getDateByType(date, picker),
+      [date, picker],
+    );
+
+    const calculateNewValue = (key: string) => {
+      /*
+       * If picker is '12hours' and the first digit is 0, then the second digit is automatically set to 1.
+       * The second entered digit will break the condition and the value will be set to 10-12.
+       */
+      if (picker === '12hours') {
+        if (flag && calculatedValue.slice(1, 2) === '1' && prevIntKey === '0') {
+          return `0${key}`;
+        }
+      }
+
+      return !flag ? `0${key}` : calculatedValue.slice(1, 2) + key;
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Tab') {
+        return;
+      }
+      e.preventDefault();
+      if (e.key === 'ArrowRight') {
+        onRightFocus?.();
+      }
+      if (e.key === 'ArrowLeft') {
+        onLeftFocus?.();
+      }
+      if (['ArrowUp', 'ArrowDown'].includes(e.key)) {
+        const step = e.key === 'ArrowUp' ? 1 : -1;
+        const newValue = getArrowByType(calculatedValue, step, picker);
+        if (flag) {
+          setFlag(false);
+        }
+
+        const tempDate = copyDate(date);
+        setDate(setDateByType(tempDate, newValue, picker, period));
+      }
+      if (e.key >= '0' && e.key <= '9') {
+        if (picker === '12hours') {
+          setPrevIntKey(e.key);
+        }
+
+        const newValue = calculateNewValue(e.key);
+        if (flag) {
+          onRightFocus?.();
+        }
+        setFlag((prev) => !prev);
+        const tempDate = copyDate(date);
+        setDate(setDateByType(tempDate, newValue, picker, period));
+      }
+    };
+
+    return (
+      <Input
+        ref={ref}
+        id={id || picker}
+        name={name || picker}
+        className={cn(
+          'w-[48px] text-center font-mono text-base tabular-nums focus:bg-accent focus:text-accent-foreground [&::-webkit-inner-spin-button]:appearance-none',
+          className,
+        )}
+        value={value || calculatedValue}
+        onChange={(e) => {
+          e.preventDefault();
+          onChange?.(e);
+        }}
+        type={type}
+        inputMode="decimal"
+        onKeyDown={(e) => {
+          onKeyDown?.(e);
+          handleKeyDown(e);
+        }}
+        {...props}
+      />
+    );
+  },
+);
+
+TimePickerInput.displayName = 'TimePickerInput';
+
+export { TimePickerInput };

dashboard/src/components/common/TimePicker/index.ts

@@ -0,0 +1 @@
+export { default as TimePicker } from './TimePicker';

dashboard/src/components/common/TimePicker/time-picker-utils.test.ts

@@ -0,0 +1,336 @@
+import { vi } from 'vitest';
+import {
+  convert12HourTo24Hour,
+  display12HourValue,
+  getArrowByType,
+  getDateByType,
+  getValid12Hour,
+  getValidArrow12Hour,
+  getValidArrowHour,
+  getValidArrowMinuteOrSecond,
+  getValidArrowNumber,
+  getValidHour,
+  getValidMinuteOrSecond,
+  getValidNumber,
+  isValid12Hour,
+  isValidHour,
+  isValidMinuteOrSecond,
+  set12Hours,
+  setDateByType,
+  setHours,
+  setMinutes,
+  setSeconds,
+  type TimePickerType,
+} from './time-picker-utils';
+
+// Mock TZDate if needed
+vi.mock('@date-fns/tz', () => ({
+  TZDate: class MockTZDate extends Date {
+    timeZone: string;
+
+    constructor(date: string | Date, timeZone: string) {
+      super(date);
+      this.timeZone = timeZone;
+    }
+  },
+}));
+
+describe('time-picker-utils', () => {
+  describe('validation functions', () => {
+    test('isValidHour validates hour format correctly', () => {
+      // Valid hours
+      expect(isValidHour('00')).toBe(true);
+      expect(isValidHour('01')).toBe(true);
+      expect(isValidHour('12')).toBe(true);
+      expect(isValidHour('23')).toBe(true);
+
+      // Invalid hours
+      expect(isValidHour('24')).toBe(false);
+      expect(isValidHour('-1')).toBe(false);
+      expect(isValidHour('1')).toBe(false); // not padded
+      expect(isValidHour('ab')).toBe(false);
+    });
+
+    test('isValid12Hour validates 12-hour format correctly', () => {
+      // Valid 12-hour values
+      expect(isValid12Hour('01')).toBe(true);
+      expect(isValid12Hour('09')).toBe(true);
+      expect(isValid12Hour('12')).toBe(true);
+
+      // Invalid 12-hour values
+      expect(isValid12Hour('00')).toBe(false);
+      expect(isValid12Hour('13')).toBe(false);
+      expect(isValid12Hour('1')).toBe(false); // not padded
+      expect(isValid12Hour('ab')).toBe(false);
+    });
+
+    test('isValidMinuteOrSecond validates minute/second format correctly', () => {
+      // Valid minutes/seconds
+      expect(isValidMinuteOrSecond('00')).toBe(true);
+      expect(isValidMinuteOrSecond('01')).toBe(true);
+      expect(isValidMinuteOrSecond('30')).toBe(true);
+      expect(isValidMinuteOrSecond('59')).toBe(true);
+
+      // Invalid minutes/seconds
+      expect(isValidMinuteOrSecond('60')).toBe(false);
+      expect(isValidMinuteOrSecond('-1')).toBe(false);
+      expect(isValidMinuteOrSecond('1')).toBe(false); // not padded
+      expect(isValidMinuteOrSecond('ab')).toBe(false);
+    });
+  });
+
+  describe('number validation and correction functions', () => {
+    test('getValidNumber handles number validation correctly', () => {
+      // Basic validation
+      expect(getValidNumber('5', { max: 10 })).toBe('05');
+      expect(getValidNumber('15', { max: 10 })).toBe('10');
+      expect(getValidNumber('-1', { max: 10, min: 0 })).toBe('00');
+
+      // With looping
+      expect(getValidNumber('15', { max: 10, min: 0, loop: true })).toBe('00');
+      expect(getValidNumber('-1', { max: 10, min: 0, loop: true })).toBe('10');
+
+      // Invalid input
+      expect(getValidNumber('abc', { max: 10 })).toBe('00');
+    });
+
+    test('getValidHour returns valid 24-hour format', () => {
+      expect(getValidHour('12')).toBe('12');
+      expect(getValidHour('23')).toBe('23');
+      expect(getValidHour('24')).toBe('23'); // Capped at 23
+      expect(getValidHour('-1')).toBe('00'); // Min is 0
+      expect(getValidHour('abc')).toBe('00'); // Invalid input
+    });
+
+    test('getValid12Hour returns valid 12-hour format', () => {
+      // expect(getValid12Hour('06')).toBe('06');
+      // expect(getValid12Hour('12')).toBe('12');
+      expect(getValid12Hour('00')).toBe('01'); // Min is 1
+      expect(getValid12Hour('13')).toBe('12'); // Capped at 12
+      expect(getValid12Hour('abc')).toBe('00'); // Invalid input defaults to 00
+    });
+
+    test('getValidMinuteOrSecond returns valid minute/second format', () => {
+      expect(getValidMinuteOrSecond('30')).toBe('30');
+      expect(getValidMinuteOrSecond('59')).toBe('59');
+      expect(getValidMinuteOrSecond('60')).toBe('59'); // Capped at 59
+      expect(getValidMinuteOrSecond('-1')).toBe('00'); // Min is 0
+      expect(getValidMinuteOrSecond('abc')).toBe('00'); // Invalid input
+    });
+  });
+
+  describe('arrow navigation functions', () => {
+    test('getValidArrowNumber handles arrow navigation with looping', () => {
+      // Incrementing
+      expect(getValidArrowNumber('05', { min: 0, max: 10, step: 1 })).toBe(
+        '06',
+      );
+      expect(getValidArrowNumber('10', { min: 0, max: 10, step: 1 })).toBe(
+        '00',
+      ); // Loops back to min
+
+      // Decrementing
+      expect(getValidArrowNumber('05', { min: 0, max: 10, step: -1 })).toBe(
+        '04',
+      );
+      expect(getValidArrowNumber('00', { min: 0, max: 10, step: -1 })).toBe(
+        '10',
+      ); // Loops to max
+
+      // Invalid input
+      expect(getValidArrowNumber('abc', { min: 0, max: 10, step: 1 })).toBe(
+        '00',
+      );
+    });
+
+    test('getValidArrowHour handles hour navigation correctly', () => {
+      expect(getValidArrowHour('05', 1)).toBe('06');
+      expect(getValidArrowHour('23', 1)).toBe('00'); // Loops to 0
+      expect(getValidArrowHour('00', -1)).toBe('23'); // Loops to 23
+    });
+
+    test('getValidArrow12Hour handles 12-hour navigation correctly', () => {
+      expect(getValidArrow12Hour('05', 1)).toBe('06');
+      expect(getValidArrow12Hour('12', 1)).toBe('01'); // Loops to 1
+      expect(getValidArrow12Hour('01', -1)).toBe('12'); // Loops to 12
+    });
+
+    test('getValidArrowMinuteOrSecond handles minute/second navigation correctly', () => {
+      expect(getValidArrowMinuteOrSecond('30', 1)).toBe('31');
+      expect(getValidArrowMinuteOrSecond('59', 1)).toBe('00'); // Loops to 0
+      expect(getValidArrowMinuteOrSecond('00', -1)).toBe('59'); // Loops to 59
+    });
+  });
+
+  describe('date manipulation functions', () => {
+    test('setMinutes sets minutes correctly on a Date object', () => {
+      const date = new Date(2023, 0, 1, 12, 0, 0);
+      setMinutes(date, '30');
+      expect(date.getMinutes()).toBe(30);
+
+      // Invalid values are corrected
+      setMinutes(date, '60');
+      expect(date.getMinutes()).toBe(59);
+    });
+
+    test('setSeconds sets seconds correctly on a Date object', () => {
+      const date = new Date(2023, 0, 1, 12, 30, 0);
+      setSeconds(date, '45');
+      expect(date.getSeconds()).toBe(45);
+
+      // Invalid values are corrected
+      setSeconds(date, '60');
+      expect(date.getSeconds()).toBe(59);
+    });
+
+    test('setHours sets hours correctly on a Date object', () => {
+      const date = new Date(2023, 0, 1, 12, 30, 0);
+      setHours(date, '14');
+      expect(date.getHours()).toBe(14);
+
+      // Invalid values are corrected
+      setHours(date, '24');
+      expect(date.getHours()).toBe(23);
+    });
+
+    test('convert12HourTo24Hour converts 12-hour to 24-hour format correctly', () => {
+      // AM conversions
+      expect(convert12HourTo24Hour(1, 'AM')).toBe(1);
+      expect(convert12HourTo24Hour(11, 'AM')).toBe(11);
+      expect(convert12HourTo24Hour(12, 'AM')).toBe(0); // 12 AM is 00:00
+
+      // PM conversions
+      expect(convert12HourTo24Hour(1, 'PM')).toBe(13);
+      expect(convert12HourTo24Hour(11, 'PM')).toBe(23);
+      expect(convert12HourTo24Hour(12, 'PM')).toBe(12); // 12 PM is 12:00
+    });
+
+    test('set12Hours sets 12-hour format correctly on a Date object', () => {
+      const date = new Date(2023, 0, 1, 0, 0, 0);
+
+      // Morning hours (AM)
+      set12Hours(date, '09', 'AM');
+      expect(date.getHours()).toBe(9);
+
+      // 12 AM
+      set12Hours(date, '12', 'AM');
+      expect(date.getHours()).toBe(0);
+
+      // Afternoon/evening hours (PM)
+      set12Hours(date, '03', 'PM');
+      expect(date.getHours()).toBe(15);
+
+      // 12 PM
+      set12Hours(date, '12', 'PM');
+      expect(date.getHours()).toBe(12);
+    });
+
+    test('display12HourValue converts 24-hour to 12-hour display format', () => {
+      expect(display12HourValue(0)).toBe('12'); // 00:00 -> 12 AM
+      expect(display12HourValue(1)).toBe('01'); // 01:00 -> 1 AM
+      expect(display12HourValue(11)).toBe('11'); // 11:00 -> 11 AM
+      expect(display12HourValue(12)).toBe('12'); // 12:00 -> 12 PM
+      expect(display12HourValue(13)).toBe('01'); // 13:00 -> 1 PM
+      expect(display12HourValue(23)).toBe('11'); // 23:00 -> 11 PM
+      expect(display12HourValue(22)).toBe('10'); // 22:00 -> 10 PM
+    });
+  });
+  describe('integrated date manipulation functions', () => {
+    test('getDateByType returns date component according to the picker type', () => {
+      const date = new Date(2023, 0, 1, 14, 30, 45);
+
+      // Test hours
+      expect(getDateByType(date, 'hours')).toBe('14');
+
+      // Test minutes
+      expect(getDateByType(date, 'minutes')).toBe('30');
+
+      // Test seconds
+      expect(getDateByType(date, 'seconds')).toBe('45');
+
+      // Test 12-hour format
+      expect(getDateByType(date, '12hours')).toBe('02'); // 14:00 -> 2 PM
+
+      // Test 12 noon and midnight special cases
+      const noon = new Date(2023, 0, 1, 12, 0, 0);
+      expect(getDateByType(noon, '12hours')).toBe('12');
+
+      const midnight = new Date(2023, 0, 1, 0, 0, 0);
+      expect(getDateByType(midnight, '12hours')).toBe('12');
+
+      // Test with invalid picker type
+      expect(getDateByType(date, 'invalid' as TimePickerType)).toBe('00');
+    });
+
+    test('getArrowByType handles arrow navigation based on picker type', () => {
+      // Test hours
+      expect(getArrowByType('14', 1, 'hours')).toBe('15');
+      expect(getArrowByType('23', 1, 'hours')).toBe('00'); // Loops back to 00
+
+      // Test minutes
+      expect(getArrowByType('30', 1, 'minutes')).toBe('31');
+      expect(getArrowByType('59', 1, 'minutes')).toBe('00'); // Loops back to 00
+
+      // Test seconds
+      expect(getArrowByType('45', 1, 'seconds')).toBe('46');
+      expect(getArrowByType('59', 1, 'seconds')).toBe('00'); // Loops back to 00
+
+      // Test 12-hour format
+      expect(getArrowByType('09', 1, '12hours')).toBe('10');
+      expect(getArrowByType('12', 1, '12hours')).toBe('01'); // Loops back to 01
+
+      // Test with invalid picker type
+      expect(getArrowByType('14', 1, 'invalid' as TimePickerType)).toBe('00');
+    });
+
+    test('setDateByType updates date according to the picker type', () => {
+      const date = new Date(2023, 0, 1, 12, 30, 45);
+
+      // Test updating hours
+      const hourDate = setDateByType(date, '14', 'hours');
+      expect(hourDate.getHours()).toBe(14);
+      expect(hourDate.getMinutes()).toBe(30); // Other fields unchanged
+      expect(hourDate.getSeconds()).toBe(45); // Other fields unchanged
+
+      // Test updating minutes
+      const minuteDate = setDateByType(date, '15', 'minutes');
+      expect(minuteDate.getHours()).toBe(14); // Other fields unchanged
+      expect(minuteDate.getMinutes()).toBe(15);
+      expect(minuteDate.getSeconds()).toBe(45); // Other fields unchanged
+
+      // Test updating seconds
+      const secondDate = setDateByType(date, '20', 'seconds');
+      expect(secondDate.getHours()).toBe(14); // Other fields unchanged
+      expect(secondDate.getMinutes()).toBe(15); // Other fields unchanged
+      expect(secondDate.getSeconds()).toBe(20);
+
+      // Test updating 12-hour format with AM
+      const amDate = setDateByType(date, '09', '12hours', 'AM');
+      expect(amDate.getHours()).toBe(9);
+
+      // Test updating 12-hour format with PM
+      const pmDate = setDateByType(date, '09', '12hours', 'PM');
+      expect(pmDate.getHours()).toBe(21);
+
+      // Test 12 AM (midnight)
+      const midnightDate = setDateByType(date, '12', '12hours', 'AM');
+      expect(midnightDate.getHours()).toBe(0);
+
+      // Test 12 PM (noon)
+      const noonDate = setDateByType(date, '12', '12hours', 'PM');
+      expect(noonDate.getHours()).toBe(12);
+
+      // Test with missing period for 12-hour format
+      const missingPeriodDate = setDateByType(date, '09', '12hours');
+      expect(missingPeriodDate).toBe(date); // Should return original date unchanged
+
+      // Test with invalid picker type
+      const invalidTypeDate = setDateByType(
+        date,
+        '14',
+        'invalid' as TimePickerType,
+      );
+      expect(invalidTypeDate).toBe(date); // Should return original date unchanged
+    });
+  });
+});

dashboard/src/components/common/TimePicker/time-picker-utils.ts

@@ -0,0 +1,244 @@
+import { TZDate } from '@date-fns/tz';
+
+/**
+ * regular expression to check for valid hour format (01-23)
+ */
+export function isValidHour(value: string) {
+  return /^(0[0-9]|1[0-9]|2[0-3])$/.test(value);
+}
+
+/**
+ * regular expression to check for valid 12 hour format (01-12)
+ */
+export function isValid12Hour(value: string) {
+  return /^(0[1-9]|1[0-2])$/.test(value);
+}
+
+/**
+ * regular expression to check for valid minute format (00-59)
+ */
+export function isValidMinuteOrSecond(value: string) {
+  return /^[0-5][0-9]$/.test(value);
+}
+
+type GetValidNumberConfig = { max: number; min?: number; loop?: boolean };
+
+export function getValidNumber(
+  value: string,
+  { max, min = 0, loop = false }: GetValidNumberConfig,
+) {
+  let numericValue = parseInt(value, 10);
+
+  if (!Number.isNaN(numericValue)) {
+    if (!loop) {
+      if (numericValue > max) {
+        numericValue = max;
+      }
+      if (numericValue < min) {
+        numericValue = min;
+      }
+    } else {
+      if (numericValue > max) {
+        numericValue = min;
+      }
+      if (numericValue < min) {
+        numericValue = max;
+      }
+    }
+    return numericValue.toString().padStart(2, '0');
+  }
+
+  return '00';
+}
+
+export function getValidHour(value: string) {
+  if (isValidHour(value)) {
+    return value;
+  }
+  return getValidNumber(value, { max: 23 });
+}
+
+export function getValid12Hour(value: string) {
+  if (isValid12Hour(value)) {
+    return value;
+  }
+  return getValidNumber(value, { min: 1, max: 12 });
+}
+
+export function getValidMinuteOrSecond(value: string) {
+  if (isValidMinuteOrSecond(value)) {
+    return value;
+  }
+  return getValidNumber(value, { max: 59 });
+}
+
+type GetValidArrowNumberConfig = {
+  min: number;
+  max: number;
+  step: number;
+};
+
+export function getValidArrowNumber(
+  value: string,
+  { min, max, step }: GetValidArrowNumberConfig,
+) {
+  let numericValue = parseInt(value, 10);
+  if (!Number.isNaN(numericValue)) {
+    numericValue += step;
+    return getValidNumber(String(numericValue), { min, max, loop: true });
+  }
+  return '00';
+}
+
+export function getValidArrowHour(value: string, step: number) {
+  return getValidArrowNumber(value, { min: 0, max: 23, step });
+}
+
+export function getValidArrow12Hour(value: string, step: number) {
+  return getValidArrowNumber(value, { min: 1, max: 12, step });
+}
+
+export function getValidArrowMinuteOrSecond(value: string, step: number) {
+  return getValidArrowNumber(value, { min: 0, max: 59, step });
+}
+
+export function setMinutes(date: Date, value: string) {
+  const minutes = getValidMinuteOrSecond(value);
+  date.setMinutes(parseInt(minutes, 10));
+  return date;
+}
+
+export function setSeconds(date: Date, value: string) {
+  const seconds = getValidMinuteOrSecond(value);
+  date.setSeconds(parseInt(seconds, 10));
+  return date;
+}
+
+export function setHours(date: Date, value: string) {
+  const hours = getValidHour(value);
+  date.setHours(parseInt(hours, 10));
+  return date;
+}
+
+/**
+ * handles value change of 12-hour input
+ * 12:00 PM is 12:00
+ * 12:00 AM is 00:00
+ */
+export function convert12HourTo24Hour(hour: number, period: Period) {
+  if (period === 'PM') {
+    if (hour <= 11) {
+      return hour + 12;
+    }
+    return hour;
+  }
+  if (period === 'AM') {
+    if (hour === 12) {
+      return 0;
+    }
+    return hour;
+  }
+  return hour;
+}
+
+export function set12Hours(date: Date, value: string, period: Period) {
+  const hours = parseInt(getValid12Hour(value), 10);
+  const convertedHours = convert12HourTo24Hour(hours, period);
+  date.setHours(convertedHours);
+  return date;
+}
+
+export type TimePickerType = 'minutes' | 'seconds' | 'hours' | '12hours';
+export type Period = 'AM' | 'PM';
+
+export function setDateByType(
+  date: Date,
+  value: string,
+  type: TimePickerType,
+  period?: Period,
+) {
+  switch (type) {
+    case 'minutes':
+      return setMinutes(date, value);
+    case 'seconds':
+      return setSeconds(date, value);
+    case 'hours':
+      return setHours(date, value);
+    case '12hours': {
+      if (!period) {
+        return date;
+      }
+      return set12Hours(date, value, period);
+    }
+    default:
+      return date;
+  }
+}
+
+/**
+ * time is stored in the 24-hour form,
+ * but needs to be displayed to the user
+ * in its 12-hour representation
+ */
+export function display12HourValue(hours: number) {
+  if (hours === 0 || hours === 12) {
+    return '12';
+  }
+  if (hours >= 22) {
+    return `${hours - 12}`;
+  }
+  if (hours % 12 > 9) {
+    return `${hours}`;
+  }
+  return `0${hours % 12}`;
+}
+
+export function getDateByType(date: Date, type: TimePickerType) {
+  switch (type) {
+    case 'minutes':
+      return getValidMinuteOrSecond(String(date.getMinutes()));
+    case 'seconds':
+      return getValidMinuteOrSecond(String(date.getSeconds()));
+    case 'hours':
+      return getValidHour(String(date.getHours()));
+    case '12hours': {
+      const hours = display12HourValue(date.getHours());
+      return getValid12Hour(String(hours));
+    }
+    default:
+      return '00';
+  }
+}
+
+export function getArrowByType(
+  value: string,
+  step: number,
+  type: TimePickerType,
+) {
+  switch (type) {
+    case 'minutes':
+      return getValidArrowMinuteOrSecond(value, step);
+    case 'seconds':
+      return getValidArrowMinuteOrSecond(value, step);
+    case 'hours':
+      return getValidArrowHour(value, step);
+    case '12hours':
+      return getValidArrow12Hour(value, step);
+    default:
+      return '00';
+  }
+}
+
+export function isTZDate(date: Date | TZDate): date is TZDate {
+  return date instanceof TZDate;
+}
+
+export function copyDate(date: Date | TZDate) {
+  if (isTZDate(date)) {
+    const { timeZone } = date;
+    const dateTime = date.toISOString();
+    return new TZDate(dateTime, timeZone);
+  }
+
+  return new Date(date);
+}

dashboard/src/components/common/TimezonePicker/TimezonePicker.tsx

@@ -0,0 +1,56 @@
+import { VirtualizedCombobox } from '@/components/common/VirtualizedCombobox';
+import { createTimezoneOptions } from '@/utils/timezoneUtils';
+import { memo, useMemo } from 'react';
+
+interface Props {
+  selectedTimezone: string;
+  onTimezoneSelect: (timezone: { value: string; label: string }) => void;
+  button?: React.JSX.Element;
+  dateTime: string;
+}
+
+function getOrderedTimezones(dateTime: string, selectedTimezone: string) {
+  const [utcTimezone, browserTimezone, ...timezones] =
+    createTimezoneOptions(dateTime);
+  let orderedTimezones = [...timezones];
+  if (
+    selectedTimezone !== browserTimezone.value &&
+    selectedTimezone !== 'UTC'
+  ) {
+    const selectedTimezoneOption = timezones.find(
+      (tz) => tz.value === selectedTimezone,
+    )!;
+    orderedTimezones = [
+      selectedTimezoneOption,
+      ...timezones.filter((tz) => tz.value !== selectedTimezone),
+    ];
+  }
+
+  return [utcTimezone, browserTimezone, ...orderedTimezones];
+}
+
+function TimezonePicker({
+  selectedTimezone,
+  onTimezoneSelect,
+  button,
+  dateTime,
+}: Props) {
+  const timezoneOptions = useMemo(
+    () => getOrderedTimezones(dateTime, selectedTimezone),
+    [dateTime, selectedTimezone],
+  );
+
+  return (
+    <VirtualizedCombobox
+      options={timezoneOptions}
+      selectedOption={selectedTimezone}
+      onSelectOption={onTimezoneSelect}
+      searchPlaceholder="Search timezones..."
+      button={button}
+      side="right"
+      width="370px"
+    />
+  );
+}
+
+export default memo(TimezonePicker);

dashboard/src/components/common/TimezonePicker/index.ts

@@ -0,0 +1 @@
+export { default as TimezonePicker } from './TimezonePicker';

dashboard/src/components/common/UIProvider/UIContext.ts

@@ -8,7 +8,7 @@ export interface UIContextProps {
   /**
    * The date and time when maintenance mode will end.
    */
-  maintenanceEndDate: Date;
+  maintenanceEndDate: Date | null;
 }
 
 const UIContext = createContext<UIContextProps>({

dashboard/src/components/common/UpgradeToProBanner/UpgradeToProBanner.tsx

@@ -1,12 +1,12 @@
-import { useDialog } from '@/components/common/DialogProvider';
 import { NhostIcon } from '@/components/presentational/NhostIcon';
 import { Box } from '@/components/ui/v2/Box';
-import { Button } from '@/components/ui/v2/Button';
 import { ArrowSquareOutIcon } from '@/components/ui/v2/icons/ArrowSquareOutIcon';
 import { Link } from '@/components/ui/v2/Link';
 import { Text } from '@/components/ui/v2/Text';
-import { ChangePlanModal } from '@/features/projects/common/components/ChangePlanModal';
-import { useIsCurrentUserOwner } from '@/features/projects/common/hooks/useIsCurrentUserOwner';
+import { TransferProjectDialog } from '@/features/orgs/components/common/TransferProjectDialog';
+import { useState } from 'react';
+
+import { OpenTransferDialogButton } from '@/components/common/OpenTransferDialogButton';
 
 import Image from 'next/image';
 import { type ReactNode } from 'react';
@@ -20,22 +20,24 @@ export default function UpgradeToProBanner({
   title,
   description,
 }: UpgradeToProBannerProps) {
-  const { openDialog, openAlertDialog } = useDialog();
-  const isOwner = useIsCurrentUserOwner();
+  const [transferProjectDialogOpen, setTransferProjectDialogOpen] =
+    useState(false);
+
+  const handleTransferDialogOpen = () => setTransferProjectDialogOpen(true);
 
   return (
     <Box
       sx={{ backgroundColor: 'primary.light' }}
-      className="flex flex-col justify-between p-4 space-y-4 rounded-md lg:flex-row lg:items-center lg:space-y-0"
+      className="flex flex-col justify-between space-y-4 rounded-md p-4 lg:flex-row lg:items-center lg:space-y-0"
     >
       <div className="flex flex-col justify-between space-y-4">
         <div className="space-y-2">
-          <div className="flex flex-col space-y-2 xs:flex-row xs:space-y-0 xs:space-x-2">
+          <div className="flex flex-col space-y-2 xs:flex-row xs:space-x-2 xs:space-y-0">
             <Text>Available with</Text>
             <div className="flex flex-row space-x-2">
               <NhostIcon />
               <Text sx={{ color: 'primary.main' }} className="font-semibold">
-                Nhost Pro
+                Nhost Pro & Team
               </Text>
             </div>
           </div>
@@ -47,47 +49,24 @@ export default function UpgradeToProBanner({
           )}
         </div>
 
-        <div className="flex flex-col space-y-2 lg:flex-row lg:items-center lg:space-y-0 lg:space-x-2">
-          <Button
-            className="rounded-md"
-            onClick={() => {
-              if (isOwner) {
-                openDialog({
-                  component: <ChangePlanModal />,
-                  props: {
-                    PaperProps: { className: 'p-0 max-w-xl w-full' },
-                  },
-                });
-              } else {
-                openAlertDialog({
-                  title: "You can't upgrade this project",
-                  payload: (
-                    <Text variant="subtitle1" component="span">
-                      Ask an owner of this workspace to upgrade the project.
-                    </Text>
-                  ),
-                  props: {
-                    secondaryButtonText: 'I understand',
-                    hidePrimaryAction: true,
-                  },
-                });
-              }
-            }}
-          >
-            Upgrade to Pro
-          </Button>
+        <div className="flex flex-col gap-2 space-y-2 lg:flex-row lg:items-center lg:space-x-2 lg:space-y-0">
+          <OpenTransferDialogButton onClick={handleTransferDialogOpen} />
+          <TransferProjectDialog
+            open={transferProjectDialogOpen}
+            setOpen={setTransferProjectDialogOpen}
+          />
           <Link
             href="https://nhost.io/pricing"
             target="_blank"
             rel="noopener noreferrer"
             underline="hover"
-            className="font-medium text-center"
+            className="text-center font-medium"
             sx={{
               color: 'text.secondary',
             }}
           >
             See all features
-            <ArrowSquareOutIcon className="w-4 h-4 ml-1" />
+            <ArrowSquareOutIcon className="ml-1 h-4 w-4" />
           </Link>
         </div>
       </div>
@@ -97,7 +76,8 @@ export default function UpgradeToProBanner({
         width={300}
         height={140}
         objectFit="contain"
-        alt='Upgrade to Pro illustration'
+        className=""
+        alt="Upgrade to Pro illustration"
       />
     </Box>
   );