chore: update lockfile (#3039)

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/hasura-auth-js@2.8.0

### Minor Changes

- 14e6100: feat: add support for ID token sign-in from authentication
providers

## @nhost/react@3.8.0

### Minor Changes

- 14e6100: feat: add support for ID token sign-in from authentication
providers

### Patch Changes

-   @nhost/nhost-js@3.2.1

## @nhost/vue@2.8.0

### Minor Changes

- 14e6100: feat: add support for ID token sign-in from authentication
providers

### Patch Changes

-   @nhost/nhost-js@3.2.1

## @nhost/apollo@8.0.1

### Patch Changes

-   @nhost/nhost-js@3.2.1

## @nhost/react-apollo@15.0.0

### Patch Changes

-   Updated dependencies [14e6100]
    -   @nhost/react@3.8.0
    -   @nhost/apollo@8.0.1

## @nhost/react-urql@12.0.0

### Patch Changes

-   Updated dependencies [14e6100]
    -   @nhost/react@3.8.0

## @nhost/nextjs@2.1.24

### Patch Changes

-   Updated dependencies [14e6100]
    -   @nhost/react@3.8.0

## @nhost/nhost-js@3.2.1

### Patch Changes

-   Updated dependencies [14e6100]
    -   @nhost/hasura-auth-js@2.8.0

## @nhost/dashboard@2.7.2

# @nhost/dashboard

## 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

-   a7bde37: feat: send metadata in the edit form

### Patch Changes

- 1bc615b: feat: improve error message handling in `ErrorToast`
component
    -   @nhost/react-apollo@11.0.2
    -   @nhost/nextjs@2.1.11

## 1.14.0

### Minor Changes

-   a448d7d: feat: allow configuring postmark and delete SMTP settings

## 1.13.3

### Patch Changes

-   5924bc3: fix: include password in `GetSmtpSettings` query
- c5ad634: fix: resolved an issue where one-click install links were
broken on Safari
- 7278991: fix: update graphql auto-embeddings configuration to use
String type for model field

## 1.13.2

### Patch Changes

-   026f84f: fix: use configuration server URL from environment variable

## 1.13.1

### Patch Changes

-   7e9a2ce: fix: resolve issue where run services form fails to open

## 1.13.0

### Minor Changes

-   dd5d262: feat: add model field to the auto-embeddings form
- 09962be: feat: enable settings and run services when running the
dashboard locally
- 9cdecb6: feat: enable users to update their email address from the
account settings page

## 1.12.2

### Patch Changes

-   c195c51: fix: send email upon signin for unverified users

## 1.12.1

### Patch Changes

- 93ebdf8: fix: use service urls when initilizaing NhostClient running
local dashboard
    -   @nhost/react-apollo@11.0.1
    -   @nhost/nextjs@2.1.10

## 1.12.0

### Minor Changes

- f242e4b: feat: add connect with github to the user's account settings
-   768ca17: chore: update dependencies
- d62bd0f: fix: "Track this" option within the SQL editor now correctly
updates the metadata
- 91c2bb6: feat: refactor sign-in and sign-up pages to enforce email
verification

### Patch Changes

-   943831f: fix: resolve an error toast issue when unpausing a project
-   Updated dependencies [768ca17]
    -   @nhost/react-apollo@11.0.0
    -   @nhost/nextjs@2.1.9

## 1.11.2

### Patch Changes

-   @nhost/react-apollo@10.0.2
-   @nhost/nextjs@2.1.8

## 1.11.1

### Patch Changes

-   981404f: fix: set default value for healthCheck field validation

## 1.11.0

### Minor Changes

- 7789469: chore: upgrade dependency `@graphql-codegen/cli` to `5.0.2`
to address vulnerability
- 6c11b75: feat: add update user displayName section in account settings

### Patch Changes

-   @nhost/react-apollo@10.0.1
-   @nhost/nextjs@2.1.7

## 1.10.0

### Minor Changes

-   49a80c2: chore: update dependencies
-   150c04a: feat: add healthcheck config to run services

### Patch Changes

- e03f141: fix: allow insert, update and delete on tables in `auth` and
`storage` schemas
- 28676f4: feat: add min postgres version check to enable the ai service
-   Updated dependencies [49a80c2]
    -   @nhost/react-apollo@10.0.0
    -   @nhost/nextjs@2.1.6

## 1.9.0

### Minor Changes

-   d86e5c9: feat: add support for filtering the logs using a RegExp

## 1.8.3

### Patch Changes

-   @nhost/react-apollo@9.0.3
-   @nhost/nextjs@2.1.5

## 1.8.2

### Patch Changes

- 6df4f02: fix: use custom error toast and show correct message when
sending an invite

## 1.8.1

### Patch Changes

-   @nhost/react-apollo@9.0.2
-   @nhost/nextjs@2.1.4

## 1.8.0

### Minor Changes

- 713d53c: feat: add catch-all route for workspace/project - useful for
documentation

### Patch Changes

-   3db2999: fix: refresh table list after running SQL using the editor
- 3c4dd55: fix: handle `Error` objects properly in the `ErrorToast`
component
- 92b434e: fix: resolve an issue where the checkbox in the data-grid
header did not select all rows
    -   @nhost/react-apollo@9.0.1
    -   @nhost/nextjs@2.1.3

## 1.7.0

### Minor Changes

-   0d8d0eb: Update docs and dashboard references

## 1.6.9

### Patch Changes

-   @nhost/react-apollo@9.0.0
-   @nhost/nextjs@2.1.2

## 1.6.8

### Patch Changes

-   @nhost/react-apollo@8.0.1
-   @nhost/nextjs@2.1.1

## 1.6.7

### Patch Changes

-   5ef5189: fix: update `@apollo/client` to `3.9.4` to fix a cache bug

## 1.6.6

### Patch Changes

-   3ba485e: fix: added discord.com to connect-src
-   e5bab6a: chore: update dependencies
-   Updated dependencies [b19ffed]
-   Updated dependencies [e5bab6a]
    -   @nhost/nextjs@2.1.0
    -   @nhost/react-apollo@8.0.0

## 1.6.5

### Patch Changes

- ba73bb4: fix: update ErrorToast component to show the internal graphql
error
- d5337ff: fix: utilize accumulator in the creation of validation schema
within data grid utils

## 1.6.4

### Patch Changes

-   7c2a1c2: feat: show error and debug info in the error toast

## 1.6.3

### Patch Changes

-   6b8aad5: fix: add bare nhost.run to CSP

## 1.6.2

### Patch Changes

-   b18edc0: feat: added CSP and X-Frame-Options

## 1.6.1

### Patch Changes

-   8d91f71: chore: update deps and enable pnpm audit
- 3b8473b: chore: update turbo to `1.11.3` and pnpm to `8.10.5` in
Dockerfile
-   Updated dependencies [8d91f71]
    -   @nhost/react-apollo@7.0.2
    -   @nhost/nextjs@2.0.2

## 1.6.0

### Minor Changes

-   3ff1c2b53: fix: show upgrade option for pro projects

## 1.5.0

### Minor Changes

-   c2ef17c0a: feat: add support for new Team plan

## 1.4.0

### Minor Changes

-   7883bbcbd: feat: don't show deprecated plans
- 44be6dc0a: feat: set redirectTo during sign-in to support preview
environments

### Patch Changes

- 3c3594898: fix: allow access to graphite when configured running in
local dashboard
-   32c246b7a: chore: update docs icon

## 1.3.2

### Patch Changes

-   174b4165b: chore: use env variables when running graphql codegen
-   7c977e714: chore: change `Allowed Roles` to `Default Allowed Roles`
-   46f028b9f: fix: remove hardcoded ai version setting

## 1.3.1

### Patch Changes

- af33c21d1: chore: remove backendUrl deprecation notice and remove all
references to `providersUpdated`

## 1.3.0

### Minor Changes

-   04784d880: Fix graphite's default version

## 1.2.0

### Minor Changes

-   5733162ed: feat: add settings and ui for graphite

## 1.1.0

### Minor Changes

-   e2b79b5ec: chore: remove sharp from deps

## 1.0.1

### Patch Changes

-   @nhost/react-apollo@7.0.1
-   @nhost/nextjs@2.0.1

## 1.0.0

### Major Changes

- bc9eff6e4: chore: remove support for using backendUrl when
instantiating the Nhost client

### Patch Changes

-   Updated dependencies [bc9eff6e4]
    -   @nhost/nextjs@2.0.0
    -   @nhost/react-apollo@7.0.0

## 0.21.1

### Patch Changes

-   97ced73a3: fix(dashboard): prevent dashboard from resolving secrets

## 0.21.0

### Minor Changes

- ed1a8d458: Update alert message on increasing PostgreSQL's volume
capacity
-   2e2248fd4: feat(dashboard): add SQL editor

## 0.20.28

### Patch Changes

-   7c2c31082: feat: add support for users to delete their account
    -   @nhost/react-apollo@6.0.1
    -   @nhost/nextjs@1.13.40

## 0.20.27

### Patch Changes

- fa79b7709: chore(dashboard): tweaks and fixes to the service form and
dialog
-   8df84d782: fix(dashboard): allow resetting custom domains
    -   @nhost/react-apollo@6.0.0
    -   @nhost/nextjs@1.13.39

## 0.20.26

### Patch Changes

- 331ba0376: feat(dashboard): add postgres storage capacity modifier in
the settings
-   b7f801874: feat(dashboard): add new settings page for custom domains

## 0.20.25

### Patch Changes

-   @nhost/react-apollo@5.0.38

## 0.20.24

### Patch Changes

-   e10389ecf: fix(dashboard): disable run tab when developing locally
    -   @nhost/react-apollo@5.0.37

## 0.20.23

### Patch Changes

-   c01568a7d: chore(dashboard): show alert to update oauth providers

## 0.20.22

### Patch Changes

-   c3efb7ec8: feat(dashboard): query latest announcement from platform

## 0.20.21

### Patch Changes

-   3e46d3873: chore: update link to node18 announcement

## 0.20.20

### Patch Changes

-   @nhost/react-apollo@5.0.36
-   @nhost/nextjs@1.13.38

## 0.20.19

### Patch Changes

-   75c4c8ae3: feat(dashboard): make env value input multiline

## 0.20.18

### Patch Changes

- 425d485f8: fix(dashboard): make sure dedicated resources pricing
follows total resources

## 0.20.17

### Patch Changes

-   ae324f67f: fix(dashboard): remove unused graphql fields

## 0.20.16

### Patch Changes

-   df5b4302c: chore(dashboard): remove run feature flag
- bf4a1f6c2: feat(dashboard): fetch auth, postgres, hasura and storage
versions from dashboard
- 34fc08ca7: fix(dashboard/run): show correct private registry in
service details
-   885d10620: chore(dashboard): change feedback to contact us

## 0.20.15

### Patch Changes

- ed16c8b5d: feat(run): add a confirmation dialog when deleting a run
service
- 216990888: fix(run): center loading indicator when selecting a project

## 0.20.14

### Patch Changes

-   9fbea9787: feat: add node18 announcement

## 0.20.13

### Patch Changes

- e84acf469: fix(run): handle subdomain undefined error when creating a
new service

## 0.20.12

### Patch Changes

-   b7c799d62: feat(run): add dialog to copy registry and URLs

## 0.20.11

### Patch Changes

-   8903e6abd: fix(dashboard): show correct egress limit in usage stats

## 0.20.10

### Patch Changes

- 666a75a23: feat(dashboard): add functions execution time and egress
volume to usage stats

## 0.20.9

### Patch Changes

-   5e1e80aa8: fix(dashboard): show correct locales in user details
    -   @nhost/react-apollo@5.0.35
    -   @nhost/nextjs@1.13.37

## 0.20.8

### Patch Changes

-   @nhost/react-apollo@5.0.34
-   @nhost/nextjs@1.13.36

## 0.20.7

### Patch Changes

-   4a7ede11e: fix: distinguish files that were not uploaded
- 202b64723: feat(nhost-run): add support for one-click-install run
services
- 074a0fa11: feat(dashboard): add settings toggle to enable/disable
antivirus
    -   @nhost/react-apollo@5.0.33
    -   @nhost/nextjs@1.13.35

## 0.20.6

### Patch Changes

-   b20761e97: feat(services): add pricing info and confirmation dialog
-   90df6d81d: fix(services): handle null values when editing a service
-   aa8508467: fix: query service logs correctly
    feat: enable multiline support for environment value input

## 0.20.5

### Patch Changes

-   8d7f84b8d: fix: make announcement adapt to theme

## 0.20.4

### Patch Changes

-   3b75bfce2: fix: make announcement close properly
- f49819075: fix: show correct values when dedicated resources are
disabled

## 0.20.3

### Patch Changes

-   e643bd362: fix(services): fix errors when config is null
-   bcdab66bf: feat: add annoucement for nhost run
-   f967a2e59: added note about storage not being able to be downsized
-   311c7756d: chore(services): consistent naming for compute

## 0.20.2

### Patch Changes

-   9073182d5: chore(dashboard): bump `turbo` to 1.10.11
-   ece717d6e: feat(logs): show services in the logs page
- 82b335311: feat(metrics): change grafana link to point to the
dashboards
- b135ef695: fix(services): set command as optional and set min replicas
to 0

## 0.20.1

### Patch Changes

-   3d5c34f4c: fix(auth): fix users pagination limit

## 0.20.0

### Minor Changes

-   c99d117d1: feat(services): add support for custom services

## 0.19.2

### Patch Changes

-   face99ccd: chore(deps): bump turbo version
-   cfe527307: style: tweak pull config warning in dark mode
- a9d7da8af: chore(deps): update dependency @types/pluralize to ^0.0.30
-   9aa4371ef: chore: add hasura-auth version 0.21.2
- d14e112bf: chore(deps): update dependency prettier-plugin-tailwindcss
to ^0.4.0
-   d3e8bb94a: chore(deps): update dependency vite-plugin-dts to v3

## 0.19.1

### Patch Changes

-   @nhost/react-apollo@5.0.32
-   @nhost/nextjs@1.13.34

## 0.19.0

### Minor Changes

- 9c61c69a7: chore(dashboard):add postgres 14.6-20230705-1 to the
version selector

### Patch Changes

-   47bda15ff: feat(settings): add warning to pull config

## 0.18.0

### Minor Changes

- ee0b9b8ed: chore(dashboard):add hasura v2.28.2 and v2.29.0 to the
version selector

## 0.17.20

### Patch Changes

-   @nhost/react-apollo@5.0.31
-   @nhost/nextjs@1.13.33

## 0.17.19

### Patch Changes

-   f866120a6: fix(users): use the password length from the config

## 0.17.18

### Patch Changes

-   @nhost/react-apollo@5.0.30
-   @nhost/nextjs@1.13.32

## 0.17.17

### Patch Changes

-   ea7b102c0: fix(pat): highlight expired tokens

## 0.17.16

### Patch Changes

- b3b64a3b7: chore(deps): bump `@types/react` to `v18.2.14` and
`@types/react-dom` to `v18.2.6`
-   32b221f94: chore(deps): bump `graphiql` to `v3`
-   3a56c12df: chore(deps): bump `turbo` to `v1.10.6`
-   Updated dependencies [b3b64a3b7]
    -   @nhost/react-apollo@5.0.29
    -   @nhost/nextjs@1.13.31

## 0.17.15

### Patch Changes

-   f41fdc12a: chore(deps): bump `turbo` to `1.10.5`
-   6199c1c55: fix(projects): don't redirect to 404 page
-   Updated dependencies [07a45fde0]
    -   @nhost/react-apollo@5.0.28
    -   @nhost/nextjs@1.13.30

## 0.17.14

### Patch Changes

- 80b22724d: chore(deps): bump `@types/react` to `v18.2.13`,
`@types/react-dom` to `v18.2.6` and `@storybook/testing-library` to
`v0.2.0`

## 0.17.13

### Patch Changes

-   cc02902cb: chore(docs): update environment variable documentation

## 0.17.12

### Patch Changes

-   660d339e1: fix(storybook): don't break storybook
-   660d339e1: fix(tests): prevent warnings during tests
    -   @nhost/react-apollo@5.0.27
    -   @nhost/nextjs@1.13.29

## 0.17.11

### Patch Changes

- bd4d0c270: chore(dashboard):add postgres 14.6-20230613-1 to the
version selector

## 0.17.10

### Patch Changes

-   c8c2a10b2: fix(database): don't break the password reset flow
- e70b45498: chore(deps): bump `@types/react` to `v18.2.12` and
`@types/react-dom` to `v18.2.5`

## 0.17.9

### Patch Changes

- 842055099: chore(deps): bump `turbo` to `v1.10.3` and `pnpm` to
`v8.6.2`
- fd12aa0a8: chore(projects): remove the postgres password input from
the project creation screen
-   022b76e78: chore(deps): bump `@types/react` to `v18.2.11`
-   3555ab2b7: chore(deps): bump `vitest` monorepo to `v0.32.0`
-   c43e54922: feat(backups): add download button to backups

## 0.17.8

### Patch Changes

-   d0457fe5c: feat(settings): improve the dashboard and config parity
    -   @nhost/react-apollo@5.0.26
    -   @nhost/nextjs@1.13.28

## 0.17.7

### Patch Changes

-   4f0368b95: fix(account): don't break account settings page

## 0.17.6

### Patch Changes

- 64a8f41d0: chore(resources): lower the maximum allowed resources per
service

## 0.17.5

### Patch Changes

-   @nhost/react-apollo@5.0.25
-   @nhost/nextjs@1.13.27

## 0.17.4

### Patch Changes

- 9b1d0f7a5: fix(deployments): use correct timestamp for deployment
details
-   6d2963ffa: chore(deps): bump `@types/react` to `v18.2.8`
- 8871267b9: chore(deps): downgrade `pnpm` to `v8.5.1` because of no
Turborepo support

## 0.17.3

### Patch Changes

-   01eeef9de: chore(misc): under the hood improvements
- 21e13db05: chore(deps): bump `@types/react` to `v18.2.7` and `turbo`
to `v1.10.1`
- f16433ae6: chore(secrets): allow empty secrets and environment
variables
-   aa3c62989: chore(cli): bump Nhost CLI version to v1.0
    -   @nhost/react-apollo@5.0.24
    -   @nhost/nextjs@1.13.26

## 0.17.2

### Patch Changes

-   88a4983f: chore(misc): under the hood improvements

## 0.17.1

### Patch Changes

-   9b0d4dde: feat(secrets): enable secrets

## 0.17.0

### Minor Changes

-   15d84a19: Add postgres 14.6-20230525

## 0.16.14

### Patch Changes

-   4c626174: chore: updated import paths, improved directory structure
-   cc047b71: chore(deps): bump `@fontsource` monorepo to `v5.0.0`
-   99edd012: feat(account): add support for personal access tokens

## 0.16.13

### Patch Changes

-   78c7109c: feat(settings): allow selecting service versions

## 0.16.12

### Patch Changes

- 399009d6: fix(gql): don't enter an infinite loop when fetching remote
app data
- 329e5a91: fix(deployments): use the same sorting of deployments
everywhere
- 6d559d6e: chore(settings): add under the hood improvements to the
settings page
- 12eb236c: chore(deps): bump `prettier-plugin-tailwindcss` to `v0.3.0`
-   f9b81a2a: chore(deps): bump `turbo` to `v1.9.8`
-   1345741b: fix(projects): don't redirect to 404 on project creation
-   Updated dependencies [7fea29a8]
    -   @nhost/react-apollo@5.0.23
    -   @nhost/nextjs@1.13.25

## 0.16.11

### Patch Changes

- 1230b722: fix(projects): don't redirect to 404 on when the project is
renamed
    -   @nhost/react-apollo@5.0.22
    -   @nhost/nextjs@1.13.24

## 0.16.10

### Patch Changes

-   Updated dependencies [da03bf39]
    -   @nhost/react-apollo@5.0.21
    -   @nhost/nextjs@1.13.23

## 0.16.9

### Patch Changes

- 349aac36: fix(settings): use region domain when constructing the
postgres connection string

## 0.16.8

### Patch Changes

- 20fb69fa: chore(projects): change the way how API URLs are constructed

## 0.16.7

### Patch Changes

- 49f9b837: chore(docker): bump `pnpm` to `v8.4.0` and `turbo` to
`v1.9.3`
- 3f478a4e: chore(deps): bump `vitest` to `v0.31.0`, `@types/react` to
`v18.2.6` and `@types/react-dom` to `v18.2.4`

## 0.16.6

### Patch Changes

- d926f156: fix(projects): redirect to 404 when an invalid project is
opened
- 49b99728: fix(projects): disable features for non-owner members of
workspaces

## 0.16.5

### Patch Changes

-   12e2855f: chore(deps): bump `jsdom` to v22
-   e4972b83: feat(metrics): add Grafana page

## 0.16.4

### Patch Changes

- 3f396a9e: fix(projects): unpause after upgrading a paused project to
pro
- 3f396a9e: fix(projects): don't redirect to 404 page after project
creation

## 0.16.3

### Patch Changes

-   Updated dependencies [90c60311]
    -   @nhost/react-apollo@5.0.20
    -   @nhost/nextjs@1.13.22

## 0.16.2

### Patch Changes

-   0f34f0c6: fix(projects): disallow downgrading to free plan
- 8da291ad: chore(deps): bump `@types/react` to v18.2.0 and
`@types/react-dom` to v18.2.1

## 0.16.1

### Patch Changes

- adc828a5: fix(gql): don't enter an infinite loop when fetching remote
app data

## 0.16.0

### Minor Changes

-   2fb1145f: feat(compute): add support for replicas

### Patch Changes

- d8ceccec: chore(env): remove deprecated `NHOST_BACKEND_URL`
environment variable

## 0.15.2

### Patch Changes

-   84b84ab7: fix(projects): filter projects by workspace

## 0.15.1

### Patch Changes

-   2faf7907: chore(deps): bump `graphql-request` to v6
-   f1b5a944: chore(deps): bump `@vitejs/plugin-react` to v4
-   7f1785ac: chore(deps): bump `@types/react` to v18.0.37
    -   @nhost/react-apollo@5.0.19

## 0.15.0

### Minor Changes

-   85889ee8: feat(dashboard): add Compute management to the settings

## 0.14.8

### Patch Changes

-   668c8771: chore(dialogs): unify dialog management of payment dialogs

## 0.14.7

### Patch Changes

-   d4ccc656: chore: cleanup unused code
    -   @nhost/react-apollo@5.0.18
    -   @nhost/nextjs@1.13.21

## 0.14.6

### Patch Changes

-   b299cfc9: chore(deps): bump `vitest` to v0.30.0
-   411cb65b: chore(projects): refactor workspace and project hooks
- 43b1b144: chore(deps): bump `@types/react` to v18.0.34 and
`@types/react-dom` to v18.0.11
-   Updated dependencies [43b1b144]
    -   @nhost/react-apollo@5.0.17
    -   @nhost/nextjs@1.13.20

## 0.14.5

### Patch Changes

-   ba0d57ee: fix(i18n): revert i18n library
-   3328ed05: feat(projects): improve overview when there is an error

## 0.14.4

### Patch Changes

-   5e0920ba: chore(deps): bump `next-seo` to v6
-   706c9dc3: chore(deps): bump `@types/react` to 18.0.33
-   99f8f6b3: feat(metrics): show metrics on the overview

## 0.14.3

### Patch Changes

-   @nhost/react-apollo@5.0.16

## 0.14.2

### Patch Changes

-   3cb67300: fix(logs): don't break UI when clearing time picker
-   7453bf3b: feat(projects): show project creator info
-   c166dad0: chore(tests): improve auth page tests
-   6a290bb2: chore(deps): bump `@types/react` to 18.0.32

## 0.14.1

### Patch Changes

-   @nhost/react-apollo@5.0.15
-   @nhost/nextjs@1.13.19

## 0.14.0

### Minor Changes

-   6e1f03ea: feat(dashboard): add support for the Azure AD provider

### Patch Changes

-   1bd2c373: chore(deps): bump `turbo` to 1.8.6
-   d329b621: chore(deps): bump `@types/react` to 18.0.30
-   cb248f0d: fix(tests): avoid name collision in database tests
-   867c8076: chore(deps): bump `@types/react` to 18.0.29

## 0.13.10

### Patch Changes

- e93b06ab: fix(dashboard): remove left margin from workspace list on
mobile
-   1c4806bf: chore(deps): bump `sharp` to 0.32.0
    -   @nhost/react-apollo@5.0.14
    -   @nhost/nextjs@1.13.18

## 0.13.9

### Patch Changes

-   912ed76c: chore(dashboard): bump `@apollo/client` to 3.7.10
-   Updated dependencies [912ed76c]
    -   @nhost/react-apollo@5.0.13

## 0.13.8

### Patch Changes

-   7c127372: chore(dashboard): bump `react-error-boundary` to v4

## 0.13.7

### Patch Changes

- 9130ab12: chore(dashboard): bump `yup` to v1 and `@hookform/resolvers`
to v3

## 0.13.6

### Patch Changes

- 253dd235: using new mutation to create projects + refactor Create
Project page.

## 0.13.5

### Patch Changes

-   @nhost/react-apollo@5.0.12
-   @nhost/nextjs@1.13.17

## 0.13.4

### Patch Changes

-   b48bc034: fix(dashboard): disable new users
-   798e591b: fix(dashboard): show correct date in data grid

## 0.13.3

### Patch Changes

-   bfb4c1a6: chore(dashboard): remove `useAxios` property
-   d8d8394b: Dashboard: allow to override hasura admin secret in docker
-   Updated dependencies [ce1ee40d]
    -   @nhost/nextjs@1.13.16
    -   @nhost/react-apollo@5.0.11

## 0.13.2

### Patch Changes

-   beed2eba: Fix docker entrypoint for dashboard
- 2c8559a3: fix(dashboard): refresh project list after deleting a
project
-   4329d048: chore(dashboard): bump `graphiql` dependencies

## 0.13.1

### Patch Changes

-   cbb1fc5b: chore(dashboard): cleanup GraphQL operations

## 0.13.0

### Minor Changes

-   088584e7: feat(dashboard): add support for custom local subdomains

### Patch Changes

-   2ac90dfd: fix(dashboard): improve mobile responsive layout
-   Updated dependencies [f375eacc]
    -   @nhost/nextjs@1.13.15
    -   @nhost/react-apollo@5.0.10

## 0.12.4

### Patch Changes

-   @nhost/react-apollo@5.0.9
-   @nhost/nextjs@1.13.14

## 0.12.3

### Patch Changes

-   2b1338f7: chore(dashboard): bump `turbo` to 1.8.3
- 5223ee93: fix(dashboard): show correct deployment status on the main
page
-   850a049c: chore(deps): update docker/build-push-action action to v4
-   Updated dependencies [850a049c]
    -   @nhost/nextjs@1.13.13
    -   @nhost/react-apollo@5.0.8

## 0.12.2

### Patch Changes

-   4bf40995: chore(deps): bump `typescript` to `4.9.5`
-   8bb097c9: chore(deps): bump `vitest`
- 35d52aab: chore(deps): replace `cross-fetch` with `isomorphic-unfetch`
-   Updated dependencies [4bf40995]
-   Updated dependencies [8bb097c9]
-   Updated dependencies [35d52aab]
    -   @nhost/react-apollo@5.0.7
    -   @nhost/nextjs@1.13.12

## 0.12.1

### Patch Changes

-   c96d7ccd: fix(dashboard): fix docker builds

## 0.12.0

### Minor Changes

-   d1671210: feat(dashboard): use mimir to manage project configuration

### Patch Changes

-   f65e4de9: chore(deps): bump @graphql-codegen monorepo to v3

## 0.11.20

### Patch Changes

-   4b4f0d01: chore(dashboard): improve dialog management

## 0.11.19

### Patch Changes

-   @nhost/react-apollo@5.0.6
-   @nhost/nextjs@1.13.11

## 0.11.18

### Patch Changes

-   01318860: fix(nhost-js): use correct URL for functions requests
-   Updated dependencies [01318860]
    -   @nhost/react-apollo@5.0.5
    -   @nhost/nextjs@1.13.10

## 0.11.17

### Patch Changes

-   f673adea: fix(dashboard): set correct Content-Type for user creation
-   445d8ef4: chore(deps): bump `@nhost/react-apollo` to 5.0.4
-   445d8ef4: chore(deps): bump `@nhost/nextjs` to 1.13.9
- 0368663d: fix(dashboard): allow permission editing for auth and
storage schemas
-   Updated dependencies [445d8ef4]
-   Updated dependencies [445d8ef4]
    -   @nhost/react-apollo@5.0.4
    -   @nhost/nextjs@1.13.9

## 0.11.16

### Patch Changes

-   b755e908: fix(dashboard): use correct date for last seen
-   2d9145f9: chore(deps): revert GraphQL client
- 1ddf704c: fix(dashboard): don't show false positive message for failed
user creation
    -   @nhost/react-apollo@5.0.3
    -   @nhost/nextjs@1.13.8

## 0.11.15

### Patch Changes

-   @nhost/react-apollo@5.0.2
-   @nhost/nextjs@1.13.7

## 0.11.14

### Patch Changes

- 2cc18dcb: fix(dashboard): prevent permission editor dropdown from
being always open

## 0.11.13

### Patch Changes

- 3343a363: chore(dashboard): bump `@testing-library/react` to v14 and
`@testing-library/dom` to v9
    -   @nhost/react-apollo@5.0.1
    -   @nhost/nextjs@1.13.6

## 0.11.12

### Patch Changes

- 87eda76e: chore(dashboard): bump `@types/react` to v18.0.28 and
`@types/react-dom` to v18.0.11
-   6f0ac570: feat(dashboard): show dashboard version in account menu

## 0.11.11

### Patch Changes

-   bf1e4071: chore(dashboard): bump `react-is` version to `18.2.0`
-   Updated dependencies [bf1e4071]
-   Updated dependencies [5013213b]
    -   @nhost/nextjs@1.13.5
    -   @nhost/react-apollo@4.13.5

## 0.11.10

### Patch Changes

- a37a430b: fix(dashboard): don't break UI when deployments are
unavailable
    -   @nhost/react-apollo@4.13.4
    -   @nhost/nextjs@1.13.4

## 0.11.9

### Patch Changes

-   7b970e68: fix(dashboard): fix header link color

## 0.11.8

### Patch Changes

- f33242f2: feat(dashboard): add new sign up, sign in and reset password
pages

## 0.11.7

### Patch Changes

-   e9c8909c: fix(dashboard): use correct theme color in dark mode

## 0.11.6

### Patch Changes

-   902f486b: fix(dashboard): re-enable Hasura on logs page

## 0.11.5

### Patch Changes

-   1f9720fa: fix(dashboard): apply select permissions properly

## 0.11.4

### Patch Changes

-   deb14b51: fix(dashboard): don't break billing form

## 0.11.3

### Patch Changes

-   @nhost/react-apollo@4.13.3
-   @nhost/nextjs@1.13.3

## 0.11.2

### Patch Changes

-   f143e51d: chore(dashboard): pin Turborepo to 1.6.3

## 0.11.1

### Patch Changes

-   c2b5a41a: chore(dashboard): select system colors by default

## 0.11.0

### Minor Changes

-   1ebaf429: feat(dashboard): introduce Dark Mode 🌚

### Patch Changes

- 63b445c4: fixed duplicated logs bug and made to date count during live
mode

## 0.10.1

### Patch Changes

-   e146d32e: chore(deps): update dependency @types/react to v18.0.27
-   59347fcd: correct allowed role name
-   5b65cac9: updated authentication documentation
-   963f9b5e: feat(dashboard): include project info in feedback

## 0.10.0

### Minor Changes

-   ed4c7801: chore(dashboard): remove Functions section

## 0.9.10

### Patch Changes

-   4e2f8ccd: fix(dashboard): don't break Auth page in local mode

## 0.9.9

### Patch Changes

-   31abbe5f: fix(dashboard): enable toggle when settings are filled in

## 0.9.8

### Patch Changes

- 5bdd31ad: chore(dashboard): list fewer images per page on the Storage
page
- 5121851c: fix(dashboard): don't throw validation error for valid
permission rules

## 0.9.7

### Patch Changes

-   c126b20d: fix(dashboard): correct redeployment button

## 0.9.6

### Patch Changes

-   36c3519c: feat(dashboard): retrigger deployments

## 0.9.5

### Patch Changes

- 200e9f77: chore(deps): update dependency @types/react-dom to v18.0.10
-   Updated dependencies [200e9f77]
    -   @nhost/nextjs@1.13.2
    -   @nhost/react-apollo@4.13.2

## 0.9.4

### Patch Changes

- dbd3ded5: fix(dashboard): workspaces creation, new form, correct
redirects.

## 0.9.3

### Patch Changes

-   85f0f943: fix(dashboard): don't break the table creation process

## 0.9.2

### Patch Changes

-   Updated dependencies [d42c27ae]
-   Updated dependencies [927be4a2]
    -   @nhost/nextjs@1.13.1
    -   @nhost/react-apollo@4.13.1

## 0.9.1

### Patch Changes

-   d0f80811: fix(dashboard): don't show error when signing out the user

## 0.9.0

### Minor Changes

- d92891b2: feat(dashboard): add Permission Editor to the Database
section

### Patch Changes

-   3d379128: fix(dashboard): create new user
    -   @nhost/react-apollo@4.13.0
    -   @nhost/nextjs@1.13.0

## 0.8.1

### Patch Changes

-   7cadd944: fix(dashboard): display Twitter provider settings

## 0.8.0

### Minor Changes

-   9a1aa7bb: add functions to the log dashboard
-   f29abe62: feat(dashboard): Users Management v2

### Patch Changes

-   7766624b: feat(dashboard): add JWT secret editor modal
    -   @nhost/react-apollo@4.12.1
    -   @nhost/nextjs@1.12.1

## 0.7.13

### Patch Changes

-   dd0738d5: fix(dashboard): provisioning status polling

## 0.7.12

### Patch Changes

-   b21222b3: chore(deps): update dependency @types/node to v16
-   9e0486a3: fix(dashboard): close modals when navigating
-   Updated dependencies [b21222b3]
-   Updated dependencies [65687bee]
-   Updated dependencies [54df0df4]
    -   @nhost/nextjs@1.12.0
    -   @nhost/react-apollo@4.12.0

## 0.7.11

### Patch Changes

-   d6527122: fix(dashboard): use correct service URLs

## 0.7.10

### Patch Changes

-   Updated dependencies [57db5b83]
    -   @nhost/nextjs@1.11.0
    -   @nhost/nhost-js@1.7.0
    -   @nhost/react@0.17.0
    -   @nhost/react-apollo@4.11.0

## 0.7.9

### Patch Changes

- a6d31dc2: fix(dashboard): don't break the UI when project is not
loaded yet

## 0.7.8

### Patch Changes

- 7f251111: Use `NhostProvider` instead of `NhostReactProvider` and
`NhostNextProvider`

    `NhostReactProvider` and `NhostNextProvider` are now deprecated

-   f4d70f88: fix(dashboard): do not break when region is nullish

- 4a9471cc: Windows Live Provider displayed link updated to match
backend url

- 594488e4: fix(dashboard): do not show error when submitting Apple
provider settings

-   Updated dependencies [7f251111]
    -   @nhost/nextjs@1.10.0
    -   @nhost/react@0.16.0
    -   @nhost/react-apollo@4.10.0

## 0.7.7

### Patch Changes

-   80b604ad: fix(dashboard): use correct Hasura slug

## 0.7.6

### Patch Changes

-   2d2beb53: fix(dashboard): prevent error on GraphQL page
-   ac8efcbd: chore(dashboard): deprecate old DNS name

## 0.7.5

### Patch Changes

-   132a4f4b: chore(dashboard): remove unused dependencies
- 132a4f4b: chore(deps): synchronize @types/react-dom and @types/react
versions
-   db57572f: fix(dashboard): correct section paddings when no env vars
-   Updated dependencies [132a4f4b]
    -   @nhost/react@0.15.2
    -   @nhost/react-apollo@4.9.2
    -   @nhost/nextjs@1.9.3

## 0.7.4

### Patch Changes

-   34d85e54: chore(deps): update dependency critters to ^0.0.16
- 9b93cf95: chore(deps): update dependency @netlify/functions to ^0.11.0
-   e0439030: chore(deps): update dependency @types/react-dom to v18.0.9
-   Updated dependencies [82124329]
    -   @nhost/nextjs@1.9.2

## 0.7.3

### Patch Changes

-   a1193da4: fix(dashboard): remove character limit from env var inputs

## 0.7.2

### Patch Changes

-   44f13f62: chore(dashboard): cleanup unused files

## 0.7.1

### Patch Changes

- e01cb2ed: chore(dashboard): change settings sidebar menu item density

## 0.7.0

### Minor Changes

- db342f45: chore(dashboard): refactor Roles and Permissions settings
sections
-   8b9fa0b1: feat(dashboard): add Environment Variables page

### Patch Changes

-   Updated dependencies [66b4f3d0]
-   Updated dependencies [2e6923dc]
-   Updated dependencies [ef117c28]
-   Updated dependencies [aebb8225]
    -   @nhost/core@0.9.4
    -   @nhost/nhost-js@1.6.2
    -   @nhost/nextjs@1.9.1
    -   @nhost/react@0.15.1
    -   @nhost/react-apollo@4.9.1

## 0.6.0

### Minor Changes

-   eef9c914: feat(dashboard): add Roles and Permissions page

## 0.5.0

### Minor Changes

-   a48dd5bf: feat(dashboard): make backend port configurable

## 0.4.3

### Patch Changes

-   5de965d9: fix(dashboard): alphabetic ordering of providers
-   b9087a4a: fix(dashboard): console -> dashboard terminology
-   ca012d79: docs(workos): WorkOS Docs

## 0.4.2

### Patch Changes

-   89bd37bc: fix(dashboard): correct redirect URL input opacity
-   Updated dependencies [4601d84e]
-   Updated dependencies [843087cb]
    -   @nhost/react@0.15.0
    -   @nhost/nextjs@1.9.0
    -   @nhost/react-apollo@4.9.0

## 0.4.1

### Patch Changes

-   766cb612: fix(dashboard): correct redirect URL for oauth providers
-   Updated dependencies [53bdc294]
-   Updated dependencies [f2aaff05]
    -   @nhost/nextjs@1.8.3
    -   @nhost/core@0.9.3
    -   @nhost/react@0.14.3
    -   @nhost/nhost-js@1.6.1
    -   @nhost/react-apollo@4.8.3

## 0.4.0

### Minor Changes

-   9211743d: feat(dashboard): migrate Settings page features

## 0.3.0

### Minor Changes

-   73da6a67: fix(dashboard): avoid using BACKEND_URL locally

## 0.2.0

### Minor Changes

-   db118f97: feat(dashboard): generate Docker image

## @nhost/docs@2.23.0

### Minor Changes

-   14e6100: feat: add documentation for sign-in with ID token

## @nhost-examples/react-native@0.1.0

### Minor Changes

-   14e6100: feat: add signIn with Google and Apple using an ID token

### Patch Changes

-   Updated dependencies [14e6100]
    -   @nhost/react@3.8.0
    -   @nhost/react-apollo@15.0.0

## @nhost-examples/cli@0.3.14

### Patch Changes

-   @nhost/nhost-js@3.2.1

## @nhost-examples/codegen-react-apollo@0.4.15

### Patch Changes

-   Updated dependencies [14e6100]
    -   @nhost/react@3.8.0
    -   @nhost/react-apollo@15.0.0

## @nhost-examples/codegen-react-query@0.4.15

### Patch Changes

-   Updated dependencies [14e6100]
    -   @nhost/react@3.8.0

## @nhost-examples/codegen-react-urql@0.3.15

### Patch Changes

-   Updated dependencies [14e6100]
    -   @nhost/react@3.8.0
    -   @nhost/react-urql@12.0.0

## @nhost-examples/multi-tenant-one-to-many@2.2.15

### Patch Changes

-   @nhost/nhost-js@3.2.1

## @nhost-examples/nextjs@0.3.15

### Patch Changes

-   Updated dependencies [14e6100]
    -   @nhost/react@3.8.0
    -   @nhost/react-apollo@15.0.0
    -   @nhost/nextjs@2.1.24

## @nhost-examples/node-storage@0.2.14

### Patch Changes

-   @nhost/nhost-js@3.2.1

## @nhost-examples/nextjs-server-components@0.4.16

### Patch Changes

-   @nhost/nhost-js@3.2.1

## @nhost-examples/react-apollo@1.1.1

### Patch Changes

-   Updated dependencies [14e6100]
    -   @nhost/react@3.8.0
    -   @nhost/react-apollo@15.0.0

## @nhost-examples/react-gqty@1.2.15

### Patch Changes

-   Updated dependencies [14e6100]
    -   @nhost/react@3.8.0

## @nhost-examples/vue-apollo@0.7.1

### Patch Changes

-   Updated dependencies [14e6100]
    -   @nhost/vue@2.8.0
    -   @nhost/nhost-js@3.2.1
    -   @nhost/apollo@8.0.1

## @nhost-examples/vue-quickstart@0.2.15

### Patch Changes

-   Updated dependencies [14e6100]
    -   @nhost/vue@2.8.0
    -   @nhost/apollo@8.0.1

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

.github/workflows/ci.yaml

@@ -22,6 +22,10 @@ env:
   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 }}

.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:

README.md

@@ -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 />
@@ -148,4 +150,4 @@ Here are some ways of contributing to making Nhost better:
   <p align="center">
     <img width="720" src="https://contrib.rocks/image?repo=nhost/nhost" alt="A table of avatars from the project's contributors" />
   </p>
-</a>
+</a>

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

dashboard/e2e/ai/assistants.test.ts

@@ -1,9 +1,5 @@
-import {
-  PRO_TEST_PROJECT_NAME,
-  PRO_TEST_PROJECT_SLUG,
-  TEST_WORKSPACE_SLUG,
-} from '@/e2e/env';
-import { openProject } from '@/e2e/utils';
+import { TEST_ORGANIZATION_SLUG, TEST_PROJECT_SUBDOMAIN } from '@/e2e/env';
+import { navigateToProject } from '@/e2e/utils';
 import type { Page } from '@playwright/test';
 import { expect, test } from '@playwright/test';
 
@@ -16,17 +12,15 @@ test.beforeAll(async ({ browser }) => {
 test.beforeEach(async () => {
   await page.goto('/');
 
-  await openProject({
+  await navigateToProject({
     page,
-    projectName: PRO_TEST_PROJECT_NAME,
-    workspaceSlug: TEST_WORKSPACE_SLUG,
-    projectSlug: PRO_TEST_PROJECT_SLUG,
+    orgSlug: TEST_ORGANIZATION_SLUG,
+    projectSubdomain: TEST_PROJECT_SUBDOMAIN,
   });
 
-  await page
-    .getByRole('navigation', { name: /main navigation/i })
-    .getByRole('link', { name: /ai/i })
-    .click();
+  const AIRoute = `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/ai/assistants`;
+  await page.goto(AIRoute);
+  await page.waitForURL(AIRoute);
 });
 
 test.afterAll(async () => {

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

@@ -1,9 +1,5 @@
-import {
-  PRO_TEST_PROJECT_NAME,
-  PRO_TEST_PROJECT_SLUG,
-  TEST_WORKSPACE_SLUG,
-} from '@/e2e/env';
-import { openProject } from '@/e2e/utils';
+import { TEST_ORGANIZATION_SLUG, TEST_PROJECT_SUBDOMAIN } from '@/e2e/env';
+import { navigateToProject } from '@/e2e/utils';
 import type { Page } from '@playwright/test';
 import { expect, test } from '@playwright/test';
 
@@ -16,17 +12,15 @@ test.beforeAll(async ({ browser }) => {
 test.beforeEach(async () => {
   await page.goto('/');
 
-  await openProject({
+  await navigateToProject({
     page,
-    projectName: PRO_TEST_PROJECT_NAME,
-    workspaceSlug: TEST_WORKSPACE_SLUG,
-    projectSlug: PRO_TEST_PROJECT_SLUG,
+    orgSlug: TEST_ORGANIZATION_SLUG,
+    projectSubdomain: TEST_PROJECT_SUBDOMAIN,
   });
 
-  await page
-    .getByRole('navigation', { name: /main navigation/i })
-    .getByRole('link', { name: /ai/i })
-    .click();
+  const AIRoute = `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/ai/auto-embeddings`;
+  await page.goto(AIRoute);
+  await page.waitForURL(AIRoute);
 });
 
 test.afterAll(async () => {

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

@@ -1,30 +1,12 @@
-import {
-  PRO_TEST_PROJECT_NAME,
-  PRO_TEST_PROJECT_SLUG,
-  TEST_WORKSPACE_SLUG,
-} from '@/e2e/env';
-import { createUser, generateTestEmail, openProject } from '@/e2e/utils';
+import { TEST_ORGANIZATION_SLUG, TEST_PROJECT_SUBDOMAIN } from '@/e2e/env';
+import { createUser, generateTestEmail } 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: PRO_TEST_PROJECT_NAME,
-    workspaceSlug: TEST_WORKSPACE_SLUG,
-    projectSlug: PRO_TEST_PROJECT_SLUG,
-  });
-
-  await page
-    .getByRole('navigation', { name: /main navigation/i })
-    .getByRole('link', { name: /auth/i })
-    .click();
-
-  await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/users`,
-  );
+  const authUrl = `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/users`;
+  await page.goto(authUrl);
+  await page.waitForURL(authUrl, { waitUntil: 'networkidle' });
 
   const email = generateTestEmail();
   const password = faker.internet.password();

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

@@ -1,9 +1,5 @@
-import {
-  PRO_TEST_PROJECT_NAME,
-  PRO_TEST_PROJECT_SLUG,
-  TEST_WORKSPACE_SLUG,
-} from '@/e2e/env';
-import { createUser, generateTestEmail, openProject } from '@/e2e/utils';
+import { TEST_ORGANIZATION_SLUG, TEST_PROJECT_SUBDOMAIN } from '@/e2e/env';
+import { createUser, generateTestEmail } from '@/e2e/utils';
 import { faker } from '@faker-js/faker';
 import type { Page } from '@playwright/test';
 import test, { expect } from '@playwright/test';
@@ -15,23 +11,9 @@ test.beforeAll(async ({ browser }) => {
 });
 
 test.beforeEach(async () => {
-  await page.goto('/');
-
-  await openProject({
-    page,
-    projectName: PRO_TEST_PROJECT_NAME,
-    workspaceSlug: TEST_WORKSPACE_SLUG,
-    projectSlug: PRO_TEST_PROJECT_SLUG,
-  });
-
-  await page
-    .getByRole('navigation', { name: /main navigation/i })
-    .getByRole('link', { name: /auth/i })
-    .click();
-
-  await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/users`,
-  );
+  const authUrl = `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/users`;
+  await page.goto(authUrl);
+  await page.waitForURL(authUrl, { waitUntil: 'networkidle' });
 });
 
 test.afterAll(async () => {

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

@@ -1,9 +1,5 @@
-import {
-  PRO_TEST_PROJECT_NAME,
-  PRO_TEST_PROJECT_SLUG,
-  TEST_WORKSPACE_SLUG,
-} from '@/e2e/env';
-import { createUser, generateTestEmail, openProject } from '@/e2e/utils';
+import { TEST_ORGANIZATION_SLUG, TEST_PROJECT_SUBDOMAIN } from '@/e2e/env';
+import { createUser, generateTestEmail } from '@/e2e/utils';
 import { faker } from '@faker-js/faker';
 import type { Page } from '@playwright/test';
 import test, { expect } from '@playwright/test';
@@ -15,23 +11,9 @@ test.beforeAll(async ({ browser }) => {
 });
 
 test.beforeEach(async () => {
-  await page.goto('/');
-
-  await openProject({
-    page,
-    projectName: PRO_TEST_PROJECT_NAME,
-    workspaceSlug: TEST_WORKSPACE_SLUG,
-    projectSlug: PRO_TEST_PROJECT_SLUG,
-  });
-
-  await page
-    .getByRole('navigation', { name: /main navigation/i })
-    .getByRole('link', { name: /auth/i })
-    .click();
-
-  await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/users`,
-  );
+  const authUrl = `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/users`;
+  await page.goto(authUrl);
+  await page.waitForURL(authUrl, { waitUntil: 'networkidle' });
 });
 
 test.afterAll(async () => {

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

@@ -1,9 +1,5 @@
-import {
-  PRO_TEST_PROJECT_NAME,
-  PRO_TEST_PROJECT_SLUG,
-  TEST_WORKSPACE_SLUG,
-} from '@/e2e/env';
-import { createUser, generateTestEmail, openProject } from '@/e2e/utils';
+import { TEST_ORGANIZATION_SLUG, TEST_PROJECT_SUBDOMAIN } from '@/e2e/env';
+import { createUser, generateTestEmail } from '@/e2e/utils';
 import { faker } from '@faker-js/faker';
 import type { Page } from '@playwright/test';
 import { expect, test } from '@playwright/test';
@@ -15,23 +11,9 @@ test.beforeAll(async ({ browser }) => {
 });
 
 test.beforeEach(async () => {
-  await page.goto('/');
-
-  await openProject({
-    page,
-    projectName: PRO_TEST_PROJECT_NAME,
-    workspaceSlug: TEST_WORKSPACE_SLUG,
-    projectSlug: PRO_TEST_PROJECT_SLUG,
-  });
-
-  await page
-    .getByRole('navigation', { name: /main navigation/i })
-    .getByRole('link', { name: /auth/i })
-    .click();
-
-  await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/users`,
-  );
+  const authUrl = `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/users`;
+  await page.goto(authUrl);
+  await page.waitForURL(authUrl, { waitUntil: 'networkidle' });
 });
 
 test.afterAll(async () => {

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

@@ -1,9 +1,5 @@
-import {
-  PRO_TEST_PROJECT_NAME,
-  PRO_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 { navigateToProject, prepareTable } from '@/e2e/utils';
 import { faker } from '@faker-js/faker';
 import type { Page } from '@playwright/test';
 import { expect, test } from '@playwright/test';
@@ -18,17 +14,15 @@ test.beforeAll(async ({ browser }) => {
 test.beforeEach(async () => {
   await page.goto('/');
 
-  await openProject({
+  await navigateToProject({
     page,
-    projectName: PRO_TEST_PROJECT_NAME,
-    workspaceSlug: TEST_WORKSPACE_SLUG,
-    projectSlug: PRO_TEST_PROJECT_SLUG,
+    orgSlug: TEST_ORGANIZATION_SLUG,
+    projectSubdomain: TEST_PROJECT_SUBDOMAIN,
   });
 
-  await page
-    .getByRole('navigation', { name: /main navigation/i })
-    .getByRole('link', { name: /database/i })
-    .click();
+  const databaseRoute = `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default`;
+  await page.goto(databaseRoute);
+  await page.waitForURL(databaseRoute);
 });
 
 test.afterAll(async () => {
@@ -55,7 +49,7 @@ test('should create a simple table', async () => {
   await page.getByRole('button', { name: /create/i }).click();
 
   await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/database/browser/default/public/${tableName}`,
+    `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default/public/${tableName}`,
   );
 
   await expect(
@@ -84,7 +78,7 @@ test('should create a table with unique constraints', async () => {
   await page.getByRole('button', { name: /create/i }).click();
 
   await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/database/browser/default/public/${tableName}`,
+    `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default/public/${tableName}`,
   );
 
   await expect(
@@ -113,7 +107,7 @@ test('should create a table with nullable columns', async () => {
   await page.getByRole('button', { name: /create/i }).click();
 
   await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/database/browser/default/public/${tableName}`,
+    `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default/public/${tableName}`,
   );
 
   await expect(
@@ -146,7 +140,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}/${PRO_TEST_PROJECT_SLUG}/database/browser/default/public/${tableName}`,
+    `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default/public/${tableName}`,
   );
 
   await expect(
@@ -174,7 +168,7 @@ test('should create table with foreign key constraint', async () => {
   await page.getByRole('button', { name: /create/i }).click();
 
   await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${PRO_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();
@@ -219,7 +213,7 @@ test('should create table with foreign key constraint', async () => {
   await page.getByRole('button', { name: /create/i }).click();
 
   await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/database/browser/default/public/${secondTableName}`,
+    `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default/public/${secondTableName}`,
   );
 
   await expect(
@@ -247,7 +241,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}/${PRO_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();

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

@@ -1,9 +1,5 @@
-import {
-  PRO_TEST_PROJECT_NAME,
-  PRO_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, navigateToProject, prepareTable } from '@/e2e/utils';
 import { faker } from '@faker-js/faker';
 import type { Page } from '@playwright/test';
 import { expect, test } from '@playwright/test';
@@ -18,17 +14,15 @@ test.beforeAll(async ({ browser }) => {
 test.beforeEach(async () => {
   await page.goto('/');
 
-  await openProject({
+  await navigateToProject({
     page,
-    projectName: PRO_TEST_PROJECT_NAME,
-    workspaceSlug: TEST_WORKSPACE_SLUG,
-    projectSlug: PRO_TEST_PROJECT_SLUG,
+    orgSlug: TEST_ORGANIZATION_SLUG,
+    projectSubdomain: TEST_PROJECT_SUBDOMAIN,
   });
 
-  await page
-    .getByRole('navigation', { name: /main navigation/i })
-    .getByRole('link', { name: /database/i })
-    .click();
+  const databaseRoute = `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default`;
+  await page.goto(databaseRoute);
+  await page.waitForURL(databaseRoute);
 });
 
 test.afterAll(async () => {
@@ -53,7 +47,7 @@ test('should delete a table', async () => {
   await page.getByRole('button', { name: /create/i }).click();
 
   await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${PRO_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 +57,7 @@ test('should delete a table', async () => {
 
   // navigate to next URL
   await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/database/browser/default/public/**`,
+    `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default/public/**`,
   );
 
   await expect(
@@ -91,7 +85,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}/${PRO_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();
@@ -138,7 +132,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}/${PRO_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/env.ts

@@ -1,5 +1,3 @@
-import slugify from 'slugify';
-
 /**
  * URL of the dashboard to test against.
  */
@@ -8,15 +6,12 @@ export const TEST_DASHBOARD_URL = process.env.NHOST_TEST_DASHBOARD_URL;
 /**
  * Name of the workspace 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.
@@ -24,25 +19,9 @@ export const TEST_WORKSPACE_SLUG = slugify(TEST_WORKSPACE_NAME, {
 export const TEST_PROJECT_NAME = process.env.NHOST_TEST_PROJECT_NAME;
 
 /**
- * Name of the pro test project to test against.
+ * Subdomain of the project to test against.
  */
-export const PRO_TEST_PROJECT_NAME = process.env.NHOST_PRO_TEST_PROJECT_NAME;
-
-/**
- * Slugified name of the project to test against.
- */
-export const TEST_PROJECT_SLUG = slugify(TEST_PROJECT_NAME, {
-  lower: true,
-  strict: true,
-});
-
-/**
- * Slugified name of the pro project to test against.
- */
-export const PRO_TEST_PROJECT_SLUG = slugify(PRO_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.
@@ -59,3 +38,5 @@ 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_PERSONAL_ORG_SLUG = process.env.NHOST_TEST_PERSONAL_ORG_SLUG;

dashboard/e2e/overview/overview.test.ts

@@ -1,12 +1,7 @@
-import {
-  TEST_PROJECT_NAME,
-  TEST_PROJECT_SLUG,
-  TEST_WORKSPACE_NAME,
-  TEST_WORKSPACE_SLUG,
-} from '@/e2e/env';
-import { openProject } from '@/e2e/utils';
+import { TEST_ORGANIZATION_SLUG, TEST_PROJECT_SUBDOMAIN } from '@/e2e/env';
 import type { Page } from '@playwright/test';
 import { expect, test } from '@playwright/test';
+import { navigateToProject } from '../utils';
 
 let page: Page;
 
@@ -14,11 +9,11 @@ test.beforeAll(async ({ browser }) => {
   page = await browser.newPage();
 
   await page.goto('/');
-  await openProject({
+
+  await navigateToProject({
     page,
-    projectName: TEST_PROJECT_NAME,
-    workspaceSlug: TEST_WORKSPACE_SLUG,
-    projectSlug: TEST_PROJECT_SLUG,
+    orgSlug: TEST_ORGANIZATION_SLUG,
+    projectSubdomain: TEST_PROJECT_SUBDOMAIN,
   });
 });
 
@@ -26,60 +21,34 @@ 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 () => {
+  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();
-});
 
-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();
+  const links = [
+    'Nhost Automation Test Project',
+    'Overview',
+    'Database',
+    'GraphQL',
+    'Hasura',
+    'Auth',
+    'Storage',
+    'Run',
+    'AI',
+    'Deployments',
+    'Backups',
+    'Logs',
+    'Metrics',
+    'Settings',
+  ];
 
-  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();
+  for (const linkName of links) {
+    const link =
+      linkName === 'Settings'
+        ? page.getByRole('link', { name: linkName }).first()
+        : page.getByRole('link', { name: linkName });
+    await expect(link).toBeVisible();
+  }
 });
 
 test("should show the project's region and subdomain", async () => {
@@ -96,27 +65,3 @@ test('should not have a GitHub repository connected', async () => {
     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

@@ -1,11 +1,7 @@
-import {
-  PRO_TEST_PROJECT_NAME,
-  PRO_TEST_PROJECT_SLUG,
-  TEST_WORKSPACE_SLUG,
-} from '@/e2e/env';
-import { openProject } from '@/e2e/utils';
+import { TEST_ORGANIZATION_SLUG, TEST_PROJECT_SUBDOMAIN } from '@/e2e/env';
 import type { Page } from '@playwright/test';
 import { expect, test } from '@playwright/test';
+import { navigateToProject } from '../utils';
 
 let page: Page;
 
@@ -16,17 +12,15 @@ test.beforeAll(async ({ browser }) => {
 test.beforeEach(async () => {
   await page.goto('/');
 
-  await openProject({
+  await navigateToProject({
     page,
-    projectName: PRO_TEST_PROJECT_NAME,
-    workspaceSlug: TEST_WORKSPACE_SLUG,
-    projectSlug: PRO_TEST_PROJECT_SLUG,
+    orgSlug: TEST_ORGANIZATION_SLUG,
+    projectSubdomain: TEST_PROJECT_SUBDOMAIN,
   });
 
-  await page
-    .getByRole('navigation', { name: /main navigation/i })
-    .getByRole('link', { name: /run/i })
-    .click();
+  const runRoute = `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/run`;
+  await page.goto(runRoute);
+  await page.waitForURL(runRoute);
 });
 
 test.afterAll(async () => {
@@ -39,6 +33,10 @@ test('should create and delete a run service', async () => {
   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(
@@ -47,12 +45,6 @@ test('should create and delete a run service', async () => {
 
   await page.getByRole('button', { name: /confirm/i }).click();
 
-  await expect(
-    page.getByRole('heading', { name: /service details/i }),
-  ).toBeVisible();
-
-  await page.getByRole('button', { name: /ok/i }).click();
-
   await expect(page.getByRole('heading', { name: /test/i })).toBeVisible();
 
   await page.getByLabel(/more options/i).click();

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: 'networkidle' },
+  );
   await page.context().storageState({ path: 'e2e/.auth/user.json' });
 });

dashboard/e2e/utils.ts

@@ -5,24 +5,27 @@ import type { Page } from '@playwright/test';
  * 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: 'networkidle' });
+    await page.waitForURL(projectUrl, { timeout: 10000 });
+  } catch (error) {
+    console.error(`Failed to navigate to project URL: ${projectUrl}`, error);
+  }
 }
 
 /**

dashboard/global-teardown.ts

@@ -1,11 +1,10 @@
 import {
   TEST_DASHBOARD_URL,
+  TEST_ORGANIZATION_SLUG,
   TEST_PROJECT_ADMIN_SECRET,
-  TEST_PROJECT_NAME,
-  TEST_PROJECT_SLUG,
-  TEST_WORKSPACE_SLUG,
+  TEST_PROJECT_SUBDOMAIN,
 } from '@/e2e/env';
-import { openProject } from '@/e2e/utils';
+import { navigateToProject } from '@/e2e/utils';
 import { chromium } from '@playwright/test';
 
 async function globalTeardown() {
@@ -18,13 +17,10 @@ async function globalTeardown() {
 
   const page = await context.newPage();
 
-  await page.goto('/');
-
-  await openProject({
+  await navigateToProject({
     page,
-    projectName: TEST_PROJECT_NAME,
-    workspaceSlug: TEST_WORKSPACE_SLUG,
-    projectSlug: TEST_PROJECT_SLUG,
+    orgSlug: TEST_ORGANIZATION_SLUG,
+    projectSubdomain: TEST_PROJECT_SUBDOMAIN,
   });
 
   const pagePromise = context.waitForEvent('page');

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/dashboard",
-  "version": "2.1.1",
+  "version": "2.7.2",
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -42,6 +42,7 @@
     "@mui/x-date-pickers": "^5.0.20",
     "@nhost/nextjs": "workspace:*",
     "@nhost/react-apollo": "workspace:*",
+    "@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.1",
@@ -127,7 +128,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",

dashboard/playwright.config.ts

@@ -6,7 +6,7 @@ dotenv.config({ path: path.resolve(__dirname, '.env.test') });
 
 export default defineConfig({
   testDir: './e2e',
-  timeout: 30 * 1000,
+  timeout: 40 * 1000,
   expect: {
     timeout: 5000,
   },
@@ -20,6 +20,9 @@ export default defineConfig({
     actionTimeout: 0,
     trace: 'on-first-retry',
     baseURL: process.env.NHOST_TEST_DASHBOARD_URL,
+    launchOptions: {
+      slowMo: 500,
+    },
   },
   projects: [
     {

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

@@ -258,6 +258,7 @@ function DialogProvider({ children }: PropsWithChildren<unknown>) {
           className: twMerge(
             'max-w-md w-full',
             dialogProps?.PaperProps?.className,
+            'z-30',
           ),
         }}
       >
@@ -288,6 +289,7 @@ function DialogProvider({ children }: PropsWithChildren<unknown>) {
         open={drawerOpen}
         onClose={closeDrawerWithDirtyGuard}
         SlideProps={{ onExited: clearDrawerContent, unmountOnExit: false }}
+        className="z-40"
         PaperProps={{
           ...drawerProps?.PaperProps,
           className: twMerge(

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

@@ -50,9 +50,9 @@ 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 gap-2">
+        <div className="flex flex-col gap-2 space-y-2 lg:flex-row lg:items-center lg:space-x-2 lg:space-y-0">
           <Button
-            className="lg:w-auto max-w-xs"
+            className="max-w-xs lg:w-auto"
             onClick={() => {
               if (isOwner) {
                 setTransferProjectDialogOpen(true);
@@ -68,8 +68,6 @@ export default function UpgradeToProBanner({
                     secondaryButtonText: 'I understand',
                     hidePrimaryAction: true,
                   },
-
-
                 });
               }
             }}
@@ -101,6 +99,7 @@ export default function UpgradeToProBanner({
         width={300}
         height={140}
         objectFit="contain"
+        className=""
         alt="Upgrade to Pro illustration"
       />
     </Box>

dashboard/src/components/layout/Header/Header.tsx

@@ -5,12 +5,15 @@ import { LocalAccountMenu } from '@/components/layout/LocalAccountMenu';
 import { MobileNav } from '@/components/layout/MobileNav';
 import { Logo } from '@/components/presentational/Logo';
 import { Box } from '@/components/ui/v2/Box';
-import { Button } from '@/components/ui/v2/Button';
 import { GraphiteIcon } from '@/components/ui/v2/icons/GraphiteIcon';
-import { DevAssistant } from '@/features/ai/DevAssistant';
+import { Button } from '@/components/ui/v3/button';
+import { DevAssistant as WorkspaceProjectDevAssistant } from '@/features/ai/DevAssistant';
 import { AnnouncementsTray } from '@/features/orgs/components/members/components/AnnouncementsTray';
 import { NotificationsTray } from '@/features/orgs/components/members/components/NotificationsTray';
+import { DevAssistant } from '@/features/orgs/projects/ai/DevAssistant';
+import { useOrgs } from '@/features/orgs/projects/hooks/useOrgs';
 import { useProject } from '@/features/orgs/projects/hooks/useProject';
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
 import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
 import { getToastStyleProps } from '@/utils/constants/settings';
 import type { DetailedHTMLProps, HTMLProps, PropsWithoutRef } from 'react';
@@ -25,14 +28,14 @@ export interface HeaderProps
 
 export default function Header({ className, ...props }: HeaderProps) {
   const isPlatform = useIsPlatform();
-
   const { openDrawer } = useDialog();
-
   const { project } = useProject();
+  const { currentProject: workspaceProject } = useCurrentWorkspaceAndProject();
+  const { currentOrg: org } = useOrgs();
 
   const openDevAssistant = () => {
     // The dev assistant can be only answer questions related to a particular project
-    if (!project) {
+    if (!project && !workspaceProject) {
       toast.error('You need to be inside a project to open the Assistant', {
         style: getToastStyleProps().style,
         ...getToastStyleProps().error,
@@ -41,10 +44,17 @@ export default function Header({ className, ...props }: HeaderProps) {
       return;
     }
 
-    openDrawer({
-      title: <GraphiteIcon />,
-      component: <DevAssistant />,
-    });
+    if (org && project) {
+      openDrawer({
+        title: <GraphiteIcon />,
+        component: <DevAssistant />,
+      });
+    } else {
+      openDrawer({
+        title: <GraphiteIcon />,
+        component: <WorkspaceProjectDevAssistant />,
+      });
+    }
   };
 
   return (
@@ -57,15 +67,19 @@ export default function Header({ className, ...props }: HeaderProps) {
       sx={{ backgroundColor: 'background.paper' }}
       {...props}
     >
-      <div className="w-6 h-6 mr-2">
-        <Logo className="w-6 h-6 mx-auto cursor-pointer" />
+      <div className="mr-2 h-6 w-6">
+        <Logo className="mx-auto h-6 w-6 cursor-pointer" />
       </div>
 
       <BreadcrumbNav />
 
-      <div className="items-center hidden grid-flow-col gap-1 sm:grid">
-        <Button className="rounded-full" onClick={openDevAssistant}>
-          <GraphiteIcon className="w-4 h-4" />
+      <div className="hidden grid-flow-col items-center gap-1 sm:grid">
+        <Button
+          variant="outline"
+          className="h-8 w-8"
+          onClick={openDevAssistant}
+        >
+          <GraphiteIcon className="h-4" />
         </Button>
 
         <NotificationsTray />

dashboard/src/components/layout/Header/OrgsComboBox.tsx

@@ -126,9 +126,10 @@ export default function OrgsComboBox() {
             <CommandGroup heading="Organizations">
               {orgsOptions.map((option) => (
                 <CommandItem
+                  keywords={[option.label]}
                   key={option.value}
-                  value={option.label}
-                  className="flex items-center justify-between bg-background text-foreground dark:hover:bg-muted"
+                  value={option.value}
+                  className="flex items-center text-foreground dark:hover:bg-muted"
                   onSelect={() => {
                     setSelectedItem(option);
                     setOpen(false);
@@ -143,17 +144,15 @@ export default function OrgsComboBox() {
                     }
                   }}
                 >
-                  <div className="flex items-center font-normal">
-                    <Check
-                      className={cn(
-                        'mr-2 h-4 w-4',
-                        selectedItem?.value === option.value
-                          ? 'opacity-100'
-                          : 'opacity-0',
-                      )}
-                    />
-                    <span className="truncate max-w-52">{option.label}</span>
-                  </div>
+                  <Check
+                    className={cn(
+                      'mr-2 h-4 w-4',
+                      selectedItem?.value === option.value
+                        ? 'opacity-100'
+                        : 'opacity-0',
+                    )}
+                  />
+                  <span className="w-full truncate">{option.label}</span>
                   {renderBadge(option.plan)}
                 </CommandItem>
               ))}
@@ -166,9 +165,10 @@ export default function OrgsComboBox() {
                 <CommandGroup heading="Workspaces">
                   {workspacesOptions.map((option) => (
                     <CommandItem
+                      keywords={[option.label]}
                       key={option.value}
-                      value={option.label}
-                      className="flex items-center justify-between bg-background text-foreground hover:bg-accent dark:hover:bg-muted"
+                      value={option.value}
+                      className="flex items-center text-foreground dark:hover:bg-muted"
                       onSelect={() => {
                         setSelectedItem(option);
                         setOpen(false);
@@ -183,19 +183,15 @@ export default function OrgsComboBox() {
                         }
                       }}
                     >
-                      <div className="flex items-center">
-                        <Check
-                          className={cn(
-                            'mr-2 h-4 w-4',
-                            selectedItem?.value === option.value
-                              ? 'opacity-100'
-                              : 'opacity-0',
-                          )}
-                        />
-                        <span className="truncate max-w-52">
-                          {option.label}
-                        </span>
-                      </div>
+                      <Check
+                        className={cn(
+                          'mr-2 h-4 w-4',
+                          selectedItem?.value === option.value
+                            ? 'opacity-100'
+                            : 'opacity-0',
+                        )}
+                      />
+                      <span className="w-full truncate">{option.label}</span>
                       {renderBadge(option.plan)}
                     </CommandItem>
                   ))}

dashboard/src/components/layout/Header/ProjectSettingsPagesComboBox.tsx

@@ -38,6 +38,11 @@ const projectSettingsPages = [
     slug: 'authentication',
     route: 'authentication',
   },
+  {
+    name: 'JWT',
+    slug: 'jwt',
+    route: 'jwt',
+  },
   {
     name: 'Sign-In methods',
     slug: 'sign-in-methods',
@@ -68,6 +73,7 @@ const projectSettingsPages = [
     route: 'rate-limiting',
   },
   { name: 'AI', slug: 'ai', route: 'ai' },
+  { name: 'Observability', slug: 'metrics', route: 'metrics' },
   { name: 'Configuration Editor', slug: 'editor', route: 'editor' },
 ].map((item) => ({
   label: item.name,
@@ -125,7 +131,7 @@ export default function ProjectSettingsPagesComboBox() {
           ) : (
             <>Select a page</>
           )}
-          <ChevronsUpDown className="w-5 h-5 text-muted-foreground" />
+          <ChevronsUpDown className="h-5 w-5 text-muted-foreground" />
         </Button>
       </PopoverTrigger>
       <PopoverContent className="p-0" side="bottom" align="start">
@@ -155,7 +161,7 @@ export default function ProjectSettingsPagesComboBox() {
                     )}
                   />
                   <div className="flex flex-row items-center gap-2">
-                    <span className="truncate max-w-52">{option.label}</span>
+                    <span className="max-w-52 truncate">{option.label}</span>
                   </div>
                 </CommandItem>
               ))}

dashboard/src/components/layout/Header/ProjectsComboBox.tsx

@@ -8,13 +8,20 @@ import {
   CommandItem,
   CommandList,
 } from '@/components/ui/v3/command';
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from '@/components/ui/v3/hover-card';
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from '@/components/ui/v3/popover';
+import { useAppState } from '@/features/orgs/projects/common/hooks/useAppState';
 import { useOrgs } from '@/features/orgs/projects/hooks/useOrgs';
 import { cn } from '@/lib/utils';
+import { ApplicationStatus } from '@/types/application';
 import { Box, Check, ChevronsUpDown } from 'lucide-react';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
@@ -24,17 +31,76 @@ type Option = {
   label: string;
 };
 
+function ProjectStatusIndicator({ status }: { status: ApplicationStatus }) {
+  const indicatorStyles: Record<
+    number,
+    { className: string; description: string }
+  > = {
+    [ApplicationStatus.Errored]: {
+      className: 'bg-destructive',
+      description: 'Project errored',
+    },
+    [ApplicationStatus.Pausing]: {
+      className: 'bg-primary-main animate-blinking',
+      description: 'Project is pausing',
+    },
+    [ApplicationStatus.Restoring]: {
+      className: 'bg-primary-main animate-blinking',
+      description: 'Project is restoring',
+    },
+    [ApplicationStatus.Paused]: {
+      className: 'bg-slate-400',
+      description: 'Project is paused',
+    },
+    [ApplicationStatus.Unpausing]: {
+      className: 'bg-primary-main animate-blinking',
+      description: 'Project is unpausing',
+    },
+    [ApplicationStatus.Live]: {
+      className: 'bg-primary-main',
+      description: 'Project is live',
+    },
+  };
+  const style = indicatorStyles[status];
+
+  if (style) {
+    return (
+      <HoverCard openDelay={0}>
+        <HoverCardTrigger asChild>
+          <span
+            className={cn('mt-[1px] h-2 w-2 rounded-full', style.className)}
+          />
+        </HoverCardTrigger>
+        <HoverCardContent side="top" className="h-fit w-fit py-2">
+          {style.description}
+        </HoverCardContent>
+      </HoverCard>
+    );
+  }
+
+  return null;
+}
+
 export default function ProjectsComboBox() {
   const {
     query: { appSubdomain },
     push,
   } = useRouter();
 
+  const { state: appState } = useAppState();
   const { currentOrg: { slug: orgSlug, apps = [] } = {} } = useOrgs();
-  const selectedProjectFromUrl = apps.find(
-    (item) => item.subdomain === appSubdomain,
-  );
+
   const [selectedProject, setSelectedProject] = useState<Option | null>(null);
+  const [open, setOpen] = useState(false);
+
+  const options: Option[] = apps.map((app) => ({
+    label: app.name,
+    value: app.subdomain,
+  }));
+
+  const selectedProjectFromUrl = apps.find(
+    (app) => app.subdomain === appSubdomain,
+  );
 
   useEffect(() => {
     if (selectedProjectFromUrl) {
@@ -45,67 +111,64 @@ export default function ProjectsComboBox() {
     }
   }, [selectedProjectFromUrl]);
 
-  const options: Option[] = apps.map((app) => ({
-    label: app.name,
-    value: app.subdomain,
-  }));
-
-  const [open, setOpen] = useState(false);
+  const handleProjectSelect = (option: Option) => {
+    setSelectedProject(option);
+    setOpen(false);
+    push(`/orgs/${orgSlug}/projects/${option.value}`);
+  };
 
   return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          variant="ghost"
-          size="sm"
-          className="justify-start gap-2 bg-background text-foreground hover:bg-accent dark:hover:bg-muted"
-        >
-          {selectedProject ? (
-            <div className="flex flex-row items-center justify-center gap-1">
-              <Box className="w-4 h-4" />
-              {selectedProject.label}
-              <ProjectStatus />
-            </div>
-          ) : (
-            <>Select a project</>
-          )}
-          <ChevronsUpDown className="w-5 h-5 text-muted-foreground" />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="p-0" side="bottom" align="start">
-        <Command>
-          <CommandInput placeholder="Select a project..." />
-          <CommandList>
-            <CommandEmpty>No results found.</CommandEmpty>
-            <CommandGroup>
-              {options.map((option) => (
-                <CommandItem
-                  key={option.value}
-                  value={option.label}
-                  onSelect={() => {
-                    setSelectedProject(option);
-                    setOpen(false);
-                    push(`/orgs/${orgSlug}/projects/${option.value}`);
-                  }}
-                >
-                  <Check
-                    className={cn(
-                      'mr-2 h-4 w-4',
-                      selectedProject?.value === option.value
-                        ? 'opacity-100'
-                        : 'opacity-0',
-                    )}
-                  />
-                  <div className="flex flex-row items-center gap-1">
-                    <Box className="w-4 h-4" />
-                    <span className="truncate max-w-52">{option.label}</span>
-                  </div>
-                </CommandItem>
-              ))}
-            </CommandGroup>
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
+    <div className="flex items-center gap-1">
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="justify-start gap-2 bg-background text-foreground hover:bg-accent dark:hover:bg-muted"
+          >
+            {selectedProject ? (
+              <div className="flex items-center gap-2">
+                <ProjectStatusIndicator status={appState} />
+                {selectedProject.label}
+                <ProjectStatus />
+              </div>
+            ) : (
+              <>Select a project</>
+            )}
+            <ChevronsUpDown className="h-5 w-5 text-muted-foreground" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="p-0" side="bottom" align="start">
+          <Command>
+            <CommandInput placeholder="Select a project..." />
+            <CommandList>
+              <CommandEmpty>No results found.</CommandEmpty>
+              <CommandGroup>
+                {options.map((option) => (
+                  <CommandItem
+                    key={option.value}
+                    value={option.value}
+                    onSelect={() => handleProjectSelect(option)}
+                  >
+                    <Check
+                      className={cn(
+                        'mr-2 h-4 w-4',
+                        selectedProject?.value === option.value
+                          ? 'opacity-100'
+                          : 'opacity-0',
+                      )}
+                    />
+                    <div className="flex items-center gap-1">
+                      <Box className="h-4 w-4" />
+                      <span className="max-w-52 truncate">{option.label}</span>
+                    </div>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    </div>
   );
 }

dashboard/src/components/layout/MainNav/NavTree.tsx

@@ -30,73 +30,73 @@ import { useTreeNavState } from './TreeNavStateContext';
 const projectPages = [
   {
     name: 'Overview',
-    icon: <HomeIcon className="w-4 h-4" />,
+    icon: <HomeIcon className="h-4 w-4" />,
     route: '',
     slug: 'overview',
   },
   {
     name: 'Database',
-    icon: <DatabaseIcon className="w-4 h-4" />,
+    icon: <DatabaseIcon className="h-4 w-4" />,
     route: 'database/browser/default',
     slug: 'database',
   },
   {
     name: 'GraphQL',
-    icon: <GraphQLIcon className="w-4 h-4" />,
+    icon: <GraphQLIcon className="h-4 w-4" />,
     route: 'graphql',
     slug: 'graphql',
   },
   {
     name: 'Hasura',
-    icon: <HasuraIcon className="w-4 h-4" />,
+    icon: <HasuraIcon className="h-4 w-4" />,
     route: 'hasura',
     slug: 'hasura',
   },
   {
     name: 'Auth',
-    icon: <UserIcon className="w-4 h-4" />,
+    icon: <UserIcon className="h-4 w-4" />,
     route: 'users',
     slug: 'users',
   },
   {
     name: 'Storage',
-    icon: <StorageIcon className="w-4 h-4" />,
+    icon: <StorageIcon className="h-4 w-4" />,
     route: 'storage',
     slug: 'storage',
   },
   {
     name: 'Run',
-    icon: <ServicesIcon className="w-4 h-4" />,
+    icon: <ServicesIcon className="h-4 w-4" />,
     route: 'run',
     slug: 'run',
   },
   {
     name: 'AI',
-    icon: <AIIcon className="w-4 h-4" />,
+    icon: <AIIcon className="h-4 w-4" />,
     route: 'ai/auto-embeddings',
     slug: 'ai',
   },
   {
     name: 'Deployments',
-    icon: <RocketIcon className="w-4 h-4" />,
+    icon: <RocketIcon className="h-4 w-4" />,
     route: 'deployments',
     slug: 'deployments',
   },
   {
     name: 'Backups',
-    icon: <CloudIcon className="w-4 h-4" />,
+    icon: <CloudIcon className="h-4 w-4" />,
     route: 'backups',
     slug: 'backups',
   },
   {
     name: 'Logs',
-    icon: <FileTextIcon className="w-4 h-4" />,
+    icon: <FileTextIcon className="h-4 w-4" />,
     route: 'logs',
     slug: 'logs',
   },
   {
     name: 'Metrics',
-    icon: <GaugeIcon className="w-4 h-4" />,
+    icon: <GaugeIcon className="h-4 w-4" />,
     route: 'metrics',
     slug: 'metrics',
   },
@@ -121,6 +121,11 @@ const projectSettingsPages = [
     slug: 'authentication',
     route: 'authentication',
   },
+  {
+    name: 'JWT',
+    slug: 'jwt',
+    route: 'jwt',
+  },
   {
     name: 'Sign-In methods',
     slug: 'sign-in-methods',
@@ -151,6 +156,7 @@ const projectSettingsPages = [
     route: 'rate-limiting',
   },
   { name: 'AI', slug: 'ai', route: 'ai' },
+  { name: 'Observability', slug: 'metrics', route: 'metrics' },
   { name: 'Configuration Editor', slug: 'editor', route: 'editor' },
 ];
 
@@ -203,7 +209,7 @@ const createOrganization = (org: Org, isPlatform: boolean) => {
     data: {
       name: 'New project',
       slug: 'new',
-      icon: <Plus className="w-4 h-4 mr-1 font-bold" strokeWidth={3} />,
+      icon: <Plus className="mr-1 h-4 w-4 font-bold" strokeWidth={3} />,
       targetUrl: `/orgs/${org.slug}/projects/new`,
       disabled: !isPlatform,
     },
@@ -218,7 +224,7 @@ const createOrganization = (org: Org, isPlatform: boolean) => {
       data: {
         name: app.name,
         slug: app.subdomain,
-        icon: <Box className="w-4 h-4" />,
+        icon: <Box className="h-4 w-4" />,
         targetUrl: `/orgs/${org.slug}/projects/${app.subdomain}`,
       },
       children: projectPages.map(
@@ -397,9 +403,9 @@ export default function NavTree() {
             className="h-8 px-1"
           >
             {context.isExpanded ? (
-              <ChevronDown className="w-4 h-4 font-bold" strokeWidth={3} />
+              <ChevronDown className="h-4 w-4 font-bold" strokeWidth={3} />
             ) : (
-              <ChevronRight className="w-4 h-4" strokeWidth={3} />
+              <ChevronRight className="h-4 w-4" strokeWidth={3} />
             )}
           </Button>
         );
@@ -491,9 +497,9 @@ export default function NavTree() {
         }
 
         return (
-          <div className="flex flex-row w-full">
+          <div className="flex w-full flex-row">
             <div className="flex justify-center px-[12px] pb-3">
-              <div className="w-0 h-full border-r border-dashed" />
+              <div className="h-full w-0 border-r border-dashed" />
             </div>
             <ul {...containerProps} className="w-full">
               {children}

dashboard/src/components/layout/MainNav/WorkspacesNavTree.tsx

@@ -37,73 +37,73 @@ import { useTreeNavState } from './TreeNavStateContext';
 const projectPages = [
   {
     name: 'Overview',
-    icon: <HomeIcon className="w-4 h-4" />,
+    icon: <HomeIcon className="h-4 w-4" />,
     route: '',
     slug: 'overview',
   },
   {
     name: 'Database',
-    icon: <DatabaseIcon className="w-4 h-4" />,
+    icon: <DatabaseIcon className="h-4 w-4" />,
     route: 'database/browser/default',
     slug: 'database',
   },
   {
     name: 'GraphQL',
-    icon: <GraphQLIcon className="w-4 h-4" />,
+    icon: <GraphQLIcon className="h-4 w-4" />,
     route: 'graphql',
     slug: 'graphql',
   },
   {
     name: 'Hasura',
-    icon: <HasuraIcon className="w-4 h-4" />,
+    icon: <HasuraIcon className="h-4 w-4" />,
     route: 'hasura',
     slug: 'hasura',
   },
   {
     name: 'Auth',
-    icon: <UserIcon className="w-4 h-4" />,
+    icon: <UserIcon className="h-4 w-4" />,
     route: 'users',
     slug: 'users',
   },
   {
     name: 'Storage',
-    icon: <StorageIcon className="w-4 h-4" />,
+    icon: <StorageIcon className="h-4 w-4" />,
     route: 'storage',
     slug: 'storage',
   },
   {
     name: 'Run',
-    icon: <ServicesIcon className="w-4 h-4" />,
+    icon: <ServicesIcon className="h-4 w-4" />,
     route: 'services',
     slug: 'services',
   },
   {
     name: 'AI',
-    icon: <AIIcon className="w-4 h-4" />,
+    icon: <AIIcon className="h-4 w-4" />,
     route: 'ai/auto-embeddings',
     slug: 'ai',
   },
   {
     name: 'Deployments',
-    icon: <RocketIcon className="w-4 h-4" />,
+    icon: <RocketIcon className="h-4 w-4" />,
     route: 'deployments',
     slug: 'deployments',
   },
   {
     name: 'Backups',
-    icon: <CloudIcon className="w-4 h-4" />,
+    icon: <CloudIcon className="h-4 w-4" />,
     route: 'backups',
     slug: 'backups',
   },
   {
     name: 'Logs',
-    icon: <FileTextIcon className="w-4 h-4" />,
+    icon: <FileTextIcon className="h-4 w-4" />,
     route: 'logs',
     slug: 'logs',
   },
   {
     name: 'Metrics',
-    icon: <GaugeIcon className="w-4 h-4" />,
+    icon: <GaugeIcon className="h-4 w-4" />,
     route: 'metrics',
     slug: 'metrics',
   },
@@ -210,7 +210,7 @@ const createWorkspace = (workspace: Workspace) => {
       data: {
         name: app.name,
         slug: app.slug,
-        icon: <Box className="w-4 h-4" />,
+        icon: <Box className="h-4 w-4" />,
         targetUrl: `/${workspace.slug}/${app.slug}`,
       },
       children: projectPages.map(
@@ -324,7 +324,7 @@ export default function WorkspacesNavTree() {
           className={cn(
             item?.index === 'workspaces' && 'font-bold',
             context.isFocused ? 'font-bold text-primary' : '',
-            'max-w-52 truncate',
+            'max-w-40 truncate',
           )}
         >
           {item.data.name}
@@ -350,7 +350,7 @@ export default function WorkspacesNavTree() {
                   className="font-medium"
                 >
                   announcement
-                  <ArrowSquareOutIcon className="w-4 h-4 mb-1 ml-1" />
+                  <ArrowSquareOutIcon className="mb-1 ml-1 h-4 w-4" />
                 </Link>
               </div>
             </HoverCardContent>
@@ -421,9 +421,9 @@ export default function WorkspacesNavTree() {
             className="h-8 px-1"
           >
             {context.isExpanded ? (
-              <ChevronDown className="w-4 h-4 font-bold" strokeWidth={3} />
+              <ChevronDown className="h-4 w-4 font-bold" strokeWidth={3} />
             ) : (
-              <ChevronRight className="w-4 h-4" strokeWidth={3} />
+              <ChevronRight className="h-4 w-4" strokeWidth={3} />
             )}
           </Button>
         );
@@ -444,9 +444,9 @@ export default function WorkspacesNavTree() {
         }
 
         return (
-          <div className="flex flex-row w-full">
+          <div className="flex w-full flex-row">
             <div className="flex justify-center px-[12px] pb-3">
-              <div className="w-0 h-full border-r border-dashed" />
+              <div className="h-full w-0 border-r border-dashed" />
             </div>
             <ul {...containerProps} className="w-full">
               {children}

dashboard/src/components/layout/SettingsLayout/SettingsLayout.tsx

@@ -17,18 +17,18 @@ export default function SettingsLayout({ children }: SettingsLayoutProps) {
   return (
     <Box
       sx={{ backgroundColor: 'background.default' }}
-      className="flex w-full flex-auto flex-col overflow-y-auto overflow-x-hidden"
+      className="flex flex-col flex-auto w-full overflow-x-hidden overflow-y-auto"
     >
       <Box
         sx={{ backgroundColor: 'background.default' }}
-        className="flex h-full flex-col"
+        className="flex flex-col h-full"
       >
         <RetryableErrorBoundary>
           <div className="flex flex-col space-y-2">
             {hasGitRepo && (
               <Alert
                 severity="warning"
-                className="grid grid-flow-row place-content-center gap-2"
+                className="grid grid-flow-row gap-2 place-content-center"
               >
                 <Text color="warning" className="text-sm">
                   As you have a connected repository, make sure to synchronize
@@ -52,9 +52,9 @@ export default function SettingsLayout({ children }: SettingsLayoutProps) {
                     target="_blank"
                     rel="noopener noreferrer"
                     className="underline"
-                    href="https://docs.nhost.io/cli/overlays"
+                    href="https://docs.nhost.io/guides/cli/configuration-overlays#configuration-overlays"
                   >
-                    docs.nhost.io/cli/overlays
+                    Configuration Overlays
                   </a>{' '}
                   for guidance.
                 </Text>

dashboard/src/components/ui/v3/accordion.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ChevronDown } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn('border-b', className)}
+    {...props}
+  />
+));
+AccordionItem.displayName = 'AccordionItem';
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm transition-all"
+    {...props}
+  >
+    <div className={cn('pb-4 pt-0', className)}>{children}</div>
+  </AccordionPrimitive.Content>
+));
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

dashboard/src/components/ui/v3/button.tsx

@@ -13,7 +13,7 @@ const buttonVariants = cva(
         destructive:
           'bg-destructive text-destructive-foreground hover:bg-destructive/90',
         outline:
-          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+          'border bg-background hover:bg-accent hover:text-accent-foreground',
         secondary:
           'bg-secondary text-secondary-foreground hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',

dashboard/src/components/ui/v3/dialog.tsx

@@ -19,7 +19,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      'fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/30 py-4 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      'fixed inset-0 z-[50] grid place-items-center overflow-y-auto bg-black/30 py-4 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
       className,
     )}
     {...props}

dashboard/src/components/ui/v3/input.tsx

@@ -3,20 +3,30 @@ import * as React from 'react';
 import { cn } from '@/lib/utils';
 
 export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix'> {
+  prefix?: React.ReactNode;
+}
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => {
+  ({ className, type, prefix, ...props }, ref) => {
     return (
-      <input
-        type={type}
-        className={cn(
-          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-accent',
-          className,
+      <div className="relative flex items-center">
+        {prefix && (
+          <span className="pointer-events-none absolute left-3 flex items-center text-muted-foreground">
+            {prefix}
+          </span>
         )}
-        ref={ref}
-        {...props}
-      />
+        <input
+          type={type}
+          className={cn(
+            'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-accent',
+            prefix && 'pl-6',
+            className,
+          )}
+          ref={ref}
+          {...props}
+        />
+      </div>
     );
   },
 );

dashboard/src/features/authentication/settings/components/DisableNewUsersSettings/DisableNewUsersSettings.tsx

@@ -9,7 +9,6 @@ import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
 import { useLocalMimirClient } from '@/hooks/useLocalMimirClient';
 import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import {
-  GetAuthenticationSettingsDocument,
   useGetAuthenticationSettingsQuery,
   useUpdateConfigMutation,
 } from '@/utils/__generated__/graphql';
@@ -30,7 +29,6 @@ export default function DisableNewUsersSettings() {
   const localMimirClient = useLocalMimirClient();
   const { currentProject } = useCurrentWorkspaceAndProject();
   const [updateConfig] = useUpdateConfigMutation({
-    refetchQueries: [GetAuthenticationSettingsDocument],
     ...(!isPlatform ? { client: localMimirClient } : {}),
   });
 
@@ -42,14 +40,14 @@ export default function DisableNewUsersSettings() {
   const form = useForm<DisableNewUsersFormValues>({
     reValidateMode: 'onSubmit',
     defaultValues: {
-      disabled: !data?.config?.auth?.signUp?.enabled,
+      disabled: data?.config?.auth?.signUp?.disableNewUsers,
     },
   });
 
   useEffect(() => {
     if (!loading) {
       form.reset({
-        disabled: !data?.config?.auth?.signUp?.enabled,
+        disabled: data?.config?.auth?.signUp?.disableNewUsers,
       });
     }
   }, [loading, data, form]);
@@ -58,7 +56,7 @@ export default function DisableNewUsersSettings() {
     return (
       <ActivityIndicator
         delay={1000}
-        label="Loading disabled sign up settings..."
+        label="Loading disabled new users settings..."
         className="justify-center"
       />
     );
@@ -79,7 +77,7 @@ export default function DisableNewUsersSettings() {
         config: {
           auth: {
             signUp: {
-              enabled: !values.disabled,
+              disableNewUsers: values.disabled,
             },
           },
         },
@@ -104,10 +102,10 @@ export default function DisableNewUsersSettings() {
         }
       },
       {
-        loadingMessage: 'Disabling new user sign ups...',
-        successMessage: 'New user sign ups have been disabled successfully.',
+        loadingMessage: 'Disabling new users sign ins...',
+        successMessage: 'New users sign ins have been disabled successfully.',
         errorMessage:
-          'An error occurred while trying to disable new user sign ups.',
+          'An error occurred while trying to disable new users sign ins.',
       },
     );
   };

dashboard/src/features/authentication/settings/gql/getAuthenticationSettings.gql

@@ -15,6 +15,7 @@ query GetAuthenticationSettings($appId: uuid!) {
       }
       signUp {
         enabled
+        disableNewUsers
       }
       session {
         accessToken {

dashboard/src/features/orgs/components/CreateOrgFormDialog/CreateOrgFormDialog.tsx

@@ -1,3 +1,4 @@
+import { Link } from '@/components/ui/v2/Link';
 import { Button } from '@/components/ui/v3/button';
 import {
   Dialog,
@@ -20,6 +21,7 @@ import {
 
 import { useUI } from '@/components/common/UIProvider';
 import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
+import { ArrowSquareOutIcon } from '@/components/ui/v2/icons/ArrowSquareOutIcon';
 import { RadioGroup, RadioGroupItem } from '@/components/ui/v3/radio-group';
 import { StripeEmbeddedForm } from '@/features/orgs/components/StripeEmbeddedForm';
 import { useIsPlatform } from '@/features/orgs/projects/common/hooks/useIsPlatform';
@@ -98,13 +100,13 @@ function CreateOrgForm({ plans, onSubmit, onCancel }: CreateOrgFormProps) {
                 >
                   {plans.map((plan) => (
                     <FormItem key={plan.id}>
-                      <FormLabel className="flex flex-row items-center justify-between w-full p-3 space-y-0 border rounded-md cursor-pointer">
+                      <FormLabel className="flex w-full cursor-pointer flex-row items-center justify-between space-y-0 rounded-md border p-3">
                         <div className="flex flex-row items-center space-x-3">
                           <FormControl>
                             <RadioGroupItem value={plan.id} />
                           </FormControl>
                           <div className="flex flex-col space-y-2">
-                            <div className="font-semibold text-md">
+                            <div className="text-md font-semibold">
                               {plan.name}
                             </div>
                             <FormDescription className="w-2/3 text-xs">
@@ -113,12 +115,37 @@ function CreateOrgForm({ plans, onSubmit, onCancel }: CreateOrgFormProps) {
                           </div>
                         </div>
 
-                        <div className="flex items-center h-full mt-0 text-xl font-semibold">
-                          {plan.isFree ? 'Free' : `${plan.price}/mo`}
+                        <div className="mt-0 flex h-full items-center text-xl font-semibold">
+                          {plan.isFree ? 'Free' : `$${plan.price}/mo`}
                         </div>
                       </FormLabel>
                     </FormItem>
                   ))}
+                  <div>
+                    <div className="flex w-full cursor-pointer flex-row items-center justify-between space-y-0 rounded-md border p-3">
+                      <div className="flex flex-row items-center space-x-3">
+                        <div className="flex flex-col space-y-2">
+                          <div className="text-md font-semibold">
+                            Enterprise
+                          </div>
+                          <div className="w-2/3 text-xs">
+                            {planDescriptions.Enterprise}
+                          </div>
+                        </div>
+                      </div>
+
+                      <Link
+                        href="mailto:hello@nhost.io"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        underline="hover"
+                        className="font-medium"
+                      >
+                        Contact us
+                        <ArrowSquareOutIcon className="ml-1 h-4 w-4" />
+                      </Link>
+                    </div>
+                  </div>
                 </RadioGroup>
               </FormControl>
               <FormMessage />
@@ -207,7 +234,7 @@ export default function CreateOrgDialog() {
           )}
           onClick={() => setStripeClientSecret('')}
         >
-          <Plus className="w-4 h-4 font-bold" strokeWidth={3} />
+          <Plus className="h-4 w-4 font-bold" strokeWidth={3} />
           New Organization
         </Button>
       </DialogTrigger>
@@ -225,7 +252,7 @@ export default function CreateOrgDialog() {
         </DialogHeader>
 
         {loading && (
-          <div className="flex items-center justify-center h-52">
+          <div className="flex h-52 items-center justify-center">
             <ActivityIndicator
               circularProgressProps={{
                 className: 'w-5 h-5',

dashboard/src/features/orgs/components/billing/components/BillingEstimate/BillingEstimate.tsx

@@ -0,0 +1,27 @@
+import { Divider } from '@/components/ui/v2/Divider';
+import { BillingCycle } from './components/BillingCycle';
+import { BillingDetails } from './components/BillingDetails';
+import { Estimate } from './components/Estimate';
+import { SpendingNotifications } from './components/SpendingNotifications';
+
+export default function BillingEstimate() {
+  return (
+    <div className="">
+      <div className="flex w-full flex-col rounded-md border bg-background">
+        <div className="flex w-full flex-col gap-1 p-4">
+          <span className="text-xl font-medium">Billing Estimate</span>
+        </div>
+        <div className="flex flex-col">
+          <Divider />
+          <BillingCycle />
+          <Divider />
+          <Estimate />
+          <Divider />
+          <SpendingNotifications />
+          <Divider />
+          <BillingDetails />
+        </div>
+      </div>
+    </div>
+  );
+}

dashboard/src/features/orgs/components/billing/components/BillingEstimate/components/BillingCycle/BillingCycle.tsx

@@ -0,0 +1,26 @@
+import { Progress } from '@/components/ui/v3/progress';
+import { getBillingCycleInfo } from '@/features/orgs/components/billing/utils/getBillingCycle';
+
+export default function BillingCycle() {
+  const { progress, billingCycleStart, billingCycleEnd, daysLeft } =
+    getBillingCycleInfo();
+
+  const daysText = daysLeft === 1 ? 'day' : 'days';
+
+  return (
+    <div className="flex w-full flex-col justify-between gap-4 p-4 md:flex-row md:gap-8">
+      <div className="flex basis-1/2 flex-col">
+        <span className="font-medium">
+          Current billing cycle ({daysLeft} {daysText} left)
+        </span>
+      </div>
+      <div className="flex flex-1 flex-col gap-2 pb-2">
+        <div className="flex justify-between">
+          <span className="text-muted-foreground">{billingCycleStart}</span>
+          <span className="text-muted-foreground">{billingCycleEnd}</span>
+        </div>
+        <Progress value={progress} className="h-3" />
+      </div>
+    </div>
+  );
+}

dashboard/src/features/orgs/components/billing/components/BillingEstimate/components/BillingCycle/index.ts

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

dashboard/src/features/orgs/components/billing/components/BillingEstimate/components/BillingDetails/BillingDetails.tsx

@@ -0,0 +1,91 @@
+import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@/components/ui/v3/accordion';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/v3/table';
+import { useCurrentOrg } from '@/features/orgs/projects/hooks/useCurrentOrg';
+import { useBillingGetNextInvoiceQuery } from '@/utils/__generated__/graphql';
+
+export default function BillingDetails() {
+  const { org } = useCurrentOrg();
+  const { data, loading } = useBillingGetNextInvoiceQuery({
+    fetchPolicy: 'cache-first',
+    variables: {
+      organizationID: org?.id,
+    },
+    skip: !org,
+  });
+
+  const billingItems = data?.billingGetNextInvoice?.items ?? [];
+  const amountDue = data?.billingGetNextInvoice?.AmountDue ?? null;
+
+  if (!data || loading) {
+    return (
+      <div className="flex flex-col">
+        <div className="flex flex-col gap-4 p-4">
+          <div className="flex h-32 place-content-center">
+            <ActivityIndicator
+              label="Loading billing details..."
+              className="justify-center text-sm"
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <Accordion type="single" collapsible>
+      <AccordionItem value="details" className="border-none">
+        <AccordionTrigger className="p-4">Details</AccordionTrigger>
+        <AccordionContent className="border-t-1 pb-0">
+          <div className="rounded-md">
+            <Table>
+              <TableHeader className="w-full bg-accent">
+                <TableRow>
+                  <TableHead colSpan={3} className="w-full rounded-tl-md">
+                    Item
+                  </TableHead>
+                  <TableHead className="rounded-tr-md text-right">
+                    Amount
+                  </TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {billingItems.map((billingItem) => (
+                  <TableRow key={billingItem.Description}>
+                    <TableCell colSpan={3}>{billingItem.Description}</TableCell>
+                    <TableCell colSpan={3} className="text-right">
+                      ${billingItem.Amount}
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+              <TableFooter className="bg-accent">
+                <TableRow>
+                  <TableCell colSpan={3} className="rounded-bl-md">
+                    Total
+                  </TableCell>
+                  <TableCell className="rounded-br-md text-right">
+                    ${amountDue}
+                  </TableCell>
+                </TableRow>
+              </TableFooter>
+            </Table>
+          </div>
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+}

dashboard/src/features/orgs/components/billing/components/BillingEstimate/components/BillingDetails/index.ts

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

dashboard/src/features/orgs/components/billing/components/BillingEstimate/components/Estimate/Estimate.tsx

@@ -0,0 +1,48 @@
+import { useCurrentOrg } from '@/features/orgs/projects/hooks/useCurrentOrg';
+import { useBillingGetNextInvoiceQuery } from '@/utils/__generated__/graphql';
+import { useMemo } from 'react';
+
+export default function Estimate() {
+  const { org } = useCurrentOrg();
+  const { data, loading } = useBillingGetNextInvoiceQuery({
+    fetchPolicy: 'cache-first',
+    variables: {
+      organizationID: org?.id,
+    },
+    skip: !org,
+  });
+
+  const amountDue = useMemo(() => {
+    const amount = data?.billingGetNextInvoice?.AmountDue;
+    if (!amount) {
+      return 'N/A';
+    }
+    if (typeof amount !== 'number') {
+      return 'N/A';
+    }
+    return amount.toLocaleString('en', {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    });
+  }, [data]);
+
+  if (loading) {
+    return null;
+  }
+
+  return (
+    <div className="flex w-full flex-col justify-between gap-2 p-4 md:flex-row md:gap-8">
+      <div className="flex basis-1/2 flex-col">
+        <span className="font-medium">Estimate</span>
+        <span className="text-xl font-semibold">${amountDue}</span>
+      </div>
+      <div className="flex flex-1 flex-col gap-2">
+        <p className="max-w-prose">
+          This estimate reflects your estimated next invoice based on current
+          usage. Please note that usage data may have a processing delay of a
+          few hours.
+        </p>
+      </div>
+    </div>
+  );
+}

dashboard/src/features/orgs/components/billing/components/BillingEstimate/components/Estimate/index.ts

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

dashboard/src/features/orgs/components/billing/components/BillingEstimate/components/SpendingNotifications/SpendingNotifications.tsx

@@ -0,0 +1,320 @@
+import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
+import { Switch } from '@/components/ui/v2/Switch';
+import { Button } from '@/components/ui/v3/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/v3/form';
+import { Input } from '@/components/ui/v3/input';
+import { Progress } from '@/components/ui/v3/progress';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/v3/tooltip';
+import { useIsOrgAdmin } from '@/features/orgs/hooks/useIsOrgAdmin';
+import { useCurrentOrg } from '@/features/orgs/projects/hooks/useCurrentOrg';
+import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
+import {
+  GetOrganizationSpendingNotificationDocument,
+  useBillingGetNextInvoiceQuery,
+  useGetOrganizationSpendingNotificationQuery,
+  useUpdateOrganizationSpendingNotificationMutation,
+} from '@/utils/__generated__/graphql';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useEffect, useMemo, type ChangeEvent } from 'react';
+import { useForm } from 'react-hook-form';
+import * as Yup from 'yup';
+
+const validationSchema = Yup.object({
+  enabled: Yup.boolean().required(),
+  threshold: Yup.number().test(
+    'is-valid-threshold',
+    `Threshold must be greater than 110% of your plan's price`,
+    (value: number, { options }) => {
+      const planPrice = options?.context?.planPrice || 0;
+      if (value === 0) {
+        return true;
+      }
+      if (typeof value === 'number' && value > 1.1 * planPrice) {
+        return true;
+      }
+      return false;
+    },
+  ),
+});
+
+type SpendingNotificationsFormValues = Yup.InferType<typeof validationSchema>;
+
+export default function SpendingNotifications() {
+  const { org } = useCurrentOrg();
+
+  const isAdmin = useIsOrgAdmin();
+
+  const { data, loading } = useGetOrganizationSpendingNotificationQuery({
+    fetchPolicy: 'cache-first',
+    variables: { orgId: org?.id },
+    skip: !org,
+  });
+
+  const { data: nextInvoiceData, loading: loadingInvoice } =
+    useBillingGetNextInvoiceQuery({
+      fetchPolicy: 'cache-first',
+      variables: {
+        organizationID: org?.id,
+      },
+      skip: !org,
+    });
+
+  const amountDue = nextInvoiceData?.billingGetNextInvoice?.AmountDue ?? null;
+
+  const [updateConfig] = useUpdateOrganizationSpendingNotificationMutation({
+    refetchQueries: [GetOrganizationSpendingNotificationDocument],
+  });
+
+  const { threshold } = data?.organizations[0] ?? {};
+
+  const form = useForm<SpendingNotificationsFormValues>({
+    reValidateMode: 'onSubmit',
+    defaultValues: {
+      enabled: false,
+      threshold: threshold ?? 0,
+    },
+    resolver: yupResolver(validationSchema),
+    context: {
+      planPrice: org?.plan?.price ?? 0,
+    },
+  });
+
+  const { watch, setValue } = form;
+
+  const currentThreshold = watch('threshold');
+
+  const handleEnabledChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const { checked } = event.target;
+    setValue('enabled', checked, { shouldDirty: true });
+    if (!checked) {
+      setValue('threshold', 0, { shouldDirty: true });
+    }
+  };
+
+  const enabled = watch('enabled');
+
+  const progress = useMemo(() => {
+    if (!enabled || threshold <= 0 || !amountDue) {
+      return 0;
+    }
+
+    const percent = (amountDue / threshold) * 100;
+    return Math.min(Math.max(percent, 0), 100);
+  }, [amountDue, enabled, threshold]);
+
+  const handleThresholdChange = (event: ChangeEvent<HTMLInputElement>) => {
+    if (event.target.value === '') {
+      setValue('threshold', undefined, { shouldDirty: true });
+    } else {
+      setValue('threshold', Number(event.target.value), { shouldDirty: true });
+    }
+  };
+
+  useEffect(() => {
+    if (!loading) {
+      form.reset({
+        enabled: !!threshold,
+        threshold,
+      });
+    }
+  }, [loading, threshold, form]);
+
+  const onSubmit = async (values: SpendingNotificationsFormValues) => {
+    const updateConfigPromise = updateConfig({
+      variables: {
+        id: org?.id,
+        threshold: values.threshold,
+      },
+    });
+
+    await execPromiseWithErrorToast(
+      async () => {
+        await updateConfigPromise;
+        form.reset({
+          enabled: !!values.threshold,
+          threshold: values.threshold,
+        });
+      },
+      {
+        loadingMessage: 'Spending notifications are being updated...',
+        successMessage:
+          'Spending notifications have been updated successfully.',
+        errorMessage:
+          'An error occurred while trying to update spending notifications.',
+      },
+    );
+  };
+
+  const getNotificationPercentageAmount = (factor: number) => {
+    if (!threshold || threshold <= 0) {
+      return '\u00A0';
+    }
+    const amount = threshold * factor;
+    return `$${Math.round(amount)}`;
+  };
+
+  const inputMin = useMemo(
+    () => Math.ceil(1.1 * (amountDue ?? 0)),
+    [amountDue],
+  );
+
+  if (loading || loadingInvoice) {
+    return (
+      <div className="flex flex-col">
+        <div className="flex flex-col gap-4 p-4">
+          <div className="flex h-32 place-content-center">
+            <ActivityIndicator
+              label="Loading spending notifications..."
+              className="justify-center text-sm"
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <Form {...form}>
+      <form
+        className="flex flex-col gap-4 p-4"
+        onSubmit={form.handleSubmit(onSubmit)}
+      >
+        <div className="flex flex-1 flex-row items-end justify-between gap-8">
+          <span className="font-medium">Spending Notifications</span>
+          <Switch
+            className="self-end"
+            id="enabled"
+            checked={enabled}
+            onChange={handleEnabledChange}
+          />
+        </div>
+        <div className="flex w-full flex-col justify-between gap-8 md:flex-row">
+          <div className="flex basis-1/2 flex-col gap-2">
+            <p className="max-w-prose">
+              Specify a spending threshold to receive email notifications when
+              your usage approaches the designated amount.
+            </p>
+          </div>
+          <div className="flex flex-1 flex-col gap-4">
+            {enabled && (
+              <>
+                <FormField
+                  control={form.control}
+                  name="threshold"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-1 flex-col">
+                      <FormLabel className="flex flex-1 flex-row items-center gap-2">
+                        <span>Amount</span>
+                      </FormLabel>
+                      <FormControl>
+                        {isAdmin ? (
+                          <Input
+                            prefix="$"
+                            type="number"
+                            min={inputMin}
+                            placeholder="0"
+                            disabled={!enabled}
+                            {...field}
+                            onChange={handleThresholdChange}
+                            value={currentThreshold}
+                          />
+                        ) : (
+                          <Tooltip>
+                            <TooltipTrigger type="button">
+                              <Input
+                                prefix="$"
+                                type="number"
+                                min="0"
+                                placeholder="0"
+                                disabled
+                                {...field}
+                                onChange={handleThresholdChange}
+                                value={currentThreshold}
+                              />
+                            </TooltipTrigger>
+                            <TooltipContent>
+                              Only an organization admin can change this value.
+                            </TooltipContent>
+                          </Tooltip>
+                        )}
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <div className="flex flex-1 flex-col gap-2">
+                  <div className="flex flex-1">
+                    <div className="basis-3/4" />
+                    <div className="flex flex-1 justify-between gap-2">
+                      <div className="flex basis-2/3 text-muted-foreground">
+                        <span className="w-13 text-center">75%</span>
+                      </div>
+                      <div className="flex basis-1/3 text-muted-foreground">
+                        <span className="w-13 text-center">90%</span>
+                      </div>
+                      <div className="flex basis-1/3 text-muted-foreground">
+                        <span className="w-13 text-center">100%</span>
+                      </div>
+                    </div>
+                  </div>
+                  <Progress value={progress} className="h-3" />
+                  <div className="flex flex-1">
+                    <div className="basis-3/4" />
+                    <div className="flex flex-1 justify-between gap-2">
+                      <div className="flex basis-2/3 text-muted-foreground">
+                        <span className="w-13 overflow-hidden text-ellipsis text-center">
+                          {getNotificationPercentageAmount(0.75) || '\u00A0'}
+                        </span>
+                      </div>
+                      <div className="flex basis-1/3 text-muted-foreground">
+                        <span className="w-13 overflow-hidden text-ellipsis text-center">
+                          {getNotificationPercentageAmount(0.9) || '\u00A0'}
+                        </span>
+                      </div>
+                      <div className="flex basis-1/3 text-muted-foreground">
+                        <span className="w-13 overflow-hidden text-ellipsis text-center">
+                          {getNotificationPercentageAmount(1) || '\u00A0'}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <p className="max-w-prose">
+                  You&apos;ll receive email alerts when your usage reaches 75%,
+                  90%, and 100% of your configured value. These are
+                  notifications only - your service will continue running
+                  normally.
+                </p>
+              </>
+            )}
+            <div className="flex flex-1 flex-col justify-end">
+              <Button
+                type="submit"
+                className="h-fit self-end"
+                disabled={!form.formState.isDirty || !isAdmin}
+              >
+                {form.formState.isSubmitting ? (
+                  <ActivityIndicator className="text-sm" />
+                ) : (
+                  'Save'
+                )}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </form>
+    </Form>
+  );
+}

dashboard/src/features/orgs/components/billing/components/BillingEstimate/components/SpendingNotifications/index.ts

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

dashboard/src/features/orgs/components/billing/components/BillingEstimate/index.ts

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

dashboard/src/features/orgs/components/billing/components/SubscriptionPlan/SubscriptionPlan.tsx

@@ -1,4 +1,5 @@
 import { useUI } from '@/components/common/UIProvider';
+import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
 import { ArrowSquareOutIcon } from '@/components/ui/v2/icons/ArrowSquareOutIcon';
 import { Link } from '@/components/ui/v2/Link';
 import { Button } from '@/components/ui/v3/button';
@@ -44,7 +45,7 @@ export default function SubscriptionPlan() {
   const [open, setOpen] = useState(false);
   const [changeOrgPlan] = useBillingChangeOrganizationPlanMutation();
   const { data: { plans = [] } = {} } = useGetOrganizationPlansQuery();
-  const [fetchOrganizationCustomePortalLink] =
+  const [fetchOrganizationCustomePortalLink, { loading }] =
     useBillingOrganizationCustomePortalLazyQuery();
 
   const form = useForm<z.infer<typeof changeOrgPlanForm>>({
@@ -100,7 +101,10 @@ export default function SubscriptionPlan() {
           });
 
         if (billingOrganizationCustomePortal) {
-          window.open(billingOrganizationCustomePortal);
+          const newWindow = window.open(billingOrganizationCustomePortal);
+          if (!newWindow) {
+            window.location.href = billingOrganizationCustomePortal;
+          }
         } else {
           throw new Error('Could not fetch customer portal link');
         }
@@ -117,35 +121,39 @@ export default function SubscriptionPlan() {
   return (
     <>
       <div>
-        <div className="flex flex-col w-full border rounded-md bg-background">
-          <div className="flex flex-col w-full gap-1 p-4 border-b">
+        <div className="flex w-full flex-col rounded-md border bg-background">
+          <div className="flex w-full flex-col gap-1 border-b p-4">
             <h4 className="font-medium">Subscription plan</h4>
           </div>
-          <div className="flex flex-col border-b md:flex-row">
-            <div className="flex flex-col w-full gap-4 p-4">
+          <div className="flex w-full flex-col justify-between gap-8 border-b p-4 md:flex-row">
+            <div className="flex basis-1/2 flex-col gap-4">
               <span className="font-medium">Organization name</span>
               <span className="font-medium">{org?.name}</span>
             </div>
-            <div className="flex flex-col w-full gap-2 p-4">
-              <span className="font-medium">Current plan</span>
-              <span className="text-xl font-bold text-primary-main">
-                {org?.plan?.name}
-              </span>
-            </div>
-            <div className="flex flex-col items-start justify-start w-full gap-4 p-4 md:items-end md:justify-end">
-              <div className="flex items-center gap-2">
-                <span className="text-xl font-semibold">
-                  ${org?.plan?.price}
+            <div className="flex flex-1 flex-col gap-8 md:flex-row">
+              <div className="flex flex-1 flex-col gap-2">
+                <span className="font-medium">Current plan</span>
+                <span className="text-xl font-bold text-primary">
+                  {org?.plan?.name}
                 </span>
-                <Slash
-                  className="w-5 h-5 text-muted-foreground/40"
-                  strokeWidth={2.5}
-                />
-                <span className="text-xl font-semibold">month</span>
+              </div>
+
+              <div className="flex flex-1 items-start justify-start md:items-end md:justify-end">
+                <div className="flex items-center gap-2">
+                  <span className="text-xl font-semibold">
+                    ${org?.plan?.price}
+                  </span>
+                  <Slash
+                    className="h-5 w-5 text-muted-foreground/40"
+                    strokeWidth={2.5}
+                  />
+                  <span className="text-xl font-semibold">month</span>
+                </div>
               </div>
             </div>
           </div>
-          <div className="flex flex-col-reverse items-end justify-between w-full gap-2 p-4 md:flex-row md:items-center md:gap-0">
+
+          <div className="flex w-full flex-col-reverse items-end justify-between gap-2 p-4 md:flex-row md:items-center md:gap-0">
             <div>
               <span>For a complete list of features, visit our </span>
               <Link
@@ -156,17 +164,21 @@ export default function SubscriptionPlan() {
                 className="font-medium"
               >
                 pricing
-                <ArrowSquareOutIcon className="w-4 h-4 ml-1" />
+                <ArrowSquareOutIcon className="mb-[2px] ml-1 h-4 w-4" />
               </Link>
             </div>
-            <div className="flex flex-row items-center justify-end gap-2">
+            <div className="flex w-full flex-row items-center justify-end gap-2">
               <Button
-                className="h-fit"
+                className="h-fit truncate"
                 variant="secondary"
                 onClick={handleUpdatePaymentDetails}
-                disabled={org?.plan?.isFree || maintenanceActive}
+                disabled={org?.plan?.isFree || maintenanceActive || loading}
               >
-                Stripe Customer Portal
+                {loading ? (
+                  <ActivityIndicator />
+                ) : (
+                  <span className="truncate">Stripe Customer Portal</span>
+                )}
               </Button>
               <Button
                 disabled={org?.plan?.isFree || maintenanceActive}
@@ -205,13 +217,13 @@ export default function SubscriptionPlan() {
                       >
                         {plans.map((plan) => (
                           <FormItem key={plan.id}>
-                            <FormLabel className="flex flex-row items-center justify-between w-full p-3 space-y-0 border rounded-md cursor-pointer">
+                            <FormLabel className="flex w-full cursor-pointer flex-row items-center justify-between space-y-0 rounded-md border p-3">
                               <div className="flex flex-row items-center space-x-3">
                                 <FormControl>
                                   <RadioGroupItem value={plan.id} />
                                 </FormControl>
                                 <div className="flex flex-col space-y-2">
-                                  <div className="font-semibold text-md">
+                                  <div className="text-md font-semibold">
                                     {plan.name}
                                   </div>
                                   <FormDescription className="w-2/3 text-xs">
@@ -220,7 +232,7 @@ export default function SubscriptionPlan() {
                                 </div>
                               </div>
 
-                              <div className="flex items-center h-full mt-0 text-xl font-semibold">
+                              <div className="mt-0 flex h-full items-center text-xl font-semibold">
                                 {plan.isFree ? 'Free' : `${plan.price}/mo`}
                               </div>
                             </FormLabel>
@@ -228,10 +240,10 @@ export default function SubscriptionPlan() {
                         ))}
 
                         <div>
-                          <div className="flex flex-row items-center justify-between w-full p-3 space-y-0 border rounded-md cursor-pointer">
+                          <div className="flex w-full cursor-pointer flex-row items-center justify-between space-y-0 rounded-md border p-3">
                             <div className="flex flex-row items-center space-x-3">
                               <div className="flex flex-col space-y-2">
-                                <div className="font-semibold text-md">
+                                <div className="text-md font-semibold">
                                   Enterprise
                                 </div>
                                 <div className="w-2/3 text-xs">
@@ -248,7 +260,7 @@ export default function SubscriptionPlan() {
                               className="font-medium"
                             >
                               Contact us
-                              <ArrowSquareOutIcon className="w-4 h-4 ml-1" />
+                              <ArrowSquareOutIcon className="ml-1 h-4 w-4" />
                             </Link>
                           </div>
                         </div>

dashboard/src/features/orgs/components/billing/components/Usage/Usage.tsx

@@ -1,97 +0,0 @@
-import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
-import { Progress } from '@/components/ui/v3/progress';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableFooter,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/v3/table';
-import { getBillingCycleInfo } from '@/features/orgs/components/billing/utils/getBillingCycle';
-import { useCurrentOrg } from '@/features/orgs/projects/hooks/useCurrentOrg';
-import { useBillingGetNextInvoiceQuery } from '@/utils/__generated__/graphql';
-
-export default function Usage() {
-  const { org } = useCurrentOrg();
-  const { billingCycleRange, progress } = getBillingCycleInfo();
-  const { data, loading } = useBillingGetNextInvoiceQuery({
-    fetchPolicy: 'cache-first',
-    variables: {
-      organizationID: org?.id,
-    },
-    skip: !org,
-  });
-
-  const billingItems = data?.billingGetNextInvoice?.items ?? [];
-  const amountDue = data?.billingGetNextInvoice?.AmountDue ?? null;
-
-  return (
-    <div className="font-medium">
-      <div className="flex flex-col w-full border rounded-md bg-background">
-        <div className="flex flex-col w-full gap-1 p-4">
-          <span>Usage</span>
-        </div>
-        <div className="flex flex-col">
-          <div className="flex flex-row items-center justify-between w-full p-4 border-t border-b">
-            <span>Billing cycle ({billingCycleRange})</span>
-            <Progress value={progress} className="h-2 max-w-xl" />
-          </div>
-          <div className="flex flex-col gap-4 p-4">
-            {loading && (
-              <div className="flex h-32 place-content-center">
-                <ActivityIndicator
-                  label="Loading usage stats..."
-                  className="justify-center text-sm"
-                />
-              </div>
-            )}
-
-            {!loading && data && (
-              <>
-                <span>Breakdown</span>
-                <div className="border rounded-md">
-                  <Table>
-                    <TableHeader className="w-full bg-accent">
-                      <TableRow>
-                        <TableHead colSpan={3} className="w-full rounded-tl-md">
-                          Item
-                        </TableHead>
-                        <TableHead className="text-right rounded-tr-md">
-                          Amount
-                        </TableHead>
-                      </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                      {billingItems.map((billingItem) => (
-                        <TableRow key={billingItem.Description}>
-                          <TableCell colSpan={3}>
-                            {billingItem.Description}
-                          </TableCell>
-                          <TableCell colSpan={3} className="text-right">
-                            ${billingItem.Amount}
-                          </TableCell>
-                        </TableRow>
-                      ))}
-                    </TableBody>
-                    <TableFooter className="bg-accent">
-                      <TableRow>
-                        <TableCell colSpan={3} className="rounded-bl-md">
-                          Total
-                        </TableCell>
-                        <TableCell className="text-right rounded-br-md">
-                          ${amountDue}
-                        </TableCell>
-                      </TableRow>
-                    </TableFooter>
-                  </Table>
-                </div>
-              </>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

dashboard/src/features/orgs/components/billing/components/Usage/index.ts

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

dashboard/src/features/orgs/components/billing/utils/getBillingCycle.ts

@@ -18,9 +18,13 @@ export const getBillingCycleInfo = () => {
     (now.getTime() - startOfMonth.getTime()) / (1000 * 60 * 60 * 24) + 1;
 
   const progress = (daysPassed / totalDays) * 100;
+  const daysLeft = Math.max(Math.ceil(totalDays - daysPassed), 0);
 
   return {
+    billingCycleStart,
+    billingCycleEnd,
     billingCycleRange: `${billingCycleStart} - ${billingCycleEnd}`,
     progress: Math.min(Math.max(progress, 0), 100), // Ensure the value is between 0 and 100
+    daysLeft,
   };
 };

dashboard/src/features/orgs/components/common/TransferProjectDialog/TransferProjectDialog.tsx

@@ -24,13 +24,16 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/v3/select';
-import { useCurrentOrg } from '@/features/orgs/projects/hooks/useCurrentOrg';
-import { useOrgs } from '@/features/orgs/projects/hooks/useOrgs';
+import { useOrgs, type Org } from '@/features/orgs/projects/hooks/useOrgs';
 import { useProject } from '@/features/orgs/projects/hooks/useProject';
 import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
 import { cn } from '@/lib/utils';
-import { useBillingTransferAppMutation } from '@/utils/__generated__/graphql';
+import {
+  Organization_Members_Role_Enum,
+  useBillingTransferAppMutation,
+} from '@/utils/__generated__/graphql';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useUserId } from '@nhost/nextjs';
 import { useRouter } from 'next/router';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
@@ -48,10 +51,10 @@ export default function TransferProjectDialog({
   open,
   setOpen,
 }: TransferProjectDialogProps) {
-  const { orgs } = useOrgs();
-  const { org: currentOrg } = useCurrentOrg();
-  const { project } = useProject();
   const { push } = useRouter();
+  const currentUserId = useUserId();
+  const { project } = useProject();
+  const { orgs, currentOrg } = useOrgs();
   const [transferProject] = useBillingTransferAppMutation();
 
   const form = useForm<z.infer<typeof transferProjectFormSchema>>({
@@ -86,16 +89,29 @@ export default function TransferProjectDialog({
     );
   };
 
+  const isUserAdminOfOrg = (org: Org, userId: string) =>
+    org.members.some(
+      (member) =>
+        member.role === Organization_Members_Role_Enum.Admin &&
+        member.user.id === userId,
+    );
+
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogContent className="text-foreground sm:max-w-xl">
+    <Dialog
+      open={open}
+      onOpenChange={(value) => {
+        form.reset();
+        setOpen(value);
+      }}
+    >
+      <DialogContent className="z-[9999] text-foreground sm:max-w-xl">
         <DialogHeader className="flex gap-2">
           <DialogTitle>
             Move the current project to a different organization.
           </DialogTitle>
           <DialogDescription>
-            To transfer a project between two organizations, you must be ADMIN
-            in both.
+            To transfer a project between organizations, you must be an{' '}
+            <span className="font-bold">ADMIN</span> in both.
           </DialogDescription>
         </DialogHeader>
         <Form {...form}>
@@ -120,7 +136,11 @@ export default function TransferProjectDialog({
                         <SelectItem
                           key={org.id}
                           value={org.id}
-                          disabled={org.plan.isFree || org.id === currentOrg.id}
+                          disabled={
+                            org.plan.isFree || // disable the personal org
+                            org.id === currentOrg.id || // disable the current org as it can't be a destination org
+                            !isUserAdminOfOrg(org, currentUserId) // disable orgs that the current user is not admin of
+                          }
                         >
                           {org.name}
                           <Badge
@@ -146,11 +166,19 @@ export default function TransferProjectDialog({
                 variant="secondary"
                 type="button"
                 disabled={form.formState.isSubmitting}
-                onClick={() => setOpen(false)}
+                onClick={() => {
+                  form.reset();
+                  setOpen(false);
+                }}
               >
                 Cancel
               </Button>
-              <Button type="submit" disabled={form.formState.isSubmitting}>
+              <Button
+                type="submit"
+                disabled={
+                  form.formState.isSubmitting || !form.formState.isDirty
+                }
+              >
                 {form.formState.isSubmitting ? (
                   <ActivityIndicator />
                 ) : (

dashboard/src/features/orgs/components/members/components/AnnouncementsTray/AnnouncementsTray.tsx

@@ -1,4 +1,11 @@
+import { Badge } from '@/components/ui/v3/badge';
 import { Button } from '@/components/ui/v3/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/v3/dropdown-menu';
 import {
   Sheet,
   SheetContent,
@@ -7,15 +14,64 @@ import {
   SheetTitle,
   SheetTrigger,
 } from '@/components/ui/v3/sheet';
-import { Announcements } from '@/features/projects/common/components/Announcements';
-import { Megaphone } from 'lucide-react';
+import {
+  useDeleteAnnouncementReadMutation,
+  useGetAnnouncementsQuery,
+  useInsertAnnouncementReadMutation,
+} from '@/utils/__generated__/graphql';
+import { useAuthenticationStatus } from '@nhost/nextjs';
+import { formatDistance } from 'date-fns';
+import { EllipsisVertical, Megaphone } from 'lucide-react';
+import Link from 'next/link';
 
 export default function AnnouncementsTray() {
+  const { isAuthenticated } = useAuthenticationStatus();
+
+  const {
+    data,
+    loading,
+    refetch: refetchAnnouncements,
+  } = useGetAnnouncementsQuery({
+    skip: !isAuthenticated,
+  });
+
+  const [insertAnnouncementRead] = useInsertAnnouncementReadMutation();
+  const [deleteAnnouncementRead] = useDeleteAnnouncementReadMutation();
+
+  const announcements = data?.announcements ?? [];
+  const unreadAnnouncementsCount = announcements.filter(
+    (ann) => ann.read.length === 0,
+  ).length;
+
+  const handleSetUnread = async (announcementReadId: string) => {
+    await deleteAnnouncementRead({
+      variables: {
+        id: announcementReadId,
+      },
+    });
+
+    await refetchAnnouncements();
+  };
+
+  const handleSetRead = async (announcementID: string) => {
+    await insertAnnouncementRead({
+      variables: { announcementID },
+    });
+
+    await refetchAnnouncements();
+  };
+
   return (
     <Sheet>
       <SheetTrigger asChild>
-        <Button variant="ghost" className="relative h-fit px-3 py-1">
-          <Megaphone className="h-5 w-5" />
+        <Button
+          variant="outline"
+          className="relative flex h-8 items-center gap-2 px-2"
+        >
+          <Megaphone className="h-4.5 w-4.5" />
+          {unreadAnnouncementsCount > 0 && (
+            <Badge variant="destructive">{unreadAnnouncementsCount}</Badge>
+          )}
         </Button>
       </SheetTrigger>
       <SheetContent className="h-full w-full bg-background p-0 text-foreground sm:max-w-[310px]">
@@ -25,8 +81,102 @@ export default function AnnouncementsTray() {
             Latest news and announcements.
           </SheetDescription>
         </SheetHeader>
-        <div className="flex h-full w-full flex-col px-8 pt-3">
-          <Announcements />
+        <div className="flex h-full w-full flex-col">
+          <div className="flex h-12 items-center border-b px-2">
+            <h3 className="font-medium">
+              Latest Announcements{' '}
+              {unreadAnnouncementsCount > 0 && `(${unreadAnnouncementsCount})`}
+            </h3>
+          </div>
+
+          <div className="flex h-full flex-col gap-2 overflow-auto p-2">
+            {!loading && announcements.length === 0 && (
+              <span className="text-muted-foreground">
+                No new announcements
+              </span>
+            )}
+            {announcements.map((announcement) => (
+              <Button
+                key={announcement.id}
+                variant="ghost"
+                asChild
+                className="h-fit w-full items-start gap-2 rounded-md border p-2"
+              >
+                <Link
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  href={announcement.href}
+                  shallow
+                  onClick={() => {
+                    if (announcement.read.length === 0) {
+                      handleSetRead(announcement.id);
+                    }
+                  }}
+                >
+                  {announcement.read.length === 0 ? (
+                    <span className="mt-[5px] h-2 w-2 flex-shrink-0 rounded-full bg-primary" />
+                  ) : (
+                    <span className="mt-[5px] h-2 w-2 flex-shrink-0" />
+                  )}
+                  <div className="flex flex-row">
+                    <div className="flex flex-col gap-1">
+                      <span className="text-xs text-muted-foreground">
+                        {formatDistance(
+                          new Date(announcement.createdAt),
+                          new Date(),
+                          {
+                            addSuffix: true,
+                          },
+                        )}
+                      </span>
+                      <p className="whitespace-normal">
+                        {announcement.content}
+                      </p>
+                    </div>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button
+                          variant="ghost"
+                          className="h-8 px-3"
+                          onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                          }}
+                        >
+                          <div className="absolute">
+                            <EllipsisVertical className="h-4 w-4" />
+                          </div>
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent
+                        side="bottom"
+                        align="end"
+                        sideOffset={-5}
+                      >
+                        <DropdownMenuItem
+                          disabled={announcement.read.length > 0}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            handleSetRead(announcement.id);
+                          }}
+                        >
+                          Mark as read
+                        </DropdownMenuItem>
+                        <DropdownMenuItem
+                          disabled={announcement.read.length === 0}
+                          onClick={() =>
+                            handleSetUnread(announcement.read.at(0).id)
+                          }
+                        >
+                          Mark as unread
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </div>
+                </Link>
+              </Button>
+            ))}
+          </div>
         </div>
       </SheetContent>
     </Sheet>

dashboard/src/features/orgs/components/members/components/NotificationsTray/NotificationsTray.tsx

@@ -25,6 +25,7 @@ import {
   useOrganizationMemberInvitesLazyQuery,
   useOrganizationNewRequestsLazyQuery,
   usePostOrganizationRequestMutation,
+  type OrganizationMemberInvitesQuery,
   type PostOrganizationRequestResponse,
 } from '@/utils/__generated__/graphql';
 import { useUserData } from '@nhost/nextjs';
@@ -33,10 +34,19 @@ import { Bell } from 'lucide-react';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 
+type Invite = OrganizationMemberInvitesQuery['organizationMemberInvites'][0];
+
 export default function NotificationsTray() {
-  const { refetch: refetchOrgs } = useOrgs();
-  const { asPath, route } = useRouter();
   const userData = useUserData();
+  const { asPath, route, push } = useRouter();
+  const { refetch: refetchOrgs } = useOrgs();
+  const [open, setOpen] = useState(false);
+
+  const [stripeFormDialogOpen, setStripeFormDialogOpen] = useState(false);
+
+  const [pendingOrgRequest, setPendingOrgRequest] =
+    useState<PostOrganizationRequestResponse | null>(null);
+
   const [
     getInvites,
     {
@@ -45,11 +55,6 @@ export default function NotificationsTray() {
       data: { organizationMemberInvites: invites = [] } = {},
     },
   ] = useOrganizationMemberInvitesLazyQuery();
-
-  const [stripeFormDialogOpen, setStripeFormDialogOpen] = useState(false);
-
-  const [pendingOrgRequest, setPendingOrgRequest] =
-    useState<PostOrganizationRequestResponse | null>(null);
   const [getOrganizationNewRequests] = useOrganizationNewRequestsLazyQuery();
   const [postOrganizationRequest] = usePostOrganizationRequestMutation();
 
@@ -112,17 +117,19 @@ export default function NotificationsTray() {
   const [acceptInvite] = useOrganizationMemberInviteAcceptMutation();
   const [deleteInvite] = useDeleteOrganizationMemberInviteMutation();
 
-  const handleAccept = async (inviteId: string) => {
+  const handleAccept = async (invite: Invite) => {
     await execPromiseWithErrorToast(
       async () => {
         await acceptInvite({
           variables: {
-            inviteId,
+            inviteId: invite.id,
           },
         });
 
-        refetchInvites();
-        refetchOrgs();
+        await refetchInvites();
+        await refetchOrgs();
+        await push(`/orgs/${invite?.organization?.slug}/projects`);
+        setOpen(false);
       },
       {
         loadingMessage: `Accepting invite...`,
@@ -153,14 +160,19 @@ export default function NotificationsTray() {
 
   return (
     <>
-      <Sheet>
+      <Sheet open={open} onOpenChange={setOpen}>
         <SheetTrigger asChild>
-          <Button variant="ghost" className="relative px-3 py-1 h-fit">
-            <Bell className="mt-[2px] h-[1.15rem] w-[1.15rem]" />
-            {invites.length > 0 ||
-              (pendingOrgRequest && (
-                <div className="absolute w-2 h-2 bg-red-500 rounded-full right-3 top-2" />
-              ))}
+          <Button
+            variant="outline"
+            className="relative flex h-8 items-center gap-2 border px-2"
+            aria-label="Notifications"
+          >
+            <Bell className="h-4.5 w-4.5" />
+            {(pendingOrgRequest || invites.length > 0) && (
+              <Badge variant="destructive">
+                {invites.length + (pendingOrgRequest ? 1 : 0)}
+              </Badge>
+            )}
           </Button>
         </SheetTrigger>
         <SheetContent className="h-full w-full bg-background p-0 text-foreground sm:max-w-[310px]">
@@ -170,14 +182,14 @@ export default function NotificationsTray() {
               List of pending invites and create organization requests
             </SheetDescription>
           </SheetHeader>
-          <div className="flex flex-col w-full h-full">
-            <div className="flex items-center h-12 px-2 border-b">
+          <div className="flex h-full w-full flex-col">
+            <div className="flex h-12 items-center border-b px-2">
               <h3 className="font-medium">
                 Notifications {invites.length > 0 && `(${invites.length})`}
               </h3>
             </div>
 
-            <div className="p-2">
+            <div className="flex h-full flex-col gap-2 overflow-auto p-2">
               {!loading && invites.length === 0 && !pendingOrgRequest && (
                 <span className="text-muted-foreground">
                   No new notifications
@@ -185,9 +197,9 @@ export default function NotificationsTray() {
               )}
 
               {pendingOrgRequest && (
-                <div className="flex flex-col gap-2 p-2 border rounded-md">
+                <div className="flex flex-col gap-2 rounded-md border p-2">
                   <div className="flex flex-col items-end gap-2">
-                    <div className="flex items-center justify-between w-full">
+                    <div className="flex w-full items-center justify-between">
                       <Badge className="h-5 px-[6px] text-[10px]">
                         New Organization pending
                       </Badge>
@@ -212,10 +224,10 @@ export default function NotificationsTray() {
               {invites.map((invite) => (
                 <div
                   key={invite.id}
-                  className="flex flex-col gap-2 p-2 border rounded-md"
+                  className="flex flex-col gap-2 rounded-md border p-2"
                 >
                   <div className="flex flex-col items-end gap-2">
-                    <div className="flex items-center justify-between w-full">
+                    <div className="flex w-full items-center justify-between">
                       <Badge className="h-5 px-[6px] text-[10px]">
                         Invitation
                       </Badge>
@@ -248,7 +260,7 @@ export default function NotificationsTray() {
                     </Button>
                     <Button
                       className="h-fit"
-                      onClick={() => handleAccept(invite.id)}
+                      onClick={() => handleAccept(invite)}
                     >
                       Accept
                     </Button>
@@ -265,7 +277,7 @@ export default function NotificationsTray() {
         onOpenChange={setStripeFormDialogOpen}
       >
         <DialogContent
-          className="text-black bg-white sm:max-w-xl"
+          className="bg-white text-black sm:max-w-xl"
           onInteractOutside={(e) => e.preventDefault()}
           onEscapeKeyDown={(e) => e.preventDefault()}
         >

dashboard/src/features/orgs/components/projects/projects-grid/projects-grid.tsx

@@ -25,9 +25,9 @@ function ProjectCard({ project }: { project: Project }) {
       className="flex cursor-pointer flex-col gap-4 rounded-lg border bg-background p-4 hover:shadow-sm"
     >
       <div className="flex items-start gap-2">
-        <div className="flex flex-row items-center space-x-2">
-          <Box className="h-6 w-6" />
-          <h2 className="text-lg font-semibold">{project.name}</h2>
+        <div className="flex w-full flex-row items-center space-x-2">
+          <Box className="h-6 w-6 flex-shrink-0" />
+          <p className="truncate text-lg font-bold">{project.name}</p>
         </div>
       </div>
 

dashboard/src/features/orgs/layout/ProjectLayout/ProjectLayout.tsx

@@ -5,6 +5,7 @@ import { Alert } from '@/components/ui/v2/Alert';
 import type { BoxProps } from '@/components/ui/v2/Box';
 import { Box } from '@/components/ui/v2/Box';
 import { ApplicationPaused } from '@/features/orgs/projects/common/components/ApplicationPaused';
+import { ApplicationPausedBanner } from '@/features/orgs/projects/common/components/ApplicationPausedBanner';
 import { ApplicationProvisioning } from '@/features/orgs/projects/common/components/ApplicationProvisioning';
 import { ApplicationRestoring } from '@/features/orgs/projects/common/components/ApplicationRestoring';
 import { ApplicationUnknown } from '@/features/orgs/projects/common/components/ApplicationUnknown';
@@ -15,7 +16,7 @@ import { useProject } from '@/features/orgs/projects/hooks/useProject';
 import { ApplicationStatus } from '@/types/application';
 import { NextSeo } from 'next-seo';
 import { useRouter } from 'next/router';
-import { useMemo } from 'react';
+import { useCallback, useMemo, type ReactNode } from 'react';
 import { twMerge } from 'tailwind-merge';
 
 export interface ProjectLayoutProps extends AuthenticatedLayoutProps {
@@ -34,11 +35,53 @@ function ProjectLayoutContent({
     query: { appSubdomain },
   } = useRouter();
 
-  const isPlatform = useIsPlatform();
   const { state } = useAppState();
+  const isPlatform = useIsPlatform();
   const { project, loading, error } = useProject({ poll: true });
+
   const isOnOverviewPage = route === '/orgs/[orgSlug]/projects/[appSubdomain]';
 
+  const renderPausedProjectContent = useCallback(
+    (_children: ReactNode) => {
+      const baseProjectPageRoute = '/orgs/[orgSlug]/projects/[appSubdomain]/';
+      const blockedPausedProjectPages = [
+        'database',
+        'database/browser/[dataSourceSlug]',
+        'graphql',
+        'hasura',
+        'users',
+        'storage',
+        'ai/auto-embeddings',
+        'ai/assistants',
+        'metrics',
+      ].map((page) => baseProjectPageRoute.concat(page));
+
+      // show an alert box on top of the overview page with a wake up button
+      if (isOnOverviewPage) {
+        return (
+          <>
+            <div className="mx-auto mt-5 flex max-w-7xl p-4 pb-0">
+              <ApplicationPausedBanner
+                alertClassName="flex-row"
+                textContainerClassName="flex flex-col items-center justify-center text-left"
+                wakeUpButtonClassName="w-fit self-center"
+              />
+            </div>
+            {children}
+          </>
+        );
+      }
+
+      // block these pages when the project is paused
+      if (blockedPausedProjectPages.includes(route)) {
+        return <ApplicationPaused />;
+      }
+
+      return _children;
+    },
+    [route, isOnOverviewPage, children],
+  );
+
   // Render application state based on the current state
   const projectPageContent = useMemo(() => {
     if (!appSubdomain || state === undefined) {
@@ -67,7 +110,7 @@ function ProjectLayoutContent({
         return children;
       case ApplicationStatus.Pausing:
       case ApplicationStatus.Paused:
-        return <ApplicationPaused />;
+        return renderPausedProjectContent(children);
       case ApplicationStatus.Unpausing:
         return <ApplicationUnpausing />;
       case ApplicationStatus.Restoring:
@@ -79,7 +122,13 @@ function ProjectLayoutContent({
       default:
         return <ApplicationUnknown />;
     }
-  }, [state, children, appSubdomain, isOnOverviewPage]);
+  }, [
+    state,
+    children,
+    appSubdomain,
+    isOnOverviewPage,
+    renderPausedProjectContent,
+  ]);
 
   // Handle loading state
   if (loading) {

dashboard/src/features/orgs/layout/SettingsLayout/SettingsLayout.tsx

@@ -52,9 +52,9 @@ export default function SettingsLayout({ children }: SettingsLayoutProps) {
                     target="_blank"
                     rel="noopener noreferrer"
                     className="underline"
-                    href="https://docs.nhost.io/cli/overlays"
+                    href="https://docs.nhost.io/guides/cli/configuration-overlays#configuration-overlays"
                   >
-                    docs.nhost.io/cli/overlays
+                    Configuration Overlays
                   </a>{' '}
                   for guidance.
                 </Text>

dashboard/src/features/orgs/projects/ai/DevAssistant/DevAssistant.tsx

@@ -8,16 +8,17 @@ import { ArrowUpIcon } from '@/components/ui/v2/icons/ArrowUpIcon';
 import { Input } from '@/components/ui/v2/Input';
 import { Link } from '@/components/ui/v2/Link';
 import { Text } from '@/components/ui/v2/Text';
-import { MessagesList } from '@/features/ai/DevAssistant/components/MessagesList';
+import { MessagesList } from '@/features/orgs/projects/ai/DevAssistant/components/MessagesList';
 import {
   messagesState,
   projectMessagesState,
   sessionIDState,
-} from '@/features/ai/DevAssistant/state';
-import { useAdminApolloClient } from '@/features/projects/common/hooks/useAdminApolloClient';
-import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
-import { useIsGraphiteEnabled } from '@/features/projects/common/hooks/useIsGraphiteEnabled';
-import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
+} from '@/features/orgs/projects/ai/DevAssistant/state';
+import { useIsGraphiteEnabled } from '@/features/orgs/projects/common/hooks/useIsGraphiteEnabled';
+import { useIsPlatform } from '@/features/orgs/projects/common/hooks/useIsPlatform';
+import { useAdminApolloClient } from '@/features/orgs/projects/hooks/useAdminApolloClient';
+import { useOrgs } from '@/features/orgs/projects/hooks/useOrgs';
+import { useProject } from '@/features/orgs/projects/hooks/useProject';
 import {
   useSendDevMessageMutation,
   useStartDevSessionMutation,
@@ -36,12 +37,13 @@ export type Message = Omit<
 
 export default function DevAssistant() {
   const isPlatform = useIsPlatform();
-  const { currentProject, currentWorkspace } = useCurrentWorkspaceAndProject();
+  const { project } = useProject();
+  const { currentOrg } = useOrgs();
 
   const [loading, setLoading] = useState(false);
   const [userInput, setUserInput] = useState('');
   const setMessages = useSetRecoilState(messagesState);
-  const messages = useRecoilValue(projectMessagesState(currentProject.id));
+  const messages = useRecoilValue(projectMessagesState(project?.id));
   const [storedSessionID, setStoredSessionID] = useRecoilState(sessionIDState);
 
   const { adminClient } = useAdminApolloClient();
@@ -74,7 +76,7 @@ export default function DevAssistant() {
           message: userInput,
           createdAt: null,
           role: 'user',
-          projectId: currentProject.id,
+          projectId: project?.id,
         },
       ];
 
@@ -113,7 +115,7 @@ export default function DevAssistant() {
           .filter((item) => item.message)
 
           // add the currentProject.id to the new messages
-          .map((item) => ({ ...item, projectId: currentProject.id })),
+          .map((item) => ({ ...item, projectId: project?.id })),
       ];
 
       if (thread.length > MAX_THREAD_LENGTH) {
@@ -152,36 +154,29 @@ export default function DevAssistant() {
     }
   };
 
-  if (isPlatform && currentProject?.legacyPlan?.isFree) {
+  if (isPlatform && currentOrg?.plan?.isFree) {
     return (
       <Box className="p-4">
         <UpgradeToProBanner
-          title="Upgrade to Nhost Pro."
-          description={
-            <Text>
-              Graphite is an addon to the Pro plan. To unlock it, please upgrade
-              to Pro first.
-            </Text>
-          }
+          title="To unlock the DevAssistant, transfer this project to a Pro or Team organization."
+          description=""
         />
       </Box>
     );
   }
 
   if (
-    (isPlatform &&
-      !currentProject?.legacyPlan?.isFree &&
-      !currentProject?.config?.ai) ||
+    (isPlatform && !currentOrg?.plan?.isFree && !project?.config?.ai) ||
     !isGraphiteEnabled
   ) {
     return (
       <Box className="p-4">
-        <Alert className="grid items-center w-full grid-flow-col gap-2 place-content-between">
+        <Alert className="grid w-full grid-flow-col place-content-between items-center gap-2">
           <Text className="grid grid-flow-row justify-items-start gap-0.5">
             <Text component="span">
               To enable graphite, configure the service first in{' '}
               <Link
-                href={`/${currentWorkspace?.slug}/${currentProject?.slug}/settings/ai`}
+                href={`/orgs/${currentOrg?.slug}/projects/${project?.subdomain}/settings/ai`}
                 target="_blank"
                 rel="noopener noreferrer"
                 underline="hover"
@@ -197,11 +192,11 @@ export default function DevAssistant() {
   }
 
   return (
-    <div className="flex flex-col h-full overflow-auto">
+    <div className="flex h-full flex-col overflow-auto">
       <MessagesList loading={loading} />
 
       <form onSubmit={handleSubmit}>
-        <Box className="relative flex flex-row justify-between w-full p-2">
+        <Box className="relative flex w-full flex-row justify-between p-2">
           <Input
             value={userInput}
             onChange={(event) => {
@@ -224,7 +219,7 @@ export default function DevAssistant() {
             color="primary"
             aria-label="Send"
             type="submit"
-            className="absolute self-end w-12 h-10 right-2 rounded-xl"
+            className="absolute right-2 h-10 w-12 self-end rounded-xl"
           >
             {loading ? <ActivityIndicator /> : <ArrowUpIcon />}
           </IconButton>

dashboard/src/features/orgs/projects/ai/DevAssistant/components/MessageBox/MessageBox.tsx

@@ -4,7 +4,7 @@ import { IconButton } from '@/components/ui/v2/IconButton';
 import { CopyIcon } from '@/components/ui/v2/icons/CopyIcon';
 import { GraphiteIcon } from '@/components/ui/v2/icons/GraphiteIcon';
 import { Text } from '@/components/ui/v2/Text';
-import { type Message } from '@/features/ai/DevAssistant';
+import { type Message } from '@/features/orgs/projects/ai/DevAssistant';
 import { copy } from '@/utils/copy';
 import { useTheme } from '@mui/material';
 import { useUserData } from '@nhost/nextjs';
@@ -24,7 +24,7 @@ function PreComponent(
   const { children } = props;
 
   return (
-    <div className="relative group">
+    <div className="group relative">
       <pre>{children}</pre>
       <IconButton
         sx={{
@@ -34,13 +34,13 @@ function PreComponent(
         }}
         color="warning"
         variant="contained"
-        className="absolute hidden top-2 right-2 group-hover:flex"
+        className="absolute right-2 top-2 hidden group-hover:flex"
         onClick={(e) => {
           e.stopPropagation();
           copy(onlyText(children), 'Snippet');
         }}
       >
-        <CopyIcon className="w-5 h-5" />
+        <CopyIcon className="h-5 w-5" />
       </IconButton>
     </div>
   );
@@ -53,7 +53,7 @@ export default function MessageBox({ message }: { message: Message }) {
 
   return (
     <Box
-      className="flex flex-col p-4 space-y-4 border-t first:border-t-0"
+      className="flex flex-col space-y-4 border-t p-4 first:border-t-0"
       sx={{
         backgroundColor: isUserMessage && 'background.default',
       }}
@@ -67,7 +67,7 @@ export default function MessageBox({ message }: { message: Message }) {
         ) : (
           <>
             <Avatar
-              className="rounded-full h-7 w-7"
+              className="h-7 w-7 rounded-full"
               alt={user?.displayName}
               src={user?.avatarUrl}
             >

dashboard/src/features/orgs/projects/ai/DevAssistant/components/MessagesList/MessagesList.tsx

@@ -1,8 +1,8 @@
 import { Box } from '@/components/ui/v2/Box';
-import { LoadingAssistantMessage } from '@/features/ai/DevAssistant/components/LoadingAssistantMessage';
 import { MessageBox } from '@/features/ai/DevAssistant/components/MessageBox';
-import { projectMessagesState } from '@/features/ai/DevAssistant/state';
-import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { LoadingAssistantMessage } from '@/features/orgs/projects/ai/DevAssistant/components/LoadingAssistantMessage';
+import { projectMessagesState } from '@/features/orgs/projects/ai/DevAssistant/state';
+import { useProject } from '@/features/orgs/projects/hooks/useProject';
 import { memo, useEffect, useRef } from 'react';
 import { useRecoilValue } from 'recoil';
 
@@ -11,9 +11,9 @@ interface MessagesListProps {
 }
 
 function MessagesList({ loading }: MessagesListProps) {
+  const { project } = useProject();
   const bottomElement = useRef(null);
-  const { currentProject } = useCurrentWorkspaceAndProject();
-  const messages = useRecoilValue(projectMessagesState(currentProject.id));
+  const messages = useRecoilValue(projectMessagesState(project?.id));
 
   const scrollToBottom = () =>
     bottomElement?.current?.scrollIntoView({ behavior: 'instant' });

dashboard/src/features/orgs/projects/ai/settings/components/DisableAIServiceConfirmationDialog/DisableAIServiceConfirmationDialog.tsx

@@ -3,7 +3,7 @@ import { useDialog } from '@/components/common/DialogProvider';
 import { Box } from '@/components/ui/v2/Box';
 import { Button } from '@/components/ui/v2/Button';
 import { Text } from '@/components/ui/v2/Text';
-import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { useProject } from '@/features/orgs/projects/hooks/useProject';
 import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
 import { useLocalMimirClient } from '@/hooks/useLocalMimirClient';
 import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
@@ -26,11 +26,12 @@ export default function DisableAIServiceConfirmationDialog({
   onCancel,
   onServiceDisabled,
 }: DisableAIServiceConfirmationDialogProps) {
+  const { project } = useProject();
   const isPlatform = useIsPlatform();
   const { openDialog, closeDialog } = useDialog();
   const localMimirClient = useLocalMimirClient();
   const [loading, setLoading] = useState(false);
-  const { currentProject } = useCurrentWorkspaceAndProject();
+
   const [updateConfig] = useUpdateConfigMutation({
     ...(!isPlatform ? { client: localMimirClient } : {}),
   });
@@ -42,7 +43,7 @@ export default function DisableAIServiceConfirmationDialog({
       async () => {
         await updateConfig({
           variables: {
-            appId: currentProject.id,
+            appId: project?.id,
             config: {
               ai: null,
             },

dashboard/src/features/orgs/projects/authentication/settings/OTPEmailSettings/OTPEmailSettings.tsx

@@ -0,0 +1,139 @@
+import { ApplyLocalSettingsDialog } from '@/components/common/ApplyLocalSettingsDialog';
+import { useDialog } from '@/components/common/DialogProvider';
+import { useUI } from '@/components/common/UIProvider';
+import { Form } from '@/components/form/Form';
+import { SettingsContainer } from '@/components/layout/SettingsContainer';
+import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
+import { useIsPlatform } from '@/features/orgs/projects/common/hooks/useIsPlatform';
+import { useLocalMimirClient } from '@/features/orgs/projects/hooks/useLocalMimirClient';
+import { useProject } from '@/features/orgs/projects/hooks/useProject';
+import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
+import {
+  useGetSignInMethodsQuery,
+  useUpdateConfigMutation,
+} from '@/generated/graphql';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useEffect } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import * as Yup from 'yup';
+
+const validationSchema = Yup.object({
+  enabled: Yup.boolean(),
+});
+
+export type OTPEmailSettingsFormValues = Yup.InferType<typeof validationSchema>;
+
+export default function OTPEmailSettings() {
+  const { project } = useProject();
+  const { openDialog } = useDialog();
+  const isPlatform = useIsPlatform();
+  const { maintenanceActive } = useUI();
+  const localMimirClient = useLocalMimirClient();
+
+  const [updateConfig] = useUpdateConfigMutation({
+    ...(!isPlatform ? { client: localMimirClient } : {}),
+  });
+
+  const { data, loading, error } = useGetSignInMethodsQuery({
+    variables: { appId: project?.id },
+    ...(!isPlatform ? { client: localMimirClient } : {}),
+  });
+
+  const { enabled } = data?.config?.auth?.method?.otp?.email || {};
+
+  const form = useForm<OTPEmailSettingsFormValues>({
+    reValidateMode: 'onSubmit',
+    defaultValues: {
+      enabled,
+    },
+    resolver: yupResolver(validationSchema),
+  });
+
+  useEffect(() => {
+    if (!loading) {
+      form.reset({ enabled });
+    }
+  }, [loading, enabled, form]);
+
+  if (loading) {
+    return (
+      <ActivityIndicator
+        delay={1000}
+        label="Loading one-time passwords over email settings..."
+        className="justify-center"
+      />
+    );
+  }
+
+  if (error) {
+    throw error;
+  }
+
+  const handleOTPEmailSettingsChange = async (
+    values: OTPEmailSettingsFormValues,
+  ) => {
+    const updateConfigPromise = updateConfig({
+      variables: {
+        appId: project.id,
+        config: {
+          auth: {
+            method: {
+              otp: {
+                email: {
+                  enabled: values.enabled,
+                },
+              },
+            },
+          },
+        },
+      },
+    });
+
+    await execPromiseWithErrorToast(
+      async () => {
+        await updateConfigPromise;
+        form.reset(values);
+
+        if (!isPlatform) {
+          openDialog({
+            title: 'Apply your changes',
+            component: <ApplyLocalSettingsDialog />,
+            props: {
+              PaperProps: {
+                className: 'max-w-2xl',
+              },
+            },
+          });
+        }
+      },
+      {
+        loadingMessage:
+          'One-time passwords over email settings are being updated...',
+        successMessage:
+          'One-time passwords over email settings have been updated successfully.',
+        errorMessage:
+          'An error occurred while trying to update one-time passwords over email settings.',
+      },
+    );
+  };
+
+  return (
+    <FormProvider {...form}>
+      <Form onSubmit={handleOTPEmailSettingsChange}>
+        <SettingsContainer
+          title="One-Time Passwords over email"
+          description="Allow users to sign in with a one-time password sent to their email address."
+          slotProps={{
+            submitButton: {
+              disabled: !form.formState.isDirty || maintenanceActive,
+              loading: form.formState.isSubmitting,
+            },
+          }}
+          switchId="enabled"
+          showSwitch
+          className="hidden"
+        />
+      </Form>
+    </FormProvider>
+  );
+}

dashboard/src/features/orgs/projects/authentication/settings/OTPEmailSettings/index.ts

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

dashboard/src/features/orgs/projects/authentication/settings/components/AllowedEmailSettings/AllowedEmailSettings.tsx

@@ -6,7 +6,6 @@ import { SettingsContainer } from '@/components/layout/SettingsContainer';
 import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
 import { Input } from '@/components/ui/v2/Input';
 import {
-  GetAuthenticationSettingsDocument,
   useGetAuthenticationSettingsQuery,
   useUpdateConfigMutation,
 } from '@/generated/graphql';
@@ -32,13 +31,13 @@ export type AllowedEmailSettingsFormValues = Yup.InferType<
 >;
 
 export default function AllowedEmailDomainsSettings() {
-  const { openDialog } = useDialog();
+  const { project } = useProject();
   const isPlatform = useIsPlatform();
+  const { openDialog } = useDialog();
   const { maintenanceActive } = useUI();
   const localMimirClient = useLocalMimirClient();
-  const { project } = useProject();
+
   const [updateConfig] = useUpdateConfigMutation({
-    refetchQueries: [GetAuthenticationSettingsDocument],
     ...(!isPlatform ? { client: localMimirClient } : {}),
   });
 

dashboard/src/features/orgs/projects/authentication/settings/components/AllowedRedirectURLsSettings/AllowedRedirectURLsSettings.tsx

@@ -6,7 +6,6 @@ import { SettingsContainer } from '@/components/layout/SettingsContainer';
 import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
 import { Input } from '@/components/ui/v2/Input';
 import {
-  GetAuthenticationSettingsDocument,
   useGetAuthenticationSettingsQuery,
   useUpdateConfigMutation,
 } from '@/generated/graphql';
@@ -29,13 +28,13 @@ export type AllowedRedirectURLFormValues = Yup.InferType<
 >;
 
 export default function AllowedRedirectURLsSettings() {
+  const { project } = useProject();
   const { openDialog } = useDialog();
   const isPlatform = useIsPlatform();
-  const localMimirClient = useLocalMimirClient();
   const { maintenanceActive } = useUI();
-  const { project } = useProject();
+  const localMimirClient = useLocalMimirClient();
+
   const [updateConfig] = useUpdateConfigMutation({
-    refetchQueries: [GetAuthenticationSettingsDocument],
     ...(!isPlatform ? { client: localMimirClient } : {}),
   });
 

dashboard/src/features/orgs/projects/authentication/settings/components/AnonymousSignInSettings/AnonymousSignInSettings.tsx

@@ -9,7 +9,6 @@ import { useLocalMimirClient } from '@/features/orgs/projects/hooks/useLocalMimi
 import { useProject } from '@/features/orgs/projects/hooks/useProject';
 import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
 import {
-  GetSignInMethodsDocument,
   useGetSignInMethodsQuery,
   useUpdateConfigMutation,
 } from '@/generated/graphql';
@@ -25,13 +24,13 @@ const validationSchema = Yup.object({
 export type AnonymousSignInFormValues = Yup.InferType<typeof validationSchema>;
 
 export default function AnonymousSignInSettings() {
+  const { project } = useProject();
   const { openDialog } = useDialog();
   const isPlatform = useIsPlatform();
   const { maintenanceActive } = useUI();
   const localMimirClient = useLocalMimirClient();
-  const { project } = useProject();
+
   const [updateConfig] = useUpdateConfigMutation({
-    refetchQueries: [GetSignInMethodsDocument],
     ...(!isPlatform ? { client: localMimirClient } : {}),
   });
 

dashboard/src/features/orgs/projects/authentication/settings/components/AppleProviderSettings/AppleProviderSettings.tsx

@@ -14,7 +14,6 @@ import { useLocalMimirClient } from '@/features/orgs/projects/hooks/useLocalMimi
 import { useProject } from '@/features/orgs/projects/hooks/useProject';
 import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
 import {
-  GetSignInMethodsDocument,
   useGetSignInMethodsQuery,
   useUpdateConfigMutation,
 } from '@/generated/graphql';
@@ -51,6 +50,7 @@ const validationSchema = Yup.object({
       is: true,
       then: (schema) => schema.required(),
     }),
+  audience: Yup.string().label('Audience'),
   enabled: Yup.boolean(),
 });
 
@@ -58,13 +58,13 @@ export type AppleProviderFormValues = Yup.InferType<typeof validationSchema>;
 
 export default function AppleProviderSettings() {
   const theme = useTheme();
+  const { project } = useProject();
   const { openDialog } = useDialog();
   const isPlatform = useIsPlatform();
   const { maintenanceActive } = useUI();
   const localMimirClient = useLocalMimirClient();
-  const { project } = useProject();
+
   const [updateConfig] = useUpdateConfigMutation({
-    refetchQueries: [GetSignInMethodsDocument],
     ...(!isPlatform ? { client: localMimirClient } : {}),
   });
 
@@ -73,7 +73,7 @@ export default function AppleProviderSettings() {
     ...(!isPlatform ? { client: localMimirClient } : {}),
   });
 
-  const { clientId, enabled, keyId, privateKey, teamId } =
+  const { clientId, enabled, keyId, privateKey, teamId, audience } =
     data?.config?.auth?.method?.oauth?.apple || {};
 
   const form = useForm<AppleProviderFormValues>({
@@ -83,6 +83,7 @@ export default function AppleProviderSettings() {
       keyId: keyId || '',
       clientId: clientId || '',
       privateKey: privateKey || '',
+      audience: audience || '',
       enabled: enabled || false,
     },
     resolver: yupResolver(validationSchema),
@@ -95,10 +96,11 @@ export default function AppleProviderSettings() {
         keyId: keyId || '',
         clientId: clientId || '',
         privateKey: privateKey || '',
+        audience: audience || '',
         enabled: enabled || false,
       });
     }
-  }, [loading, teamId, keyId, clientId, privateKey, enabled, form]);
+  }, [loading, teamId, keyId, clientId, privateKey, audience, enabled, form]);
 
   if (loading) {
     return (
@@ -238,6 +240,18 @@ export default function AppleProviderSettings() {
             error={!!formState.errors?.privateKey}
             helperText={formState.errors?.privateKey?.message}
           />
+          <Input
+            {...register('audience')}
+            name="audience"
+            id="audience"
+            label="Audience (optional)"
+            placeholder="Apple Audience"
+            className="col-span-2"
+            fullWidth
+            hideEmptyHelperText
+            error={!!formState.errors?.audience}
+            helperText={formState.errors?.audience?.message}
+          />
           <Input
             name="redirectUrl"
             id="apple-redirectUrl"
@@ -269,7 +283,7 @@ export default function AppleProviderSettings() {
                     );
                   }}
                 >
-                  <CopyIcon className="w-4 h-4" />
+                  <CopyIcon className="h-4 w-4" />
                 </IconButton>
               </InputAdornment>
             }

dashboard/src/features/orgs/projects/authentication/settings/components/AuthServiceVersionSettings/AuthServiceVersionSettings.tsx

@@ -6,7 +6,6 @@ import { Form } from '@/components/form/Form';
 import { SettingsContainer } from '@/components/layout/SettingsContainer';
 import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
 import {
-  GetAuthenticationSettingsDocument,
   Software_Type_Enum,
   useGetAuthenticationSettingsQuery,
   useGetSoftwareVersionsQuery,
@@ -34,13 +33,13 @@ export type AuthServiceVersionFormValues = Yup.InferType<
 >;
 
 export default function AuthServiceVersionSettings() {
-  const { openDialog } = useDialog();
-  const isPlatform = useIsPlatform();
-  const localMimirClient = useLocalMimirClient();
-  const { maintenanceActive } = useUI();
   const { project } = useProject();
+  const isPlatform = useIsPlatform();
+  const { openDialog } = useDialog();
+  const { maintenanceActive } = useUI();
+  const localMimirClient = useLocalMimirClient();
+
   const [updateConfig] = useUpdateConfigMutation({
-    refetchQueries: [GetAuthenticationSettingsDocument],
     ...(!isPlatform ? { client: localMimirClient } : {}),
   });
 
@@ -154,7 +153,7 @@ export default function AuthServiceVersionSettings() {
           }}
           docsLink="https://github.com/nhost/hasura-auth/releases"
           docsTitle="the latest releases"
-          className="grid grid-flow-row px-4 gap-x-4 gap-y-2 lg:grid-cols-5"
+          className="grid grid-flow-row gap-x-4 gap-y-2 px-4 lg:grid-cols-5"
         >
           <ControlledAutocomplete
             id="version"

dashboard/src/features/orgs/projects/authentication/settings/components/AzureADProviderSettings/AzureADProviderSettings.tsx

@@ -15,7 +15,6 @@ import { useLocalMimirClient } from '@/features/orgs/projects/hooks/useLocalMimi
 import { useProject } from '@/features/orgs/projects/hooks/useProject';
 import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
 import {
-  GetSignInMethodsDocument,
   useGetSignInMethodsQuery,
   useUpdateConfigMutation,
 } from '@/generated/graphql';
@@ -51,13 +50,13 @@ const validationSchema = Yup.object({
 export type AzureADProviderFormValues = Yup.InferType<typeof validationSchema>;
 
 export default function AzureADProviderSettings() {
+  const { project } = useProject();
   const { openDialog } = useDialog();
   const isPlatform = useIsPlatform();
-  const localMimirClient = useLocalMimirClient();
   const { maintenanceActive } = useUI();
-  const { project } = useProject();
+  const localMimirClient = useLocalMimirClient();
+
   const [updateConfig] = useUpdateConfigMutation({
-    refetchQueries: [GetSignInMethodsDocument],
     ...(!isPlatform ? { client: localMimirClient } : {}),
   });
 
@@ -214,7 +213,7 @@ export default function AzureADProviderSettings() {
                     );
                   }}
                 >
-                  <CopyIcon className="w-4 h-4" />
+                  <CopyIcon className="h-4 w-4" />
                 </IconButton>
               </InputAdornment>
             }

dashboard/src/features/orgs/projects/authentication/settings/components/BlockedEmailSettings/BlockedEmailSettings.tsx

@@ -6,7 +6,6 @@ import { SettingsContainer } from '@/components/layout/SettingsContainer';
 import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
 import { Input } from '@/components/ui/v2/Input';
 import {
-  GetAuthenticationSettingsDocument,
   useGetAuthenticationSettingsQuery,
   useUpdateConfigMutation,
 } from '@/generated/graphql';
@@ -30,13 +29,13 @@ const validationSchema = Yup.object({
 export type BlockedEmailFormValues = Yup.InferType<typeof validationSchema>;
 
 export default function BlockedEmailSettings() {
-  const { openDialog } = useDialog();
+  const { project } = useProject();
   const isPlatform = useIsPlatform();
+  const { openDialog } = useDialog();
   const { maintenanceActive } = useUI();
   const localMimirClient = useLocalMimirClient();
-  const { project } = useProject();
+
   const [updateConfig] = useUpdateConfigMutation({
-    refetchQueries: [GetAuthenticationSettingsDocument],
     ...(!isPlatform ? { client: localMimirClient } : {}),
   });
 

dashboard/src/features/orgs/projects/authentication/settings/components/ClientURLSettings/ClientURLSettings.tsx

@@ -6,7 +6,6 @@ import { SettingsContainer } from '@/components/layout/SettingsContainer';
 import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
 import { Input } from '@/components/ui/v2/Input';
 import {
-  GetAuthenticationSettingsDocument,
   useGetAuthenticationSettingsQuery,
   useUpdateConfigMutation,
 } from '@/generated/graphql';
@@ -27,13 +26,13 @@ const validationSchema = Yup.object({
 export type ClientURLFormValues = Yup.InferType<typeof validationSchema>;
 
 export default function ClientURLSettings() {
+  const { project } = useProject();
   const { openDialog } = useDialog();
   const isPlatform = useIsPlatform();
   const { maintenanceActive } = useUI();
   const localMimirClient = useLocalMimirClient();
-  const { project } = useProject();
+
   const [updateConfig] = useUpdateConfigMutation({
-    refetchQueries: [GetAuthenticationSettingsDocument],
     ...(!isPlatform ? { client: localMimirClient } : {}),
   });
 

dashboard/src/features/orgs/projects/authentication/settings/components/ConcealErrorsSettings/ConcealErrorsSettings.tsx

@@ -5,7 +5,6 @@ import { Form } from '@/components/form/Form';
 import { SettingsContainer } from '@/components/layout/SettingsContainer';
 import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
 import {
-  GetAuthenticationSettingsDocument,
   useGetAuthenticationSettingsQuery,
   useUpdateConfigMutation,
 } from '@/utils/__generated__/graphql';
@@ -27,13 +26,13 @@ export type ToggleConcealErrorsFormValues = Yup.InferType<
 >;
 
 export default function ConcealErrorsSettings() {
+  const { project } = useProject();
   const { openDialog } = useDialog();
   const isPlatform = useIsPlatform();
   const { maintenanceActive } = useUI();
   const localMimirClient = useLocalMimirClient();
-  const { project } = useProject();
+
   const [updateConfig] = useUpdateConfigMutation({
-    refetchQueries: [GetAuthenticationSettingsDocument],
     ...(!isPlatform ? { client: localMimirClient } : {}),
   });
 

dashboard/src/features/orgs/projects/authentication/settings/components/DeleteSMTPSettings/DeleteSMTPSettings.tsx

@@ -10,7 +10,7 @@ import { useLocalMimirClient } from '@/features/orgs/projects/hooks/useLocalMimi
 import { useProject } from '@/features/orgs/projects/hooks/useProject';
 import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
 import {
-  GetSmtpSettingsDocument,
+  useGetSmtpSettingsQuery,
   useUpdateConfigMutation,
 } from '@/utils/__generated__/graphql';
 import { useState } from 'react';
@@ -52,16 +52,24 @@ function ConfirmDeleteSMTPSettingsModal({
 }
 
 export default function DeleteSMTPSettings() {
-  const { openDialog, closeDialog } = useDialog();
-
+  const { project } = useProject();
   const isPlatform = useIsPlatform();
-  const localMimirClient = useLocalMimirClient();
   const { maintenanceActive } = useUI();
   const [loading, setLoading] = useState(false);
-  const { project } = useProject();
+  const { openDialog, closeDialog } = useDialog();
+  const localMimirClient = useLocalMimirClient();
+
+  const { data, refetch } = useGetSmtpSettingsQuery({
+    variables: { appId: project?.id },
+    fetchPolicy: 'cache-and-network',
+    ...(!isPlatform ? { client: localMimirClient } : {}),
+  });
+
+  const smtpSettings = data?.config?.provider?.smtp ?? {};
+
+  const isSMTPConfigured = Boolean(Object.keys(smtpSettings).length);
 
   const [updateConfig] = useUpdateConfigMutation({
-    refetchQueries: [GetSmtpSettingsDocument],
     ...(!isPlatform ? { client: localMimirClient } : {}),
   });
 
@@ -111,7 +119,10 @@ export default function DeleteSMTPSettings() {
       component: (
         <ConfirmDeleteSMTPSettingsModal
           close={closeDialog}
-          onDelete={deleteSMTPSettings}
+          onDelete={async () => {
+            await deleteSMTPSettings();
+            await refetch();
+          }}
         />
       ),
     });
@@ -132,7 +143,7 @@ export default function DeleteSMTPSettings() {
           color="error"
           className="mx-4 mt-4 justify-self-end"
           onClick={confirmDeleteSMTPSettings}
-          disabled={loading || maintenanceActive}
+          disabled={loading || maintenanceActive || !isSMTPConfigured}
           loading={loading}
         >
           Delete

dashboard/src/features/orgs/projects/authentication/settings/components/DisableNewUsersSettings/DisableNewUsersSettings.tsx

@@ -5,7 +5,6 @@ import { Form } from '@/components/form/Form';
 import { SettingsContainer } from '@/components/layout/SettingsContainer';
 import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
 import {
-  GetAuthenticationSettingsDocument,
   useGetAuthenticationSettingsQuery,
   useUpdateConfigMutation,
 } from '@/utils/__generated__/graphql';
@@ -25,13 +24,13 @@ const validationSchema = Yup.object({
 export type DisableNewUsersFormValues = Yup.InferType<typeof validationSchema>;
 
 export default function DisableNewUsersSettings() {
+  const { project } = useProject();
   const { openDialog } = useDialog();
   const isPlatform = useIsPlatform();
   const { maintenanceActive } = useUI();
   const localMimirClient = useLocalMimirClient();
-  const { project } = useProject();
+
   const [updateConfig] = useUpdateConfigMutation({
-    refetchQueries: [GetAuthenticationSettingsDocument],
     ...(!isPlatform ? { client: localMimirClient } : {}),
   });
 
@@ -43,14 +42,14 @@ export default function DisableNewUsersSettings() {
   const form = useForm<DisableNewUsersFormValues>({
     reValidateMode: 'onSubmit',
     defaultValues: {
-      disabled: !data?.config?.auth?.signUp?.enabled,
+      disabled: data?.config?.auth?.signUp?.disableNewUsers,
     },
   });
 
   useEffect(() => {
     if (!loading) {
       form.reset({
-        disabled: !data?.config?.auth?.signUp?.enabled,
+        disabled: data?.config?.auth?.signUp?.disableNewUsers,
       });
     }
   }, [loading, data, form]);
@@ -59,7 +58,7 @@ export default function DisableNewUsersSettings() {
     return (
       <ActivityIndicator
         delay={1000}
-        label="Loading disabled sign up settings..."
+        label="Loading disabled new users settings..."
         className="justify-center"
       />
     );
@@ -80,7 +79,7 @@ export default function DisableNewUsersSettings() {
         config: {
           auth: {
             signUp: {
-              enabled: !values.disabled,
+              disableNewUsers: values.disabled,
             },
           },
         },
@@ -105,10 +104,10 @@ export default function DisableNewUsersSettings() {
         }
       },
       {
-        loadingMessage: 'Disabling new user sign ups...',
-        successMessage: 'New user sign ups have been disabled successfully.',
+        loadingMessage: 'Disabling new users sign ins...',
+        successMessage: 'New users sign ins have been disabled successfully.',
         errorMessage:
-          'An error occurred while trying to disable new user sign ups.',
+          'An error occurred while trying to disable new users sign ins.',
       },
     );
   };

dashboard/src/features/orgs/projects/authentication/settings/components/DisableSignUpsSettings/DisableSignUpsSettings.tsx

@@ -0,0 +1,134 @@
+import { ApplyLocalSettingsDialog } from '@/components/common/ApplyLocalSettingsDialog';
+import { useDialog } from '@/components/common/DialogProvider';
+import { useUI } from '@/components/common/UIProvider';
+import { Form } from '@/components/form/Form';
+import { SettingsContainer } from '@/components/layout/SettingsContainer';
+import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
+import {
+  useGetAuthenticationSettingsQuery,
+  useUpdateConfigMutation,
+} from '@/utils/__generated__/graphql';
+import { useEffect } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import * as Yup from 'yup';
+
+import { useIsPlatform } from '@/features/orgs/projects/common/hooks/useIsPlatform';
+import { useLocalMimirClient } from '@/features/orgs/projects/hooks/useLocalMimirClient';
+import { useProject } from '@/features/orgs/projects/hooks/useProject';
+import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
+
+const validationSchema = Yup.object({
+  disabled: Yup.boolean(),
+});
+
+export type DisableSignUpsFormValues = Yup.InferType<typeof validationSchema>;
+
+export default function DisableSignUpsSettings() {
+  const { openDialog } = useDialog();
+  const isPlatform = useIsPlatform();
+  const { maintenanceActive } = useUI();
+  const localMimirClient = useLocalMimirClient();
+  const { project } = useProject();
+  const [updateConfig] = useUpdateConfigMutation({
+    ...(!isPlatform ? { client: localMimirClient } : {}),
+  });
+
+  const { data, loading, error } = useGetAuthenticationSettingsQuery({
+    variables: { appId: project?.id },
+    ...(!isPlatform ? { client: localMimirClient } : {}),
+  });
+
+  const form = useForm<DisableSignUpsFormValues>({
+    reValidateMode: 'onSubmit',
+    defaultValues: {
+      disabled: !data?.config?.auth?.signUp?.enabled,
+    },
+  });
+
+  useEffect(() => {
+    if (!loading) {
+      form.reset({
+        disabled: !data?.config?.auth?.signUp?.enabled,
+      });
+    }
+  }, [loading, data, form]);
+
+  if (loading) {
+    return (
+      <ActivityIndicator
+        delay={1000}
+        label="Loading disabled sign up settings..."
+        className="justify-center"
+      />
+    );
+  }
+
+  if (error) {
+    throw error;
+  }
+
+  const { formState } = form;
+
+  const handleDisableSignUpsChange = async (
+    values: DisableSignUpsFormValues,
+  ) => {
+    const updateConfigPromise = updateConfig({
+      variables: {
+        appId: project.id,
+        config: {
+          auth: {
+            signUp: {
+              enabled: !values.disabled,
+            },
+          },
+        },
+      },
+    });
+
+    await execPromiseWithErrorToast(
+      async () => {
+        await updateConfigPromise;
+        form.reset(values);
+
+        if (!isPlatform) {
+          openDialog({
+            title: 'Apply your changes',
+            component: <ApplyLocalSettingsDialog />,
+            props: {
+              PaperProps: {
+                className: 'max-w-2xl',
+              },
+            },
+          });
+        }
+      },
+      {
+        loadingMessage: 'Disabling new users sign ups...',
+        successMessage: 'New users sign ups have been disabled successfully.',
+        errorMessage:
+          'An error occurred while trying to disable new users sign ups.',
+      },
+    );
+  };
+
+  return (
+    <FormProvider {...form}>
+      <Form onSubmit={handleDisableSignUpsChange}>
+        <SettingsContainer
+          title="Disable Sign Ups"
+          description="If set, new users won't be able to sign up."
+          docsLink="https://docs.nhost.io/guides/auth/overview#disable-sign-ups"
+          switchId="disabled"
+          showSwitch
+          slotProps={{
+            submitButton: {
+              disabled: !formState.isDirty || maintenanceActive,
+              loading: formState.isSubmitting,
+            },
+          }}
+          className="hidden"
+        />
+      </Form>
+    </FormProvider>
+  );
+}

dashboard/src/features/orgs/projects/authentication/settings/components/DisableSignUpsSettings/index.ts

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

dashboard/src/features/orgs/projects/authentication/settings/components/DiscordProviderSettings/DiscordProviderSettings.tsx

@@ -19,7 +19,6 @@ import { useLocalMimirClient } from '@/features/orgs/projects/hooks/useLocalMimi
 import { useProject } from '@/features/orgs/projects/hooks/useProject';
 import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
 import {
-  GetSignInMethodsDocument,
   useGetSignInMethodsQuery,
   useUpdateConfigMutation,
 } from '@/generated/graphql';
@@ -30,13 +29,13 @@ import { FormProvider, useForm } from 'react-hook-form';
 import { twMerge } from 'tailwind-merge';
 
 export default function DiscordProviderSettings() {
+  const { project } = useProject();
   const { openDialog } = useDialog();
   const isPlatform = useIsPlatform();
   const { maintenanceActive } = useUI();
   const localMimirClient = useLocalMimirClient();
-  const { project } = useProject();
+
   const [updateConfig] = useUpdateConfigMutation({
-    refetchQueries: [GetSignInMethodsDocument],
     ...(!isPlatform ? { client: localMimirClient } : {}),
   });
 
@@ -184,7 +183,7 @@ export default function DiscordProviderSettings() {
                     );
                   }}
                 >
-                  <CopyIcon className="w-4 h-4" />
+                  <CopyIcon className="h-4 w-4" />
                 </IconButton>
               </InputAdornment>
             }

dashboard/src/features/orgs/projects/authentication/settings/components/EmailAndPasswordSettings/EmailAndPasswordSettings.tsx

@@ -8,7 +8,6 @@ import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
 import { Input } from '@/components/ui/v2/Input';
 import { Text } from '@/components/ui/v2/Text';
 import {
-  GetSignInMethodsDocument,
   useGetSignInMethodsQuery,
   useUpdateConfigMutation,
 } from '@/generated/graphql';
@@ -35,13 +34,13 @@ const validationSchema = Yup.object({
 export type EmailAndPasswordFormValues = Yup.InferType<typeof validationSchema>;
 
 export default function EmailAndPasswordSettings() {
+  const { project } = useProject();
   const { openDialog } = useDialog();
   const isPlatform = useIsPlatform();
   const { maintenanceActive } = useUI();
   const localMimirClient = useLocalMimirClient();
-  const { project } = useProject();
+
   const [updateConfig] = useUpdateConfigMutation({
-    refetchQueries: [GetSignInMethodsDocument],
     ...(!isPlatform ? { client: localMimirClient } : {}),
   });
 

dashboard/src/features/orgs/projects/authentication/settings/components/FacebookProviderSettings/FacebookProviderSettings.tsx

@@ -14,7 +14,6 @@ import {
   baseProviderValidationSchema,
 } from '@/features/orgs/projects/authentication/settings/components/BaseProviderSettings';
 import {
-  GetSignInMethodsDocument,
   useGetSignInMethodsQuery,
   useUpdateConfigMutation,
 } from '@/generated/graphql';
@@ -31,13 +30,13 @@ import { useProject } from '@/features/orgs/projects/hooks/useProject';
 import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
 
 export default function FacebookProviderSettings() {
+  const { project } = useProject();
   const { openDialog } = useDialog();
   const isPlatform = useIsPlatform();
   const { maintenanceActive } = useUI();
   const localMimirClient = useLocalMimirClient();
-  const { project } = useProject();
+
   const [updateConfig] = useUpdateConfigMutation({
-    refetchQueries: [GetSignInMethodsDocument],
     ...(!isPlatform ? { client: localMimirClient } : {}),
   });
 
@@ -185,7 +184,7 @@ export default function FacebookProviderSettings() {
                     );
                   }}
                 >
-                  <CopyIcon className="w-4 h-4" />
+                  <CopyIcon className="h-4 w-4" />
                 </IconButton>
               </InputAdornment>
             }

dashboard/src/features/orgs/projects/authentication/settings/components/GitHubProviderSettings/GitHubProviderSettings.tsx

@@ -14,7 +14,6 @@ import {
   baseProviderValidationSchema,
 } from '@/features/orgs/projects/authentication/settings/components/BaseProviderSettings';
 import {
-  GetSignInMethodsDocument,
   useGetSignInMethodsQuery,
   useUpdateConfigMutation,
 } from '@/generated/graphql';
@@ -33,13 +32,13 @@ import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWith
 
 export default function GitHubProviderSettings() {
   const theme = useTheme();
+  const { project } = useProject();
   const { openDialog } = useDialog();
   const isPlatform = useIsPlatform();
   const { maintenanceActive } = useUI();
   const localMimirClient = useLocalMimirClient();
-  const { project } = useProject();
+
   const [updateConfig] = useUpdateConfigMutation({
-    refetchQueries: [GetSignInMethodsDocument],
     ...(!isPlatform ? { client: localMimirClient } : {}),
   });
 
@@ -191,7 +190,7 @@ export default function GitHubProviderSettings() {
                     );
                   }}
                 >
-                  <CopyIcon className="w-4 h-4" />
+                  <CopyIcon className="h-4 w-4" />
                 </IconButton>
               </InputAdornment>
             }

dashboard/src/features/orgs/projects/authentication/settings/components/GoogleProviderSettings/GoogleProviderSettings.tsx

@@ -10,11 +10,6 @@ import { Input } from '@/components/ui/v2/Input';
 import { InputAdornment } from '@/components/ui/v2/InputAdornment';
 import type { BaseProviderSettingsFormValues } from '@/features/orgs/projects/authentication/settings/components/BaseProviderSettings';
 import {
-  BaseProviderSettings,
-  baseProviderValidationSchema,
-} from '@/features/orgs/projects/authentication/settings/components/BaseProviderSettings';
-import {
-  GetSignInMethodsDocument,
   useGetSignInMethodsQuery,
   useUpdateConfigMutation,
 } from '@/generated/graphql';
@@ -29,15 +24,37 @@ import { generateAppServiceUrl } from '@/features/orgs/projects/common/utils/gen
 import { useLocalMimirClient } from '@/features/orgs/projects/hooks/useLocalMimirClient';
 import { useProject } from '@/features/orgs/projects/hooks/useProject';
 import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
+import * as Yup from 'yup';
+
+const googleProviderValidationSchema = Yup.object({
+  clientId: Yup.string()
+    .label('Client ID')
+    .when('enabled', {
+      is: true,
+      then: (schema) => schema.required(),
+    }),
+  clientSecret: Yup.string()
+    .label('Client Secret')
+    .when('enabled', {
+      is: true,
+      then: (schema) => schema.required(),
+    }),
+  audience: Yup.string().label('Audience'),
+  enabled: Yup.bool(),
+});
+
+export type GoogleProviderFormValues = Yup.InferType<
+  typeof googleProviderValidationSchema
+>;
 
 export default function GoogleProviderSettings() {
+  const { project } = useProject();
   const { openDialog } = useDialog();
   const isPlatform = useIsPlatform();
   const { maintenanceActive } = useUI();
   const localMimirClient = useLocalMimirClient();
-  const { project } = useProject();
+
   const [updateConfig] = useUpdateConfigMutation({
-    refetchQueries: [GetSignInMethodsDocument],
     ...(!isPlatform ? { client: localMimirClient } : {}),
   });
 
@@ -46,17 +63,18 @@ export default function GoogleProviderSettings() {
     ...(!isPlatform ? { client: localMimirClient } : {}),
   });
 
-  const { clientId, clientSecret, enabled } =
+  const { clientId, clientSecret, enabled, audience } =
     data?.config?.auth?.method?.oauth?.google || {};
 
-  const form = useForm<BaseProviderSettingsFormValues>({
+  const form = useForm<GoogleProviderFormValues>({
     reValidateMode: 'onSubmit',
     defaultValues: {
       clientId: clientId || '',
       clientSecret: clientSecret || '',
+      audience: audience || '',
       enabled: enabled || false,
     },
-    resolver: yupResolver(baseProviderValidationSchema),
+    resolver: yupResolver(googleProviderValidationSchema),
   });
 
   useEffect(() => {
@@ -64,10 +82,11 @@ export default function GoogleProviderSettings() {
       form.reset({
         clientId: clientId || '',
         clientSecret: clientSecret || '',
+        audience: audience || '',
         enabled: enabled || false,
       });
     }
-  }, [loading, clientId, clientSecret, enabled, form]);
+  }, [loading, clientId, clientSecret, audience, enabled, form]);
 
   if (loading) {
     return (
@@ -83,7 +102,7 @@ export default function GoogleProviderSettings() {
     throw error;
   }
 
-  const { formState, watch } = form;
+  const { formState, watch, register } = form;
   const authEnabled = watch('enabled');
 
   async function handleSubmit(formValues: BaseProviderSettingsFormValues) {
@@ -149,11 +168,44 @@ export default function GoogleProviderSettings() {
           switchId="enabled"
           showSwitch
           className={twMerge(
-            'grid-flow-rows grid grid-cols-2 grid-rows-2 gap-x-3 gap-y-4 px-4 py-2',
+            'grid-flow-rows grid grid-cols-2 grid-rows-3 gap-x-3 gap-y-4 px-4 py-2',
             !authEnabled && 'hidden',
           )}
         >
-          <BaseProviderSettings providerName="google" />
+          <Input
+            {...register('clientId')}
+            id="google-clientId"
+            label="Client ID"
+            placeholder="Enter your Client ID"
+            className="col-span-1"
+            fullWidth
+            hideEmptyHelperText
+            error={!!formState.errors?.clientId}
+            helperText={formState.errors?.clientId?.message}
+          />
+          <Input
+            {...register('clientSecret')}
+            id="google-clientSecret"
+            label="Client Secret"
+            placeholder="Enter your Client Secret"
+            className="col-span-1"
+            fullWidth
+            hideEmptyHelperText
+            error={!!formState.errors?.clientSecret}
+            helperText={formState.errors?.clientSecret?.message}
+          />
+          <Input
+            {...register('audience')}
+            name="audience"
+            id="audience"
+            label="Audience (optional)"
+            placeholder="Enter Audience"
+            className="col-span-2"
+            fullWidth
+            hideEmptyHelperText
+            error={!!formState.errors?.audience}
+            helperText={formState.errors?.audience?.message}
+          />
           <Input
             name="redirectUrl"
             id="google-redirectUrl"
@@ -185,7 +237,7 @@ export default function GoogleProviderSettings() {
                     );
                   }}
                 >
-                  <CopyIcon className="w-4 h-4" />
+                  <CopyIcon className="h-4 w-4" />
                 </IconButton>
               </InputAdornment>
             }

dashboard/src/features/orgs/projects/authentication/settings/components/GravatarSettings/GravatarSettings.tsx

@@ -7,7 +7,6 @@ import { SettingsContainer } from '@/components/layout/SettingsContainer';
 import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
 import { Option } from '@/components/ui/v2/Option';
 import {
-  GetAuthenticationSettingsDocument,
   useGetAuthenticationSettingsQuery,
   useUpdateConfigMutation,
 } from '@/generated/graphql';
@@ -35,13 +34,13 @@ const validationSchema = Yup.object({
 export type GravatarFormValues = Yup.InferType<typeof validationSchema>;
 
 export default function GravatarSettings() {
+  const { project } = useProject();
   const { openDialog } = useDialog();
   const isPlatform = useIsPlatform();
   const { maintenanceActive } = useUI();
   const localMimirClient = useLocalMimirClient();
-  const { project } = useProject();
+
   const [updateConfig] = useUpdateConfigMutation({
-    refetchQueries: [GetAuthenticationSettingsDocument],
     ...(!isPlatform ? { client: localMimirClient } : {}),
   });
 

dashboard/src/features/orgs/projects/authentication/settings/components/LinkedInProviderSettings/LinkedInProviderSettings.tsx

@@ -14,7 +14,6 @@ import {
   baseProviderValidationSchema,
 } from '@/features/orgs/projects/authentication/settings/components/BaseProviderSettings';
 import {
-  GetSignInMethodsDocument,
   useGetSignInMethodsQuery,
   useUpdateConfigMutation,
 } from '@/generated/graphql';
@@ -31,13 +30,13 @@ import { useProject } from '@/features/orgs/projects/hooks/useProject';
 import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
 
 export default function LinkedInProviderSettings() {
+  const { project } = useProject();
   const { openDialog } = useDialog();
   const isPlatform = useIsPlatform();
   const { maintenanceActive } = useUI();
   const localMimirClient = useLocalMimirClient();
-  const { project } = useProject();
+
   const [updateConfig] = useUpdateConfigMutation({
-    refetchQueries: [GetSignInMethodsDocument],
     ...(!isPlatform ? { client: localMimirClient } : {}),
   });
 
@@ -185,7 +184,7 @@ export default function LinkedInProviderSettings() {
                     );
                   }}
                 >
-                  <CopyIcon className="w-4 h-4" />
+                  <CopyIcon className="h-4 w-4" />
                 </IconButton>
               </InputAdornment>
             }

dashboard/src/features/orgs/projects/authentication/settings/components/MFASettings/MFASettings.tsx

@@ -6,7 +6,6 @@ import { SettingsContainer } from '@/components/layout/SettingsContainer';
 import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
 import { Input } from '@/components/ui/v2/Input';
 import {
-  GetAuthenticationSettingsDocument,
   useGetAuthenticationSettingsQuery,
   useUpdateConfigMutation,
 } from '@/generated/graphql';
@@ -29,18 +28,19 @@ const validationSchema = Yup.object({
 export type MFASettingsFormValues = Yup.InferType<typeof validationSchema>;
 
 export default function MFASettings() {
-  const { openDialog } = useDialog();
+  const { project } = useProject();
   const isPlatform = useIsPlatform();
+  const { openDialog } = useDialog();
   const { maintenanceActive } = useUI();
   const localMimirClient = useLocalMimirClient();
-  const { project } = useProject();
+
   const [updateConfig] = useUpdateConfigMutation({
-    refetchQueries: [GetAuthenticationSettingsDocument],
     ...(!isPlatform ? { client: localMimirClient } : {}),
   });
 
   const { data, loading, error } = useGetAuthenticationSettingsQuery({
     variables: { appId: project?.id },
+    fetchPolicy: 'cache-and-network',
     ...(!isPlatform ? { client: localMimirClient } : {}),
   });
 

dashboard/src/features/orgs/projects/authentication/settings/components/MagicLinkSettings/MagicLinkSettings.tsx

@@ -5,7 +5,6 @@ import { Form } from '@/components/form/Form';
 import { SettingsContainer } from '@/components/layout/SettingsContainer';
 import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
 import {
-  GetSignInMethodsDocument,
   useGetSignInMethodsQuery,
   useUpdateConfigMutation,
 } from '@/generated/graphql';
@@ -26,13 +25,13 @@ const validationSchema = Yup.object({
 export type MagicLinkFormValues = Yup.InferType<typeof validationSchema>;
 
 export default function MagicLinkSettings() {
+  const { project } = useProject();
   const { openDialog } = useDialog();
   const isPlatform = useIsPlatform();
   const { maintenanceActive } = useUI();
   const localMimirClient = useLocalMimirClient();
-  const { project } = useProject();
+
   const [updateConfig] = useUpdateConfigMutation({
-    refetchQueries: [GetSignInMethodsDocument],
     ...(!isPlatform ? { client: localMimirClient } : {}),
   });
 

dashboard/src/features/orgs/projects/authentication/settings/components/PostmarkSettings/PostmarkSettings.tsx

@@ -5,7 +5,6 @@ import { Form } from '@/components/form/Form';
 import { SettingsContainer } from '@/components/layout/SettingsContainer';
 import { Input } from '@/components/ui/v2/Input';
 import {
-  GetSmtpSettingsDocument,
   useGetSmtpSettingsQuery,
   useUpdateConfigMutation,
 } from '@/utils/__generated__/graphql';
@@ -28,21 +27,21 @@ const validationSchema = yup
 export type PostmarkFormValues = yup.InferType<typeof validationSchema>;
 
 export default function PostmarkSettings() {
+  const { project } = useProject();
   const { openDialog } = useDialog();
   const isPlatform = useIsPlatform();
   const { maintenanceActive } = useUI();
   const localMimirClient = useLocalMimirClient();
-  const { project } = useProject();
 
-  const { data } = useGetSmtpSettingsQuery({
+  const { data, refetch } = useGetSmtpSettingsQuery({
     variables: { appId: project?.id },
+    fetchPolicy: 'cache-and-network',
     ...(!isPlatform ? { client: localMimirClient } : {}),
   });
 
   const { sender, password } = data?.config?.provider?.smtp || {};
 
   const [updateConfig] = useUpdateConfigMutation({
-    refetchQueries: [GetSmtpSettingsDocument],
     ...(!isPlatform ? { client: localMimirClient } : {}),
   });
 
@@ -81,6 +80,8 @@ export default function PostmarkSettings() {
     await execPromiseWithErrorToast(
       async () => {
         await updateConfigPromise;
+        form.reset({ ...values });
+        await refetch();
 
         if (!isPlatform) {
           openDialog({

dashboard/src/features/orgs/projects/authentication/settings/components/SMSSettings/SMSSettings.tsx

@@ -9,7 +9,6 @@ import { Option } from '@/components/ui/v2/Option';
 import { Select } from '@/components/ui/v2/Select';
 import { Text } from '@/components/ui/v2/Text';
 import {
-  GetSignInMethodsDocument,
   useGetSignInMethodsQuery,
   useUpdateConfigMutation,
 } from '@/generated/graphql';
@@ -50,17 +49,17 @@ const validationSchema = Yup.object({
 export type SMSSettingsFormValues = Yup.InferType<typeof validationSchema>;
 
 export default function SMSSettings() {
+  const { project } = useProject();
   const { openDialog } = useDialog();
   const isPlatform = useIsPlatform();
   const { maintenanceActive } = useUI();
   const localMimirClient = useLocalMimirClient();
-  const { project } = useProject();
+
   const [updateConfig] = useUpdateConfigMutation({
-    refetchQueries: [GetSignInMethodsDocument],
     ...(!isPlatform ? { client: localMimirClient } : {}),
   });
 
-  const { data, error, loading } = useGetSignInMethodsQuery({
+  const { data, loading, error } = useGetSignInMethodsQuery({
     variables: { appId: project?.id },
     ...(!isPlatform ? { client: localMimirClient } : {}),
   });

dashboard/src/features/orgs/projects/authentication/settings/components/SMTPSettings/SMTPSettings.tsx

@@ -6,7 +6,6 @@ import { Form } from '@/components/form/Form';
 import { SettingsContainer } from '@/components/layout/SettingsContainer';
 import { Input } from '@/components/ui/v2/Input';
 import {
-  GetSmtpSettingsDocument,
   useGetSmtpSettingsQuery,
   useUpdateConfigMutation,
 } from '@/utils/__generated__/graphql';
@@ -38,14 +37,15 @@ const smtpValidationSchema = yup
 export type SmtpFormValues = yup.InferType<typeof smtpValidationSchema>;
 
 export default function SMTPSettings() {
-  const { maintenanceActive } = useUI();
+  const { project } = useProject();
   const { openDialog } = useDialog();
   const isPlatform = useIsPlatform();
+  const { maintenanceActive } = useUI();
   const localMimirClient = useLocalMimirClient();
-  const { project } = useProject();
 
-  const { data } = useGetSmtpSettingsQuery({
+  const { data, refetch } = useGetSmtpSettingsQuery({
     variables: { appId: project?.id },
+    fetchPolicy: 'cache-and-network',
     ...(!isPlatform ? { client: localMimirClient } : {}),
   });
 
@@ -83,7 +83,6 @@ export default function SMTPSettings() {
   } = form;
 
   const [updateConfig] = useUpdateConfigMutation({
-    refetchQueries: [GetSmtpSettingsDocument],
     ...(!isPlatform ? { client: localMimirClient } : {}),
   });
 
@@ -104,6 +103,8 @@ export default function SMTPSettings() {
     await execPromiseWithErrorToast(
       async () => {
         await updateConfigPromise;
+        form.reset({ ...values });
+        await refetch();
 
         if (!isPlatform) {
           openDialog({

dashboard/src/features/orgs/projects/authentication/settings/components/SessionSettings/SessionSettings.tsx

@@ -6,7 +6,6 @@ import { SettingsContainer } from '@/components/layout/SettingsContainer';
 import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
 import { Input } from '@/components/ui/v2/Input';
 import {
-  GetAuthenticationSettingsDocument,
   useGetAuthenticationSettingsQuery,
   useUpdateConfigMutation,
 } from '@/generated/graphql';
@@ -34,13 +33,13 @@ const validationSchema = Yup.object({
 export type SessionFormValues = Yup.InferType<typeof validationSchema>;
 
 export default function SessionSettings() {
-  const { openDialog } = useDialog();
+  const { project } = useProject();
   const isPlatform = useIsPlatform();
+  const { openDialog } = useDialog();
   const { maintenanceActive } = useUI();
   const localMimirClient = useLocalMimirClient();
-  const { project } = useProject();
+
   const [updateConfig] = useUpdateConfigMutation({
-    refetchQueries: [GetAuthenticationSettingsDocument],
     ...(!isPlatform ? { client: localMimirClient } : {}),
   });
 

dashboard/src/features/orgs/projects/authentication/settings/components/SpotifyProviderSettings/SpotifyProviderSettings.tsx

@@ -14,7 +14,6 @@ import {
   baseProviderValidationSchema,
 } from '@/features/authentication/settings/components/BaseProviderSettings';
 import {
-  GetSignInMethodsDocument,
   useGetSignInMethodsQuery,
   useUpdateConfigMutation,
 } from '@/generated/graphql';
@@ -31,13 +30,13 @@ import { useProject } from '@/features/orgs/projects/hooks/useProject';
 import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
 
 export default function SpotifyProviderSettings() {
+  const { project } = useProject();
   const { openDialog } = useDialog();
   const isPlatform = useIsPlatform();
   const { maintenanceActive } = useUI();
   const localMimirClient = useLocalMimirClient();
-  const { project } = useProject();
+
   const [updateConfig] = useUpdateConfigMutation({
-    refetchQueries: [GetSignInMethodsDocument],
     ...(!isPlatform ? { client: localMimirClient } : {}),
   });
 
@@ -185,7 +184,7 @@ export default function SpotifyProviderSettings() {
                     );
                   }}
                 >
-                  <CopyIcon className="w-4 h-4" />
+                  <CopyIcon className="h-4 w-4" />
                 </IconButton>
               </InputAdornment>
             }

dashboard/src/features/orgs/projects/authentication/settings/components/TwitchProviderSettings/TwitchProviderSettings.tsx

@@ -14,7 +14,6 @@ import {
   baseProviderValidationSchema,
 } from '@/features/orgs/projects/authentication/settings/components/BaseProviderSettings';
 import {
-  GetSignInMethodsDocument,
   useGetSignInMethodsQuery,
   useUpdateConfigMutation,
 } from '@/generated/graphql';
@@ -33,13 +32,13 @@ import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWith
 
 export default function TwitchProviderSettings() {
   const theme = useTheme();
+  const { project } = useProject();
   const { openDialog } = useDialog();
   const isPlatform = useIsPlatform();
-  const localMimirClient = useLocalMimirClient();
   const { maintenanceActive } = useUI();
-  const { project } = useProject();
+  const localMimirClient = useLocalMimirClient();
+
   const [updateConfig] = useUpdateConfigMutation({
-    refetchQueries: [GetSignInMethodsDocument],
     ...(!isPlatform ? { client: localMimirClient } : {}),
   });
 
@@ -191,7 +190,7 @@ export default function TwitchProviderSettings() {
                     );
                   }}
                 >
-                  <CopyIcon className="w-4 h-4" />
+                  <CopyIcon className="h-4 w-4" />
                 </IconButton>
               </InputAdornment>
             }

dashboard/src/features/orgs/projects/authentication/settings/components/TwitterProviderSettings/TwitterProviderSettings.tsx

@@ -9,7 +9,6 @@ import { CopyIcon } from '@/components/ui/v2/icons/CopyIcon';
 import { Input } from '@/components/ui/v2/Input';
 import { InputAdornment } from '@/components/ui/v2/InputAdornment';
 import {
-  GetSignInMethodsDocument,
   useGetSignInMethodsQuery,
   useUpdateConfigMutation,
 } from '@/generated/graphql';
@@ -45,13 +44,13 @@ const validationSchema = Yup.object({
 export type TwitterProviderFormValues = Yup.InferType<typeof validationSchema>;
 
 export default function TwitterProviderSettings() {
+  const { project } = useProject();
   const { openDialog } = useDialog();
   const isPlatform = useIsPlatform();
   const { maintenanceActive } = useUI();
   const localMimirClient = useLocalMimirClient();
-  const { project } = useProject();
+
   const [updateConfig] = useUpdateConfigMutation({
-    refetchQueries: [GetSignInMethodsDocument],
     ...(!isPlatform ? { client: localMimirClient } : {}),
   });
 
@@ -217,7 +216,7 @@ export default function TwitterProviderSettings() {
                     );
                   }}
                 >
-                  <CopyIcon className="w-4 h-4" />
+                  <CopyIcon className="h-4 w-4" />
                 </IconButton>
               </InputAdornment>
             }

dashboard/src/features/orgs/projects/authentication/settings/components/WebAuthnSettings/WebAuthnSettings.tsx

@@ -5,7 +5,6 @@ import { Form } from '@/components/form/Form';
 import { SettingsContainer } from '@/components/layout/SettingsContainer';
 import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
 import {
-  GetSignInMethodsDocument,
   useGetSignInMethodsQuery,
   useUpdateConfigMutation,
 } from '@/generated/graphql';
@@ -26,13 +25,13 @@ const validationSchema = Yup.object({
 export type WebAuthnFormValues = Yup.InferType<typeof validationSchema>;
 
 export default function WebAuthnSettings() {
+  const { project } = useProject();
   const { openDialog } = useDialog();
   const isPlatform = useIsPlatform();
-  const localMimirClient = useLocalMimirClient();
   const { maintenanceActive } = useUI();
-  const { project } = useProject();
+  const localMimirClient = useLocalMimirClient();
+
   const [updateConfig] = useUpdateConfigMutation({
-    refetchQueries: [GetSignInMethodsDocument],
     ...(!isPlatform ? { client: localMimirClient } : {}),
   });
 

dashboard/src/features/orgs/projects/authentication/settings/components/WindowsLiveProviderSettings/WindowsLiveProviderSettings.tsx

@@ -14,7 +14,6 @@ import {
   baseProviderValidationSchema,
 } from '@/features/orgs/projects/authentication/settings/components/BaseProviderSettings';
 import {
-  GetSignInMethodsDocument,
   useGetSignInMethodsQuery,
   useUpdateConfigMutation,
 } from '@/generated/graphql';
@@ -31,13 +30,13 @@ import { useProject } from '@/features/orgs/projects/hooks/useProject';
 import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
 
 export default function WindowsLiveProviderSettings() {
+  const { project } = useProject();
   const { openDialog } = useDialog();
   const isPlatform = useIsPlatform();
   const { maintenanceActive } = useUI();
   const localMimirClient = useLocalMimirClient();
-  const { project } = useProject();
+
   const [updateConfig] = useUpdateConfigMutation({
-    refetchQueries: [GetSignInMethodsDocument],
     ...(!isPlatform ? { client: localMimirClient } : {}),
   });
 
@@ -183,7 +182,7 @@ export default function WindowsLiveProviderSettings() {
                     );
                   }}
                 >
-                  <CopyIcon className="w-4 h-4" />
+                  <CopyIcon className="h-4 w-4" />
                 </IconButton>
               </InputAdornment>
             }

dashboard/src/features/orgs/projects/authentication/settings/components/WorkOsProviderSettings/WorkOsProviderSettings.tsx

@@ -15,7 +15,6 @@ import { useLocalMimirClient } from '@/features/orgs/projects/hooks/useLocalMimi
 import { useProject } from '@/features/orgs/projects/hooks/useProject';
 import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
 import {
-  GetSignInMethodsDocument,
   useGetSignInMethodsQuery,
   useUpdateConfigMutation,
 } from '@/generated/graphql';
@@ -57,13 +56,13 @@ const validationSchema = Yup.object({
 export type WorkOsProviderFormValues = Yup.InferType<typeof validationSchema>;
 
 export default function WorkOsProviderSettings() {
+  const { project } = useProject();
   const { openDialog } = useDialog();
   const isPlatform = useIsPlatform();
   const { maintenanceActive } = useUI();
   const localMimirClient = useLocalMimirClient();
-  const { project } = useProject();
+
   const [updateConfig] = useUpdateConfigMutation({
-    refetchQueries: [GetSignInMethodsDocument],
     ...(!isPlatform ? { client: localMimirClient } : {}),
   });
 
@@ -244,7 +243,7 @@ export default function WorkOsProviderSettings() {
                     );
                   }}
                 >
-                  <CopyIcon className="w-4 h-4" />
+                  <CopyIcon className="h-4 w-4" />
                 </IconButton>
               </InputAdornment>
             }

dashboard/src/features/orgs/projects/authentication/settings/gql/getAuthenticationSettings.gql

@@ -15,6 +15,7 @@ query GetAuthenticationSettings($appId: uuid!) {
       }
       signUp {
         enabled
+        disableNewUsers
       }
       session {
         accessToken {

dashboard/src/features/orgs/projects/authentication/users/components/EditUserPasswordForm/EditUserPasswordForm.tsx

@@ -3,10 +3,10 @@ import { Form } from '@/components/form/Form';
 import { Alert } from '@/components/ui/v2/Alert';
 import { Button } from '@/components/ui/v2/Button';
 import { Input } from '@/components/ui/v2/Input';
-import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
-import { useRemoteApplicationGQLClient } from '@/hooks/useRemoteApplicationGQLClient';
+import { useRemoteApplicationGQLClient } from '@/features/orgs/hooks/useRemoteApplicationGQLClient';
+import { useProject } from '@/features/orgs/projects/hooks/useProject';
+import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
 import type { DialogFormProps } from '@/types/common';
-import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import type { RemoteAppGetUsersQuery } from '@/utils/__generated__/graphql';
 import {
   useGetSignInMethodsQuery,
@@ -38,10 +38,10 @@ export default function EditUserPasswordForm({
     client: remoteProjectGQLClient,
   });
   const { closeDialog } = useDialog();
-  const { currentProject } = useCurrentWorkspaceAndProject();
+  const { project } = useProject();
   const { data } = useGetSignInMethodsQuery({
-    variables: { appId: currentProject?.id },
-    skip: !currentProject?.id,
+    variables: { appId: project?.id },
+    skip: !project?.id,
   });
 
   const passwordMinLength =

dashboard/src/features/orgs/projects/common/components/ApplicationPaused/ApplicationPaused.tsx

@@ -1,17 +1,11 @@
 import { Container } from '@/components/layout/Container';
 import { Modal } from '@/components/ui/v1/Modal';
-import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
-import { Box } from '@/components/ui/v2/Box';
 import { Button } from '@/components/ui/v2/Button';
-import { Text } from '@/components/ui/v2/Text';
 import { TransferProjectDialog } from '@/features/orgs/components/common/TransferProjectDialog';
 import { ApplicationInfo } from '@/features/orgs/projects/common/components/ApplicationInfo';
-import { ApplicationLockedReason } from '@/features/orgs/projects/common/components/ApplicationLockedReason';
-import { ApplicationPausedReason } from '@/features/orgs/projects/common/components/ApplicationPausedReason';
-import { ApplicationPausedSymbol } from '@/features/orgs/projects/common/components/ApplicationPausedSymbol';
+import { ApplicationPausedBanner } from '@/features/orgs/projects/common/components/ApplicationPausedBanner';
 import { RemoveApplicationModal } from '@/features/orgs/projects/common/components/RemoveApplicationModal';
 import { StagingMetadata } from '@/features/orgs/projects/common/components/StagingMetadata';
-import { useAppPausedReason } from '@/features/orgs/projects/common/hooks/useAppPausedReason';
 import { useIsCurrentUserOwner } from '@/features/orgs/projects/common/hooks/useIsCurrentUserOwner';
 import { useCurrentOrg } from '@/features/orgs/projects/hooks/useCurrentOrg';
 import { useProject } from '@/features/orgs/projects/hooks/useProject';
@@ -19,46 +13,19 @@ import {
   GetAllWorkspacesAndProjectsDocument,
   useUnpauseApplicationMutation,
 } from '@/generated/graphql';
-import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import { useState } from 'react';
 
 export default function ApplicationPaused() {
   const { org } = useCurrentOrg();
-  const { project, refetch: refetchProject } = useProject();
+  const { project } = useProject();
   const isOwner = useIsCurrentUserOwner();
   const [transferProjectDialogOpen, setTransferProjectDialogOpen] =
     useState(false);
 
   const [showDeletingModal, setShowDeletingModal] = useState(false);
-  const [unpauseApplication, { loading: changingApplicationStateLoading }] =
-    useUnpauseApplicationMutation({
-      refetchQueries: [{ query: GetAllWorkspacesAndProjectsDocument }],
-    });
-
-  const { isLocked, lockedReason, freeAndLiveProjectsNumberExceeded, loading } =
-    useAppPausedReason();
-
-  async function handleTriggerUnpausing() {
-    await execPromiseWithErrorToast(
-      async () => {
-        await unpauseApplication({ variables: { appId: project.id } });
-        await new Promise((resolve) => {
-          setTimeout(resolve, 1000);
-        });
-        await refetchProject();
-      },
-      {
-        loadingMessage: 'Starting the project...',
-        successMessage: 'The project has been started successfully.',
-        errorMessage:
-          'An error occurred while waking up the project. Please try again.',
-      },
-    );
-  }
-
-  if (loading) {
-    return <ActivityIndicator label="Loading user data..." delay={1000} />;
-  }
+  useUnpauseApplicationMutation({
+    refetchQueries: [{ query: GetAllWorkspacesAndProjectsDocument }],
+  });
 
   return (
     <>
@@ -77,65 +44,38 @@ export default function ApplicationPaused() {
       </Modal>
 
       <Container className="mx-auto grid max-w-lg grid-flow-row gap-6 text-center">
-        <div className="mx-auto flex w-centImage flex-col text-center">
-          <ApplicationPausedSymbol isLocked={isLocked} />
-        </div>
-
-        <Box className="grid grid-flow-row gap-6">
-          <Text variant="h3" component="h1">
-            {project.name} is {isLocked ? 'locked' : 'paused'}
-          </Text>
-          {isLocked ? (
-            <ApplicationLockedReason reason={lockedReason} />
-          ) : (
+        <div className="mx-auto flex w-full max-w-xs flex-col gap-4">
+          <ApplicationPausedBanner
+            alertClassName="items-center"
+            textContainerClassName="items-center text-center"
+          />
+          {org && (
             <>
-              <ApplicationPausedReason
-                freeAndLiveProjectsNumberExceeded={
-                  freeAndLiveProjectsNumberExceeded
-                }
-              />
-              <div className="grid grid-flow-row gap-4">
-                {org && (
-                  <>
-                    <Button
-                      className="mx-auto w-full max-w-xs"
-                      onClick={() => setTransferProjectDialogOpen(true)}
-                    >
-                      Transfer
-                    </Button>
-                    <TransferProjectDialog
-                      open={transferProjectDialogOpen}
-                      setOpen={setTransferProjectDialogOpen}
-                    />
-                  </>
-                )}
-                <Button
-                  variant="borderless"
-                  className="mx-auto w-full max-w-xs"
-                  loading={changingApplicationStateLoading}
-                  disabled={
-                    changingApplicationStateLoading ||
-                    freeAndLiveProjectsNumberExceeded
-                  }
-                  onClick={handleTriggerUnpausing}
-                >
-                  Wake Up
-                </Button>
+              <Button
+                className="w-full"
+                onClick={() => setTransferProjectDialogOpen(true)}
+              >
+                Transfer
+              </Button>
 
-                {isOwner && (
-                  <Button
-                    color="error"
-                    variant="outlined"
-                    className="mx-auto w-full max-w-xs"
-                    onClick={() => setShowDeletingModal(true)}
-                  >
-                    Delete Project
-                  </Button>
-                )}
-              </div>
+              <TransferProjectDialog
+                open={transferProjectDialogOpen}
+                setOpen={setTransferProjectDialogOpen}
+              />
             </>
           )}
-        </Box>
+
+          {isOwner && (
+            <Button
+              color="error"
+              variant="outlined"
+              className="mx-auto w-full max-w-xs"
+              onClick={() => setShowDeletingModal(true)}
+            >
+              Delete Project
+            </Button>
+          )}
+        </div>
 
         <StagingMetadata>
           <ApplicationInfo />

dashboard/src/features/orgs/projects/common/components/ApplicationPausedBanner/ApplicationPausedBanner.tsx

@@ -0,0 +1,111 @@
+import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
+import { Alert } from '@/components/ui/v2/Alert';
+import { Button } from '@/components/ui/v3/button';
+import { useAppPausedReason } from '@/features/orgs/projects/common/hooks/useAppPausedReason';
+import { useAppState } from '@/features/orgs/projects/common/hooks/useAppState';
+import { useCurrentOrg } from '@/features/orgs/projects/hooks/useCurrentOrg';
+import { useProject } from '@/features/orgs/projects/hooks/useProject';
+import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
+import { cn } from '@/lib/utils';
+import { ApplicationStatus } from '@/types/application';
+import { useUnpauseApplicationMutation } from '@/utils/__generated__/graphql';
+import Image from 'next/image';
+import { useCallback } from 'react';
+
+export default function ApplicationPausedBanner({
+  alertClassName,
+  textContainerClassName,
+  wakeUpButtonClassName,
+}: {
+  alertClassName?: string;
+  textContainerClassName?: string;
+  wakeUpButtonClassName?: string;
+}) {
+  const { org } = useCurrentOrg();
+  const { state } = useAppState();
+  const { freeAndLiveProjectsNumberExceeded } = useAppPausedReason();
+  const { project, refetch: refetchProject } = useProject();
+
+  const [unpauseApplication, { loading: changingApplicationStateLoading }] =
+    useUnpauseApplicationMutation({
+      variables: {
+        appId: project?.id,
+      },
+    });
+
+  const handleTriggerUnpausing = useCallback(async () => {
+    await execPromiseWithErrorToast(
+      async () => {
+        await unpauseApplication({ variables: { appId: project.id } });
+        await new Promise((resolve) => {
+          setTimeout(resolve, 1000);
+        });
+        await refetchProject();
+      },
+      {
+        loadingMessage: 'Starting the project...',
+        successMessage: 'The project has been started successfully.',
+        errorMessage:
+          'An error occurred while waking up the project. Please try again.',
+      },
+    );
+  }, [unpauseApplication, project?.id, refetchProject]);
+
+  return (
+    <Alert
+      severity="warning"
+      className={cn(
+        'flex w-full flex-col items-start justify-between gap-4 p-4',
+        alertClassName,
+      )}
+    >
+      <Image
+        src="/assets/PausedApp.svg"
+        className="mt-1"
+        alt="Closed Eye"
+        width={52}
+        height={40}
+      />
+
+      <div
+        className={cn(
+          'flex h-full w-full flex-col gap-2',
+          textContainerClassName,
+        )}
+      >
+        <p className="w-full">
+          Project <b>{project?.name}</b> is paused.
+        </p>
+        <p className="w-full">
+          Wake up your project to make it accessible again. Once reactivated,
+          all features will be fully functional. Go to settings to manage your
+          project.
+        </p>
+        {org?.plan?.isFree && (
+          <p>
+            Projects under your Personal Organization will stop responding to
+            API calls after 7 days of inactivity, so consider transferring the
+            project to a <b>Pro Organization</b> to avoid auto-sleep.
+          </p>
+        )}
+        {freeAndLiveProjectsNumberExceeded && (
+          <p>
+            Additionally, only 1 free project can be active at any given time,
+            so please pause your current active free project before unpausing
+            another.
+          </p>
+        )}
+      </div>
+      {state === ApplicationStatus.Paused && (
+        <Button
+          variant="outline"
+          className={cn('w-full', wakeUpButtonClassName)}
+          disabled={changingApplicationStateLoading}
+          onClick={handleTriggerUnpausing}
+        >
+          {changingApplicationStateLoading ? <ActivityIndicator /> : 'Wake up'}
+        </Button>
+      )}
+    </Alert>
+  );
+}

dashboard/src/features/orgs/projects/common/components/ApplicationPausedBanner/index.ts

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

dashboard/src/features/orgs/projects/common/components/ApplicationPausedReason/ApplicationPausedReason.tsx

@@ -1,36 +0,0 @@
-import { Alert } from '@/components/ui/v2/Alert';
-import { useCurrentOrg } from '@/features/orgs/projects/hooks/useCurrentOrg';
-
-interface ApplicationPausedReasonProps {
-  freeAndLiveProjectsNumberExceeded?: boolean;
-}
-
-export default function ApplicationPausedReason({
-  freeAndLiveProjectsNumberExceeded,
-}: ApplicationPausedReasonProps) {
-  const { org } = useCurrentOrg();
-
-  return (
-    <Alert
-      severity="warning"
-      className="flex flex-col w-full max-w-xs gap-4 p-6 mx-auto text-left"
-    >
-      {org?.plan?.isFree ? (
-        <p>
-          Projects under your Personal Organization will stop responding to API
-          calls after 7 days of inactivity, so consider transferring the project
-          to a <b>Pro Organization</b> to avoid auto-sleep.
-        </p>
-      ) : (
-        <p className="text-center">Your project is Paused.</p>
-      )}
-      {freeAndLiveProjectsNumberExceeded && (
-        <p className="text-center">
-          Additionally, only 1 free project can be active at any given time, so
-          please pause your current active free project before unpausing
-          another.
-        </p>
-      )}
-    </Alert>
-  );
-}