chore: update versions (#2992)

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


# Releases
## @nhost/dashboard@2.2.1

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

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

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

dashboard/.env.example

@@ -24,3 +24,4 @@ NEXT_PUBLIC_ZENDESK_USER_EMAIL=
 
 CODEGEN_GRAPHQL_URL=https://local.graphql.nhost.run/v1
 CODEGEN_HASURA_ADMIN_SECRET=nhost-admin-secret
+NEXT_PUBLIC_TURNSTILE_SITE_KEY=FIXME

dashboard/.eslintrc.js

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

dashboard/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @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

dashboard/components.json

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

dashboard/e2e/run/run.test.ts

@@ -39,22 +39,6 @@ test('should create and delete a run service', async () => {
   await page.getByPlaceholder(/service name/i).click();
   await page.getByPlaceholder(/service name/i).fill('test');
 
-  const sliderRail = page.locator(
-    '.space-y-4 > .MuiSlider-root > .MuiSlider-rail',
-  );
-
-  // Get the bounding box of the slider rail to determine where to click
-  const box = await sliderRail.boundingBox();
-
-  if (box) {
-    // Calculate the position to click (start of the rail)
-    const x = box.x + 1; // A little offset to ensure click inside the rail
-    const y = box.y + box.height / 2; // Middle of the rail height-wise
-
-    // Perform the click
-    await page.mouse.click(x, y);
-  }
-
   await page.getByRole('button', { name: /create/i }).click();
 
   await expect(

dashboard/next.config.js

@@ -19,7 +19,7 @@ const cspHeader = `
 `;
 
 module.exports = withBundleAnalyzer({
-  reactStrictMode: true,
+  reactStrictMode: false,
   swcMinify: false,
   output: 'standalone',
   experimental: {

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/dashboard",
-  "version": "1.28.2",
+  "version": "2.2.1",
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -27,20 +27,35 @@
     "@emotion/react": "^11.11.4",
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.11.5",
-    "@fontsource/inter": "^5.0.17",
-    "@fontsource/roboto-mono": "^5.0.17",
+    "@fontsource/inter": "^5.0.21",
+    "@fontsource/roboto-mono": "^5.0.20",
     "@graphiql/react": "^0.22.3",
     "@graphiql/toolkit": "^0.9.1",
     "@headlessui/react": "^1.7.18",
     "@heroicons/react": "^1.0.6",
-    "@hookform/resolvers": "^3.3.4",
+    "@hookform/resolvers": "^3.9.0",
     "@iarna/toml": "^2.2.5",
+    "@marsidev/react-turnstile": "^1.0.2",
     "@mui/base": "5.0.0-beta.31",
     "@mui/material": "^5.15.14",
     "@mui/system": "^5.15.14",
     "@mui/x-date-pickers": "^5.0.20",
     "@nhost/nextjs": "workspace:*",
     "@nhost/react-apollo": "workspace:*",
+    "@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",
+    "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-hover-card": "^1.1.2",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-popover": "^1.1.1",
+    "@radix-ui/react-progress": "^1.1.0",
+    "@radix-ui/react-radio-group": "^1.2.0",
+    "@radix-ui/react-select": "^2.1.2",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.2",
     "@segment/snippet": "^4.16.2",
     "@stripe/react-stripe-js": "^2.6.2",
     "@stripe/stripe-js": "^1.54.2",
@@ -54,8 +69,11 @@
     "@uiw/react-codemirror": "^4.21.25",
     "analytics-node": "^6.2.0",
     "bcryptjs": "^2.4.3",
+    "class-variance-authority": "^0.7.0",
     "clsx": "^1.2.1",
+    "cmdk": "1.0.0",
     "date-fns": "^2.30.0",
+    "dequal": "^2.0.3",
     "framer-motion": "^10.18.0",
     "generate-password": "^1.7.1",
     "graphiql": "^3.3.1",
@@ -65,15 +83,19 @@
     "graphql-ws": "^5.16.0",
     "just-kebab-case": "^4.2.0",
     "lodash.debounce": "^4.0.8",
+    "lucide-react": "^0.416.0",
     "next": "^14.2.10",
+    "next-nprogress-bar": "^2.3.13",
     "next-seo": "^6.5.0",
+    "next-themes": "^0.3.0",
     "node-pg-format": "^1.3.5",
     "pluralize": "^8.0.0",
     "react": "18.2.0",
     "react-children-utilities": "^2.10.0",
+    "react-complex-tree": "^2.4.5",
     "react-dom": "18.2.0",
     "react-error-boundary": "^4.0.13",
-    "react-hook-form": "^7.51.2",
+    "react-hook-form": "^7.53.0",
     "react-hot-toast": "^2.4.1",
     "react-intersection-observer": "^9.8.1",
     "react-is": "18.2.0",
@@ -90,10 +112,13 @@
     "slugify": "^1.6.6",
     "stripe": "^10.17.0",
     "tailwind-merge": "^1.14.0",
+    "tailwindcss-animate": "^1.0.7",
     "utility-types": "^3.11.0",
+    "uuid": "^9.0.1",
     "validator": "^13.11.0",
     "yup": "^1.4.0",
-    "yup-password": "^0.2.2"
+    "yup-password": "^0.2.2",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@babel/core": "^7.24.3",
@@ -129,6 +154,7 @@
     "@types/react-table": "^7.7.20",
     "@types/shell-quote": "^1.7.5",
     "@types/testing-library__jest-dom": "^5.14.9",
+    "@types/uuid": "^9.0.8",
     "@types/validator": "^13.11.9",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
@@ -155,14 +181,14 @@
     "msw-storybook-addon": "^1.10.0",
     "node-fetch": "^3.3.2",
     "postcss": "^8.4.38",
-    "prettier": "^2.8.8",
-    "prettier-plugin-organize-imports": "^3.2.4",
-    "prettier-plugin-tailwindcss": "^0.4.1",
+    "prettier": "^3.3.3",
+    "prettier-plugin-organize-imports": "^4.1.0",
+    "prettier-plugin-tailwindcss": "^0.6.6",
     "react-date-fns-hooks": "^0.9.4",
     "require-from-string": "^2.0.2",
     "snake-case": "^3.0.4",
     "storybook-addon-next-router": "^4.0.2",
-    "tailwindcss": "^3.4.3",
+    "tailwindcss": "^3.4.12",
     "ts-node": "^10.9.2",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "vite": "^5.4.6",

dashboard/prettier.config.js

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

dashboard/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,10 +289,11 @@ function DialogProvider({ children }: PropsWithChildren<unknown>) {
         open={drawerOpen}
         onClose={closeDrawerWithDirtyGuard}
         SlideProps={{ onExited: clearDrawerContent, unmountOnExit: false }}
+        className="z-40"
         PaperProps={{
           ...drawerProps?.PaperProps,
           className: twMerge(
-            'max-w-2.5xl w-full',
+            'max-w-4xl w-full',
             drawerProps?.PaperProps?.className,
           ),
         }}

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

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

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

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

dashboard/src/components/common/useMediaQuery/useMediaQuery.tsx

@@ -0,0 +1,40 @@
+import { useEffect, useState } from 'react';
+import resolveConfig from 'tailwindcss/resolveConfig';
+// eslint-disable-next-line no-restricted-imports
+import tailwindConfig from '../../../../tailwind.config';
+
+const fullConfig = resolveConfig(tailwindConfig);
+
+const {
+  theme: { screens },
+} = fullConfig;
+
+const useMediaQuery = (query: keyof typeof screens): boolean => {
+  const [isMatch, setMatch] = useState<boolean>(false);
+
+  useEffect(() => {
+    // Ensure this runs only on the client side
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    const mediaQuery = `(min-width: ${screens[query]})`;
+    const matchQueryList = window.matchMedia(mediaQuery);
+
+    const onChange = (e: MediaQueryListEvent) => setMatch(e.matches);
+
+    // Set initial value
+    setMatch(matchQueryList.matches);
+
+    // Listen for changes
+    matchQueryList.addEventListener('change', onChange);
+
+    // Clean up the listener on unmount
+    // eslint-disable-next-line consistent-return
+    return () => matchQueryList.removeEventListener('change', onChange);
+  }, [query]);
+
+  return isMatch;
+};
+
+export default useMediaQuery;

dashboard/src/components/layout/AuthenticatedLayout/AuthenticatedLayout.tsx

@@ -3,19 +3,30 @@ import type { BaseLayoutProps } from '@/components/layout/BaseLayout';
 import { BaseLayout } from '@/components/layout/BaseLayout';
 import { Container } from '@/components/layout/Container';
 import { Header } from '@/components/layout/Header';
+import { MainNav } from '@/components/layout/MainNav';
+import { useTreeNavState } from '@/components/layout/MainNav/TreeNavStateContext';
 import { HighlightedText } from '@/components/presentational/HighlightedText';
 import { RetryableErrorBoundary } from '@/components/presentational/RetryableErrorBoundary';
 import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
 import { Link } from '@/components/ui/v2/Link';
 import { Text } from '@/components/ui/v2/Text';
-import { useIsHealthy } from '@/features/projects/common/hooks/useIsHealthy';
 import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
 import { useAuthenticationStatus } from '@nhost/nextjs';
+
+import { useMediaQuery } from '@/components/common/useMediaQuery';
+import PinnedMainNav from '@/components/layout/MainNav/PinnedMainNav';
+import { OrgStatus } from '@/features/orgs/components/OrgStatus';
+import { useIsHealthy } from '@/features/orgs/projects/common/hooks/useIsHealthy';
+import { useNotFoundRedirect } from '@/features/projects/common/hooks/useNotFoundRedirect';
+import { cn } from '@/lib/utils';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
-import type { DetailedHTMLProps, HTMLProps } from 'react';
-import { useEffect } from 'react';
-import { twMerge } from 'tailwind-merge';
+import {
+  useEffect,
+  useState,
+  type DetailedHTMLProps,
+  type HTMLProps,
+} from 'react';
 
 export interface AuthenticatedLayoutProps extends BaseLayoutProps {
   /**
@@ -29,16 +40,18 @@ export interface AuthenticatedLayoutProps extends BaseLayoutProps {
 
 export default function AuthenticatedLayout({
   children,
-  contentContainerProps: {
-    className: contentContainerClassName,
-    ...contentContainerProps
-  } = {},
   ...props
 }: AuthenticatedLayoutProps) {
   const router = useRouter();
   const isPlatform = useIsPlatform();
+  const isMdOrLarger = useMediaQuery('md');
+
   const { isAuthenticated, isLoading } = useAuthenticationStatus();
   const isHealthy = useIsHealthy();
+  const [mainNavContainer, setMainNavContainer] = useState(null);
+  const { mainNavPinned } = useTreeNavState();
+
+  useNotFoundRedirect();
 
   useEffect(() => {
     if (!isPlatform || isLoading || isAuthenticated) {
@@ -54,13 +67,13 @@ export default function AuthenticatedLayout({
     }
 
     if (
-      router.query.workspaceSlug === 'local' &&
-      router.query.appSlug === 'local'
+      router.query.orgSlug === 'local' &&
+      router.query.appSubdomain === 'local'
     ) {
       return;
     }
 
-    router.push('/local/local');
+    router.push('/orgs/local/projects/local');
   }, [isPlatform, router]);
 
   if (isPlatform && isLoading) {
@@ -116,21 +129,40 @@ export default function AuthenticatedLayout({
 
   return (
     <BaseLayout className="flex h-full flex-col" {...props}>
-      <Header className="flex max-h-[59px] flex-auto" />
+      <Header className="flex py-1" />
 
-      <InviteNotification />
+      <div
+        className="relative flex h-full flex-row overflow-hidden"
+        ref={setMainNavContainer}
+      >
+        {mainNavPinned && isMdOrLarger && <PinnedMainNav />}
 
-      <RetryableErrorBoundary errorMessageProps={{ className: 'pt-20' }}>
         <div
-          className={twMerge(
-            'relative flex flex-auto overflow-x-hidden',
-            contentContainerClassName,
+          className={cn(
+            'relative flex h-full w-full flex-row bg-accent',
+            mainNavPinned && isMdOrLarger ? 'overflow-x-auto' : '',
           )}
-          {...contentContainerProps}
         >
-          {children}
+          {(!mainNavPinned || !isMdOrLarger) && (
+            <div className="flex h-full w-6 justify-center">
+              <MainNav container={mainNavContainer} />
+            </div>
+          )}
+
+          <RetryableErrorBoundary
+            errorMessageProps={{
+              className: 'flex flex-col items-center',
+            }}
+          >
+            <div className="flex h-full w-full flex-col overflow-auto">
+              <OrgStatus />
+              {children}
+            </div>
+          </RetryableErrorBoundary>
+
+          <InviteNotification />
         </div>
-      </RetryableErrorBoundary>
+      </div>
     </BaseLayout>
   );
 }

dashboard/src/components/layout/Container/Container.tsx

@@ -16,9 +16,9 @@ export default function Container({
   ...props
 }: ContainerProps) {
   return (
-    <Box className={twMerge('mx-auto w-full', rootClassName)}>
+    <Box className={twMerge('mx-auto w-full', rootClassName)} {...props}>
       <Box
-        className={twMerge('mx-auto max-w-7xl px-5 pt-6 pb-20', className)}
+        className={twMerge('mx-auto max-w-7xl px-5 py-4', className)}
         {...props}
       >
         {children}

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

@@ -0,0 +1,109 @@
+import { Button } from '@/components/ui/v3/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/v3/command';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/v3/popover';
+import { cn } from '@/lib/utils';
+import { Check, ChevronsUpDown } from 'lucide-react';
+import { useState, type ReactNode } from 'react';
+
+type BreadCrumbComboBoxItem<T> = {
+  label: string | ReactNode;
+  value: string | T;
+};
+
+interface BreadCrumbComboBoxProps<T> {
+  selectedValue?: T;
+  options: BreadCrumbComboBoxItem<T>[];
+  renderItem?: (item: T) => ReactNode;
+  onChange?: (item: BreadCrumbComboBoxItem<T>) => void;
+  filter?: (value: string, search: string) => number;
+}
+
+export default function BreadCrumbComboBox<T>({
+  selectedValue,
+  options,
+  renderItem,
+  onChange,
+  filter,
+}: BreadCrumbComboBoxProps<T>) {
+  const [open, setOpen] = useState(false);
+  const [selectedItem, setSelectedItem] =
+    useState<BreadCrumbComboBoxItem<T> | null>(
+      options.find((option) => option.value === selectedValue) || null,
+    );
+
+  const renderSelectedItem = (item: BreadCrumbComboBoxItem<T>) => {
+    if (typeof item.value === 'string') {
+      return typeof item.label === 'string' ? (
+        <span className="text-foreground">{item.label}</span>
+      ) : (
+        item.label
+      );
+    }
+    return renderItem ? renderItem(item.value) : null;
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="justify-start text-foreground"
+        >
+          <div className="flex flex-row items-center justify-center gap-1">
+            {selectedItem && renderSelectedItem(selectedItem)}
+            <ChevronsUpDown className="h-5 w-5 text-muted-foreground" />
+          </div>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="p-0" side="bottom" align="start">
+        <Command filter={filter}>
+          <CommandInput placeholder="Search..." autoFocus />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup>
+              {options.map((option, index) => (
+                <CommandItem
+                  key={`${
+                    typeof option.value === 'string' ? option.value : index
+                  }`}
+                  value={
+                    typeof option.value === 'string' ? option.value : `${index}`
+                  }
+                  onSelect={() => {
+                    setSelectedItem(option);
+                    setOpen(false);
+                    onChange?.(option);
+                  }}
+                >
+                  <Check
+                    className={cn(
+                      'mr-2 h-4 w-4',
+                      selectedItem?.value === option.value
+                        ? 'opacity-100'
+                        : 'opacity-0',
+                    )}
+                  />
+                  {typeof option.value === 'string'
+                    ? option.label
+                    : renderItem && renderItem(option.value)}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}

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

@@ -0,0 +1,91 @@
+import { Slash } from 'lucide-react';
+import { useMemo } from 'react';
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbSeparator,
+} from '@/components/ui/v3/breadcrumb';
+import { useRouter } from 'next/router';
+import OrgPagesComboBox from './OrgPagesComboBox';
+import OrgsComboBox from './OrgsComboBox';
+import ProjectPagesComboBox from './ProjectPagesComboBox';
+import ProjectsComboBox from './ProjectsComboBox';
+import ProjectSettingsPagesComboBox from './ProjectSettingsPagesComboBox';
+
+export default function BreadcrumbNav() {
+  const { query, asPath, route } = useRouter();
+
+  // Extract orgSlug and appSubdomain from router.query
+  const { appSubdomain, workspaceSlug } = query;
+
+  // Extract path segments from the URL
+  const pathSegments = useMemo(() => asPath.split('/'), [asPath]);
+
+  // Identify project and settings pages based on the URL pattern
+  const projectPage = pathSegments[3] || null;
+  const isSettingsPage = pathSegments[5] === 'settings';
+
+  const showBreadcrumbs =
+    !workspaceSlug && !['/', '/orgs/verify'].includes(route);
+
+  return (
+    <Breadcrumb className="mt-2 flex w-full flex-row flex-nowrap overflow-x-auto lg:mt-0 lg:overflow-visible">
+      <BreadcrumbList className="flex-nowrap">
+        <BreadcrumbSeparator>
+          <Slash strokeWidth={3.5} className="text-muted-foreground/50" />
+        </BreadcrumbSeparator>
+
+        <BreadcrumbItem>
+          <OrgsComboBox />
+        </BreadcrumbItem>
+
+        {showBreadcrumbs && (
+          <>
+            <BreadcrumbSeparator>
+              <Slash strokeWidth={3.5} className="text-muted-foreground/50" />
+            </BreadcrumbSeparator>
+
+            {projectPage && <OrgPagesComboBox />}
+          </>
+        )}
+
+        {showBreadcrumbs && appSubdomain && (
+          <>
+            <BreadcrumbSeparator>
+              <Slash strokeWidth={3.5} className="text-muted-foreground/50" />
+            </BreadcrumbSeparator>
+
+            <BreadcrumbItem>
+              <ProjectsComboBox />
+            </BreadcrumbItem>
+
+            <BreadcrumbSeparator>
+              <Slash strokeWidth={3.5} className="text-muted-foreground/50" />
+            </BreadcrumbSeparator>
+
+            <BreadcrumbItem>
+              <ProjectPagesComboBox />
+            </BreadcrumbItem>
+
+            {isSettingsPage && (
+              <>
+                <BreadcrumbSeparator>
+                  <Slash
+                    strokeWidth={3.5}
+                    className="text-muted-foreground/50"
+                  />
+                </BreadcrumbSeparator>
+
+                <BreadcrumbItem>
+                  <ProjectSettingsPagesComboBox />
+                </BreadcrumbItem>
+              </>
+            )}
+          </>
+        )}
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+}

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

@@ -1,24 +1,25 @@
 import { useDialog } from '@/components/common/DialogProvider';
 import { NavLink } from '@/components/common/NavLink';
 import { AccountMenu } from '@/components/layout/AccountMenu';
-import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
 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 { Chip } from '@/components/ui/v2/Chip';
 import { GraphiteIcon } from '@/components/ui/v2/icons/GraphiteIcon';
-import { DevAssistant } from '@/features/ai/DevAssistant';
+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 { ApplicationStatus } from '@/types/application';
 import { getToastStyleProps } from '@/utils/constants/settings';
-import { useRouter } from 'next/router';
 import type { DetailedHTMLProps, HTMLProps, PropsWithoutRef } from 'react';
-import { useEffect } from 'react';
 import { toast } from 'react-hot-toast';
 import { twMerge } from 'tailwind-merge';
+import BreadcrumbNav from './BreadcrumbNav';
 
 export interface HeaderProps
   extends PropsWithoutRef<
@@ -26,39 +27,15 @@ export interface HeaderProps
   > {}
 
 export default function Header({ className, ...props }: HeaderProps) {
-  const router = useRouter();
-
   const isPlatform = useIsPlatform();
-
   const { openDrawer } = useDialog();
-
-  const { currentProject, refetch: refetchProject } =
-    useCurrentWorkspaceAndProject();
-
-  const isProjectUpdating =
-    currentProject?.appStates[0]?.stateId === ApplicationStatus.Updating;
-
-  const isProjectMigratingDatabase =
-    currentProject?.appStates[0]?.stateId === ApplicationStatus.Migrating;
-
-  // Poll for project updates
-  useEffect(() => {
-    if (!isProjectUpdating && !isProjectMigratingDatabase) {
-      return () => {};
-    }
-
-    const interval = setInterval(async () => {
-      await refetchProject();
-    }, 5000);
-
-    return () => {
-      clearInterval(interval);
-    };
-  }, [isProjectUpdating, isProjectMigratingDatabase, refetchProject]);
+  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 (!currentProject) {
+    if (!project && !workspaceProject) {
       toast.error('You need to be inside a project to open the Assistant', {
         style: getToastStyleProps().style,
         ...getToastStyleProps().error,
@@ -67,53 +44,49 @@ 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 (
     <Box
       component="header"
       className={twMerge(
-        'z-40 grid w-full transform-gpu grid-flow-col items-center justify-between gap-2 border-b-1 px-4 py-3',
+        'relative z-40 grid w-full transform-gpu grid-flow-col items-center justify-between gap-2 border-b px-4',
         className,
       )}
       sx={{ backgroundColor: 'background.paper' }}
       {...props}
     >
-      <div className="grid grid-flow-col items-center gap-3">
-        <NavLink href="/" className="w-12">
-          <Logo className="mx-auto cursor-pointer" />
-        </NavLink>
-
-        {(router.query.workspaceSlug || router.query.appSlug) && (
-          <Breadcrumbs aria-label="Workspace breadcrumbs" />
-        )}
-
-        {isProjectUpdating && (
-          <Chip size="small" label="Updating" color="warning" />
-        )}
-        {isProjectMigratingDatabase && (
-          <Chip
-            size="small"
-            label="Upgrading Postgres version"
-            color="warning"
-          />
-        )}
+      <div className="mr-2 h-6 w-6">
+        <Logo className="mx-auto h-6 w-6 cursor-pointer" />
       </div>
 
-      <div className="hidden grid-flow-col items-center gap-2 sm:grid">
+      <BreadcrumbNav />
+
+      <div className="hidden grid-flow-col items-center gap-1 sm:grid">
         <Button className="rounded-full" onClick={openDevAssistant}>
-          <GraphiteIcon />
+          <GraphiteIcon className="h-4 w-4" />
         </Button>
 
+        <NotificationsTray />
+
+        <AnnouncementsTray />
+
         {isPlatform && (
           <NavLink
             underline="none"
             href="/support"
-            className="mr-2 rounded-md px-2.5 py-1.5 text-sm motion-safe:transition-colors"
+            className="mr-1 rounded-md px-2.5 py-1.5 text-sm motion-safe:transition-colors"
             sx={{
               color: 'text.primary',
               '&:hover': { backgroundColor: 'grey.200' },

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

@@ -0,0 +1,116 @@
+import { Button } from '@/components/ui/v3/button';
+import { cn } from '@/lib/utils';
+
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/v3/command';
+
+import { useRouter } from 'next/router';
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/v3/popover';
+
+import { Check, ChevronsUpDown } from 'lucide-react';
+import { useEffect, useMemo, useState } from 'react';
+
+type Option = {
+  value: string;
+  label: string;
+};
+
+const orgPages = [
+  { label: 'Settings', value: 'settings' },
+  { label: 'Projects', value: 'projects' },
+  { label: 'Members', value: 'members' },
+  { label: 'Billing', value: 'billing' },
+];
+
+export default function OrgPagesComboBox() {
+  const {
+    query: { orgSlug },
+    push,
+    asPath,
+  } = useRouter();
+
+  const pathSegments = useMemo(() => asPath.split('/'), [asPath]);
+  const orgPageFromUrl = pathSegments[3] || null;
+
+  const selectedOrgPageFromUrl = orgPages.find(
+    (item) => item.value === orgPageFromUrl,
+  );
+
+  const [selectedOrgPage, setSelectedOrgPage] = useState<Option | null>(null);
+
+  useEffect(() => {
+    if (selectedOrgPageFromUrl) {
+      setSelectedOrgPage(selectedOrgPageFromUrl);
+    }
+  }, [selectedOrgPageFromUrl]);
+
+  const options: Option[] = orgPages.map((page) => ({
+    label: page.label,
+    value: page.value,
+  }));
+
+  const [open, setOpen] = useState(false);
+
+  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"
+        >
+          {selectedOrgPage ? (
+            <div>{selectedOrgPage.label}</div>
+          ) : (
+            <>Select a page</>
+          )}
+          <ChevronsUpDown className="w-5 h-5 text-muted-foreground" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="p-0" side="bottom" align="start">
+        <Command>
+          <CommandInput placeholder="Select a page..." />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup>
+              {options.map((option) => (
+                <CommandItem
+                  key={option.value}
+                  value={option.label}
+                  onSelect={() => {
+                    setSelectedOrgPage(option);
+                    setOpen(false);
+                    push(`/orgs/${orgSlug}/${option.value}`);
+                  }}
+                >
+                  <Check
+                    className={cn(
+                      'mr-2 h-4 w-4',
+                      selectedOrgPage?.value === option.value
+                        ? 'opacity-100'
+                        : 'opacity-0',
+                    )}
+                  />
+                  <div className="flex flex-row items-center gap-2">
+                    <span className="truncate max-w-52">{option.label}</span>
+                  </div>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}

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

@@ -0,0 +1,212 @@
+import { Badge } from '@/components/ui/v3/badge';
+import { Button } from '@/components/ui/v3/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from '@/components/ui/v3/command';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/v3/popover';
+import { useIsPlatform } from '@/features/orgs/projects/common/hooks/useIsPlatform';
+import { useOrgs } from '@/features/orgs/projects/hooks/useOrgs';
+import { useWorkspaces } from '@/features/orgs/projects/hooks/useWorkspaces';
+import { useSSRLocalStorage } from '@/hooks/useSSRLocalStorage';
+import { cn } from '@/lib/utils';
+import { Check, ChevronsUpDown } from 'lucide-react';
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+
+type Option = {
+  value: string;
+  label: string;
+  plan: string;
+  type: 'organization' | 'workspace';
+};
+
+export default function OrgsComboBox() {
+  const { orgs } = useOrgs();
+  const isPlatform = useIsPlatform();
+  const { workspaces } = useWorkspaces();
+  const [, setLastSlug] = useSSRLocalStorage('slug', null);
+
+  const {
+    query: { orgSlug, workspaceSlug },
+    push,
+  } = useRouter();
+
+  const selectedOrgFromUrl =
+    Boolean(orgSlug) && orgs.find((item) => item.slug === orgSlug);
+  const selectedWorkspaceFromUrl =
+    Boolean(workspaceSlug) &&
+    workspaces.find((item) => item.slug === workspaceSlug);
+
+  const [selectedItem, setSelectedItem] = useState<Option | null>(null);
+
+  useEffect(() => {
+    const selectedItemFromUrl = selectedOrgFromUrl || selectedWorkspaceFromUrl;
+
+    if (selectedItemFromUrl) {
+      setSelectedItem({
+        label: selectedItemFromUrl.name,
+        value: selectedItemFromUrl.slug,
+        plan: selectedOrgFromUrl ? selectedOrgFromUrl.plan.name : 'Legacy',
+        type: selectedOrgFromUrl ? 'organization' : 'workspace',
+      });
+    }
+  }, [selectedOrgFromUrl, selectedWorkspaceFromUrl]);
+
+  const orgsOptions: Option[] = orgs.map((org) => ({
+    label: org.name,
+    value: org.slug,
+    plan: org.plan.name,
+    type: 'organization',
+  }));
+
+  const workspacesOptions: Option[] = workspaces.map((workspace) => ({
+    label: workspace.name,
+    value: workspace.slug,
+    plan: 'Legacy',
+    type: 'workspace',
+  }));
+
+  const [open, setOpen] = useState(false);
+
+  const renderBadge = (plan: string) => {
+    if (!isPlatform) {
+      return null;
+    }
+
+    return (
+      <Badge
+        variant={plan === 'Starter' ? 'outline' : 'default'}
+        className={cn(
+          plan === 'Starter' ? 'bg-muted' : '',
+          plan === 'Legacy'
+            ? 'bg-orange-200 text-foreground hover:bg-orange-200 dark:bg-orange-500'
+            : '',
+          'hover:none ml-2 h-5 px-[6px] text-[10px]',
+        )}
+      >
+        {plan}
+      </Badge>
+    );
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          size="sm"
+          variant="ghost"
+          className="w-full justify-between gap-2 bg-background text-foreground hover:bg-accent dark:hover:bg-muted"
+        >
+          {selectedItem ? (
+            <div className="flex flex-row items-center justify-center">
+              {selectedItem.label}
+              {renderBadge(selectedItem.plan)}
+            </div>
+          ) : (
+            'Select organization / workspace'
+          )}
+          <ChevronsUpDown className="h-5 w-5 text-muted-foreground" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="p-0" side="bottom" align="start">
+        <Command>
+          <CommandInput placeholder="Select organization..." />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup heading="Organizations">
+              {orgsOptions.map((option) => (
+                <CommandItem
+                  keywords={[option.label]}
+                  key={option.value}
+                  value={option.value}
+                  className="flex items-center justify-between bg-background text-foreground dark:hover:bg-muted"
+                  onSelect={() => {
+                    setSelectedItem(option);
+                    setOpen(false);
+
+                    // persist last slug in local storage
+                    setLastSlug(option.value);
+
+                    if (option.type === 'organization') {
+                      push(`/orgs/${option.value}/projects`);
+                    } else {
+                      push(`/${option.value}`);
+                    }
+                  }}
+                >
+                  <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="max-w-52 truncate">{option.label}</span>
+                  </div>
+                  {renderBadge(option.plan)}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+
+            {workspaces.length > 0 && (
+              <>
+                <CommandSeparator />
+
+                <CommandGroup heading="Workspaces">
+                  {workspacesOptions.map((option) => (
+                    <CommandItem
+                      keywords={[option.label]}
+                      key={option.value}
+                      value={option.value}
+                      className="flex items-center justify-between bg-background text-foreground hover:bg-accent dark:hover:bg-muted"
+                      onSelect={() => {
+                        setSelectedItem(option);
+                        setOpen(false);
+
+                        // persist last slug in local storage
+                        setLastSlug(option.value);
+
+                        if (option.type === 'organization') {
+                          push(`/orgs/${option.value}/projects`);
+                        } else {
+                          push(`/${option.value}`);
+                        }
+                      }}
+                    >
+                      <div className="flex items-center">
+                        <Check
+                          className={cn(
+                            'mr-2 h-4 w-4',
+                            selectedItem?.value === option.value
+                              ? 'opacity-100'
+                              : 'opacity-0',
+                          )}
+                        />
+                        <span className="max-w-52 truncate">
+                          {option.label}
+                        </span>
+                      </div>
+                      {renderBadge(option.plan)}
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              </>
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}

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

@@ -0,0 +1,219 @@
+import { Button } from '@/components/ui/v3/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/v3/command';
+
+import {
+  Check,
+  ChevronsUpDown,
+  CloudIcon,
+  CogIcon,
+  DatabaseIcon,
+  FileTextIcon,
+  GaugeIcon,
+  HomeIcon,
+  RocketIcon,
+  UserIcon,
+} from 'lucide-react';
+
+import { AIIcon } from '@/components/ui/v2/icons/AIIcon';
+import { GraphQLIcon } from '@/components/ui/v2/icons/GraphQLIcon';
+import { HasuraIcon } from '@/components/ui/v2/icons/HasuraIcon';
+import { ServicesIcon } from '@/components/ui/v2/icons/ServicesIcon';
+import { StorageIcon } from '@/components/ui/v2/icons/StorageIcon';
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/v3/popover';
+import { cn } from '@/lib/utils';
+import { useRouter } from 'next/router';
+import { useEffect, useMemo, useState, type ReactElement } from 'react';
+
+type Option = {
+  value: string;
+  label: string;
+  icon: ReactElement;
+};
+
+const projectPages = [
+  {
+    label: 'Overview',
+    value: 'overview',
+    icon: <HomeIcon className="w-4 h-4" />,
+    slug: '',
+  },
+  {
+    label: 'Database',
+    value: 'database',
+    icon: <DatabaseIcon className="w-4 h-4" />,
+    slug: '/database/browser/default',
+  },
+  {
+    label: 'GraphQL',
+    value: 'graphql',
+    icon: <GraphQLIcon className="w-4 h-4" />,
+    slug: 'graphql',
+  },
+  {
+    label: 'Hasura',
+    value: 'hasura',
+    icon: <HasuraIcon className="w-4 h-4" />,
+    slug: 'hasura',
+  },
+  {
+    label: 'Auth',
+    value: 'users',
+    icon: <UserIcon className="w-4 h-4" />,
+    slug: 'users',
+  },
+  {
+    label: 'Storage',
+    value: 'storage',
+    icon: <StorageIcon className="w-4 h-4" />,
+    slug: 'storage',
+  },
+  {
+    label: 'Run',
+    value: 'run',
+    icon: <ServicesIcon className="w-4 h-4" />,
+    slug: 'run',
+  },
+  {
+    label: 'AI',
+    value: 'ai',
+    icon: <AIIcon className="w-4 h-4" />,
+    slug: 'ai/auto-embeddings',
+  },
+  {
+    label: 'Deployments',
+    value: 'deployments',
+    icon: <RocketIcon className="w-4 h-4" />,
+    slug: 'deployments',
+  },
+  {
+    label: 'Backups',
+    value: 'backups',
+    icon: <CloudIcon className="w-4 h-4" />,
+    slug: 'backups',
+  },
+  {
+    label: 'Logs',
+    value: 'logs',
+    icon: <FileTextIcon className="w-4 h-4" />,
+    slug: 'logs',
+  },
+  {
+    label: 'Metrics',
+    value: 'metrics',
+    icon: <GaugeIcon className="w-4 h-4" />,
+    slug: 'metrics',
+  },
+  {
+    label: 'Settings',
+    value: 'settings',
+    icon: <CogIcon className="w-4 h-4" />,
+    slug: 'settings',
+  },
+];
+
+export default function ProjectPagesComboBox() {
+  const {
+    query: { orgSlug, appSubdomain },
+    push,
+    asPath,
+  } = useRouter();
+
+  const pathSegments = useMemo(() => asPath.split('/'), [asPath]);
+  const projectPageFromUrl = appSubdomain
+    ? pathSegments[5] || 'overview'
+    : null;
+  const selectedProjectPageFromUrl = projectPages.find(
+    (item) => item.value === projectPageFromUrl,
+  );
+  const [selectedProjectPage, setSelectedProjectPage] = useState<Option | null>(
+    null,
+  );
+
+  useEffect(() => {
+    if (selectedProjectPageFromUrl) {
+      setSelectedProjectPage({
+        label: selectedProjectPageFromUrl.label,
+        value: selectedProjectPageFromUrl.slug,
+        icon: selectedProjectPageFromUrl.icon,
+      });
+    }
+  }, [selectedProjectPageFromUrl]);
+
+  const options: Option[] = projectPages.map((app) => ({
+    label: app.label,
+    value: app.slug,
+    icon: app.icon,
+  }));
+
+  const [open, setOpen] = useState(false);
+
+  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"
+        >
+          {selectedProjectPage ? (
+            <div className="flex flex-row items-center justify-center gap-2">
+              {selectedProjectPage.icon}
+              {selectedProjectPage.label}
+            </div>
+          ) : (
+            <>Select a page</>
+          )}
+          <ChevronsUpDown className="w-5 h-5 text-muted-foreground" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="p-0" side="bottom" align="start">
+        <Command>
+          <CommandInput placeholder="Select a page..." />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup>
+              {options.map((option) => (
+                <CommandItem
+                  key={option.value}
+                  value={option.label}
+                  onSelect={() => {
+                    setSelectedProjectPage(option);
+                    setOpen(false);
+                    push(
+                      `/orgs/${orgSlug}/projects/${appSubdomain}/${option.value}`,
+                    );
+                  }}
+                >
+                  <Check
+                    className={cn(
+                      'mr-2 h-4 w-4',
+                      selectedProjectPage?.value === option.value
+                        ? 'opacity-100'
+                        : 'opacity-0',
+                    )}
+                  />
+                  <div className="flex flex-row items-center gap-2">
+                    {option.icon}
+                    <span className="truncate max-w-52">{option.label}</span>
+                  </div>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}

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

@@ -0,0 +1,168 @@
+import { Button } from '@/components/ui/v3/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/v3/command';
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/v3/popover';
+import { cn } from '@/lib/utils';
+import { Check, ChevronsUpDown } from 'lucide-react';
+import { useRouter } from 'next/router';
+import { useEffect, useMemo, useState } from 'react';
+
+type Option = {
+  value: string;
+  label: string;
+  route: string;
+};
+
+const projectSettingsPages = [
+  { name: 'General', slug: 'general', route: '' },
+  {
+    name: 'Compute Resources',
+    slug: 'compute-resources',
+    route: 'compute-resources',
+  },
+  { name: 'Database', slug: 'database', route: 'database' },
+  { name: 'Hasura', slug: 'hasura', route: 'hasura' },
+  {
+    name: 'Authentication',
+    slug: 'authentication',
+    route: 'authentication',
+  },
+  {
+    name: 'Sign-In methods',
+    slug: 'sign-in-methods',
+    route: 'sign-in-methods',
+  },
+  { name: 'Storage', slug: 'storage', route: 'storage' },
+  {
+    name: 'Roles and Permissions',
+    slug: 'roles-and-permissions',
+    route: 'roles-and-permissions',
+  },
+  { name: 'SMTP', slug: 'smtp', route: 'smtp' },
+  { name: 'Git', slug: 'git', route: 'git' },
+  {
+    name: 'Environment Variables',
+    slug: 'environment-variables',
+    route: 'environment-variables',
+  },
+  { name: 'Secrets', slug: 'secrets', route: 'secrets' },
+  {
+    name: 'Custom Domains',
+    slug: 'custom-domains',
+    route: 'custom-domains',
+  },
+  {
+    name: 'Rate Limiting',
+    slug: 'rate-limiting',
+    route: 'rate-limiting',
+  },
+  { name: 'AI', slug: 'ai', route: 'ai' },
+  { name: 'Configuration Editor', slug: 'editor', route: 'editor' },
+].map((item) => ({
+  label: item.name,
+  value: item.slug,
+  route: item.route,
+}));
+
+export default function ProjectSettingsPagesComboBox() {
+  const {
+    query: { orgSlug, appSubdomain },
+    push,
+    asPath,
+  } = useRouter();
+
+  const pathSegments = useMemo(() => asPath.split('/'), [asPath]);
+  const isSettingsPage = pathSegments.includes('settings');
+  const settingsPageFromUrl = isSettingsPage
+    ? pathSegments[6] || 'general'
+    : null;
+
+  const selectedSettingsPageFromUrl = projectSettingsPages.find(
+    (item) => item.value === settingsPageFromUrl,
+  );
+  const [selectedSettingsPage, setSelectedSettingsPage] =
+    useState<Option | null>(null);
+
+  useEffect(() => {
+    if (selectedSettingsPageFromUrl) {
+      setSelectedSettingsPage({
+        label: selectedSettingsPageFromUrl.label,
+        value: selectedSettingsPageFromUrl.value,
+        route: selectedSettingsPageFromUrl.route,
+      });
+    }
+  }, [selectedSettingsPageFromUrl]);
+
+  const options: Option[] = projectSettingsPages.map((page) => ({
+    label: page.label,
+    value: page.value,
+    route: page.route,
+  }));
+
+  const [open, setOpen] = useState(false);
+
+  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"
+        >
+          {selectedSettingsPage ? (
+            <div>{selectedSettingsPage.label}</div>
+          ) : (
+            <>Select a page</>
+          )}
+          <ChevronsUpDown className="w-5 h-5 text-muted-foreground" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="p-0" side="bottom" align="start">
+        <Command>
+          <CommandInput placeholder="Select a page..." />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup>
+              {options.map((option) => (
+                <CommandItem
+                  key={option.value}
+                  value={option.label}
+                  onSelect={() => {
+                    setSelectedSettingsPage(option);
+                    setOpen(false);
+                    push(
+                      `/orgs/${orgSlug}/projects/${appSubdomain}/settings/${option.route}/`,
+                    );
+                  }}
+                >
+                  <Check
+                    className={cn(
+                      'mr-2 h-4 w-4',
+                      selectedSettingsPage?.value === option.value
+                        ? 'opacity-100'
+                        : 'opacity-0',
+                    )}
+                  />
+                  <div className="flex flex-row items-center gap-2">
+                    <span className="truncate max-w-52">{option.label}</span>
+                  </div>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}

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

@@ -0,0 +1,41 @@
+import { Chip } from '@/components/ui/v2/Chip';
+import { useProject } from '@/features/orgs/projects/hooks/useProject';
+import { ApplicationStatus } from '@/types/application';
+import { useEffect } from 'react';
+
+export default function ProjectStatus() {
+  const { project, refetch: refetchProject } = useProject();
+
+  const isProjectUpdating =
+    project?.appStates[0]?.stateId === ApplicationStatus.Updating;
+
+  const isProjectMigratingDatabase =
+    project?.appStates[0]?.stateId === ApplicationStatus.Migrating;
+
+  // Poll for project updates
+  useEffect(() => {
+    if (!isProjectUpdating && !isProjectMigratingDatabase) {
+      return () => {};
+    }
+
+    const interval = setInterval(async () => {
+      await refetchProject();
+    }, 5000);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [isProjectUpdating, isProjectMigratingDatabase, refetchProject]);
+
+  if (isProjectUpdating) {
+    return <Chip size="small" label="Updating" color="warning" />;
+  }
+
+  if (isProjectMigratingDatabase) {
+    return (
+      <Chip size="small" label="Upgrading Postgres version" color="warning" />
+    );
+  }
+
+  return null;
+}

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

@@ -0,0 +1,112 @@
+import ProjectStatus from '@/components/layout/Header/ProjectStatus';
+import { Button } from '@/components/ui/v3/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/v3/command';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/v3/popover';
+import { useOrgs } from '@/features/orgs/projects/hooks/useOrgs';
+import { cn } from '@/lib/utils';
+import { Box, Check, ChevronsUpDown } from 'lucide-react';
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+
+type Option = {
+  value: string;
+  label: string;
+};
+
+export default function ProjectsComboBox() {
+  const {
+    query: { appSubdomain },
+    push,
+  } = useRouter();
+
+  const { currentOrg: { slug: orgSlug, apps = [] } = {} } = useOrgs();
+  const selectedProjectFromUrl = apps.find(
+    (item) => item.subdomain === appSubdomain,
+  );
+  const [selectedProject, setSelectedProject] = useState<Option | null>(null);
+
+  useEffect(() => {
+    if (selectedProjectFromUrl) {
+      setSelectedProject({
+        label: selectedProjectFromUrl.name,
+        value: selectedProjectFromUrl.subdomain,
+      });
+    }
+  }, [selectedProjectFromUrl]);
+
+  const options: Option[] = apps.map((app) => ({
+    label: app.name,
+    value: app.subdomain,
+  }));
+
+  const [open, setOpen] = useState(false);
+
+  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="h-4 w-4" />
+              {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
+                  keywords={[option.label]}
+                  key={option.value}
+                  value={option.value}
+                  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="h-4 w-4" />
+                    <span className="max-w-52 truncate">{option.label}</span>
+                  </div>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}

dashboard/src/components/layout/Header/index.ts

@@ -1,2 +1,3 @@
+export { default as BreadcrumbNav } from './BreadcrumbNav';
 export * from './Header';
 export { default as Header } from './Header';

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

@@ -0,0 +1,110 @@
+import { Button } from '@/components/ui/v3/button';
+import { Separator } from '@/components/ui/v3/separator';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/v3/sheet';
+import CreateOrgDialog from '@/features/orgs/components/CreateOrgFormDialog/CreateOrgFormDialog';
+import { useWorkspaces } from '@/features/orgs/projects/hooks/useWorkspaces';
+import { Menu, Pin, PinOff, X } from 'lucide-react';
+import { useRouter } from 'next/router';
+import { useEffect, useRef } from 'react';
+import NavTree from './NavTree';
+import { useTreeNavState } from './TreeNavStateContext';
+import WorkspacesNavTree from './WorkspacesNavTree';
+
+interface MainNavProps {
+  container: HTMLElement;
+}
+
+export default function MainNav({ container }: MainNavProps) {
+  const { asPath } = useRouter();
+  const { workspaces } = useWorkspaces();
+  const scrollContainerRef = useRef<HTMLDivElement | null>(null);
+  const { open, setOpen, mainNavPinned, setMainNavPinned } = useTreeNavState();
+
+  const scrollToCurrentPath = () => {
+    requestAnimationFrame(() => {
+      const element = document.querySelector(`a[href="${asPath}"]`);
+      if (element && scrollContainerRef.current) {
+        element.scrollIntoView({ block: 'center' });
+      }
+    });
+  };
+
+  useEffect(() => {
+    if (open) {
+      scrollToCurrentPath();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <div
+        className="min- absolute left-0 z-50 flex h-full w-6 justify-center border-r-[1px] bg-background pt-1 hover:bg-accent"
+        onMouseEnter={() => setOpen(true)}
+      >
+        <Menu className="w-4 h-4" />
+      </div>
+
+      <SheetContent
+        side="left"
+        container={container}
+        hideCloseButton
+        className="h-full w-full p-0 sm:max-w-[310px]"
+        onMouseLeave={() => setOpen(false)}
+      >
+        <SheetHeader>
+          <SheetTitle className="sr-only">Main navigation</SheetTitle>
+          <SheetDescription className="sr-only">
+            Nhost Dashboard Main Navigation
+          </SheetDescription>
+        </SheetHeader>
+
+        <div className="flex flex-row items-center justify-end w-full h-12 px-1 border-b bg-background">
+          <Button
+            variant="ghost"
+            className="hidden sm:flex"
+            onClick={() => setMainNavPinned(!mainNavPinned)}
+          >
+            {mainNavPinned ? (
+              <PinOff className="w-5 h-5" />
+            ) : (
+              <Pin className="w-5 h-5" />
+            )}
+          </Button>
+
+          <Button
+            variant="ghost"
+            className="flex sm:hidden"
+            onClick={() => setOpen(false)}
+          >
+            <X className="w-5 h-5" />
+          </Button>
+        </div>
+
+        <div
+          ref={scrollContainerRef}
+          className="h-[calc(100vh-7rem)] space-y-4 overflow-auto pb-12 pt-2 lg:h-[calc(100vh-6rem)]"
+        >
+          <div className="flex flex-col gap-1 px-2">
+            <NavTree />
+            <CreateOrgDialog />
+          </div>
+          {workspaces.length > 0 && (
+            <>
+              <Separator className="mx-auto my-2" />
+              <div className="px-2">
+                <WorkspacesNavTree />
+              </div>
+            </>
+          )}
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}

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

@@ -0,0 +1,538 @@
+import { AIIcon } from '@/components/ui/v2/icons/AIIcon';
+import { CloudIcon } from '@/components/ui/v2/icons/CloudIcon';
+import { DatabaseIcon } from '@/components/ui/v2/icons/DatabaseIcon';
+import { FileTextIcon } from '@/components/ui/v2/icons/FileTextIcon';
+import { GaugeIcon } from '@/components/ui/v2/icons/GaugeIcon';
+import { GraphQLIcon } from '@/components/ui/v2/icons/GraphQLIcon';
+import { HasuraIcon } from '@/components/ui/v2/icons/HasuraIcon';
+import { HomeIcon } from '@/components/ui/v2/icons/HomeIcon';
+import { RocketIcon } from '@/components/ui/v2/icons/RocketIcon';
+import { ServicesIcon } from '@/components/ui/v2/icons/ServicesIcon';
+import { StorageIcon } from '@/components/ui/v2/icons/StorageIcon';
+import { UserIcon } from '@/components/ui/v2/icons/UserIcon';
+import { Badge } from '@/components/ui/v3/badge';
+import { Button } from '@/components/ui/v3/button';
+import { useIsPlatform } from '@/features/orgs/projects/common/hooks/useIsPlatform';
+import { useOrgs, type Org } from '@/features/orgs/projects/hooks/useOrgs';
+import { cn } from '@/lib/utils';
+import { Box, ChevronDown, ChevronRight, Plus } from 'lucide-react';
+import Link from 'next/link';
+import { useMemo, type ReactElement } from 'react';
+
+import {
+  ControlledTreeEnvironment,
+  Tree,
+  type TreeItem,
+  type TreeItemIndex,
+} from 'react-complex-tree';
+import { useTreeNavState } from './TreeNavStateContext';
+
+const projectPages = [
+  {
+    name: 'Overview',
+    icon: <HomeIcon className="w-4 h-4" />,
+    route: '',
+    slug: 'overview',
+  },
+  {
+    name: 'Database',
+    icon: <DatabaseIcon className="w-4 h-4" />,
+    route: 'database/browser/default',
+    slug: 'database',
+  },
+  {
+    name: 'GraphQL',
+    icon: <GraphQLIcon className="w-4 h-4" />,
+    route: 'graphql',
+    slug: 'graphql',
+  },
+  {
+    name: 'Hasura',
+    icon: <HasuraIcon className="w-4 h-4" />,
+    route: 'hasura',
+    slug: 'hasura',
+  },
+  {
+    name: 'Auth',
+    icon: <UserIcon className="w-4 h-4" />,
+    route: 'users',
+    slug: 'users',
+  },
+  {
+    name: 'Storage',
+    icon: <StorageIcon className="w-4 h-4" />,
+    route: 'storage',
+    slug: 'storage',
+  },
+  {
+    name: 'Run',
+    icon: <ServicesIcon className="w-4 h-4" />,
+    route: 'run',
+    slug: 'run',
+  },
+  {
+    name: 'AI',
+    icon: <AIIcon className="w-4 h-4" />,
+    route: 'ai/auto-embeddings',
+    slug: 'ai',
+  },
+  {
+    name: 'Deployments',
+    icon: <RocketIcon className="w-4 h-4" />,
+    route: 'deployments',
+    slug: 'deployments',
+  },
+  {
+    name: 'Backups',
+    icon: <CloudIcon className="w-4 h-4" />,
+    route: 'backups',
+    slug: 'backups',
+  },
+  {
+    name: 'Logs',
+    icon: <FileTextIcon className="w-4 h-4" />,
+    route: 'logs',
+    slug: 'logs',
+  },
+  {
+    name: 'Metrics',
+    icon: <GaugeIcon className="w-4 h-4" />,
+    route: 'metrics',
+    slug: 'metrics',
+  },
+  {
+    name: 'Settings',
+    route: 'settings',
+    slug: 'settings',
+  },
+];
+
+const projectSettingsPages = [
+  { name: 'General', slug: 'general', route: '' },
+  {
+    name: 'Compute Resources',
+    slug: 'compute-resources',
+    route: 'compute-resources',
+  },
+  { name: 'Database', slug: 'database', route: 'database' },
+  { name: 'Hasura', slug: 'hasura', route: 'hasura' },
+  {
+    name: 'Authentication',
+    slug: 'authentication',
+    route: 'authentication',
+  },
+  {
+    name: 'Sign-In methods',
+    slug: 'sign-in-methods',
+    route: 'sign-in-methods',
+  },
+  { name: 'Storage', slug: 'storage', route: 'storage' },
+  {
+    name: 'Roles and Permissions',
+    slug: 'roles-and-permissions',
+    route: 'roles-and-permissions',
+  },
+  { name: 'SMTP', slug: 'smtp', route: 'smtp' },
+  { name: 'Git', slug: 'git', route: 'git' },
+  {
+    name: 'Environment Variables',
+    slug: 'environment-variables',
+    route: 'environment-variables',
+  },
+  { name: 'Secrets', slug: 'secrets', route: 'secrets' },
+  {
+    name: 'Custom Domains',
+    slug: 'custom-domains',
+    route: 'custom-domains',
+  },
+  {
+    name: 'Rate Limiting',
+    slug: 'rate-limiting',
+    route: 'rate-limiting',
+  },
+  { name: 'AI', slug: 'ai', route: 'ai' },
+  { name: 'Configuration Editor', slug: 'editor', route: 'editor' },
+];
+
+const createOrganization = (org: Org, isPlatform: boolean) => {
+  const result = {};
+
+  result[org.slug] = {
+    index: org.slug,
+    canMove: false,
+    isFolder: true,
+    children: [
+      `${org.slug}-projects`,
+      `${org.slug}-settings`,
+      `${org.slug}-members`,
+      `${org.slug}-billing`,
+    ],
+    data: {
+      name: org.name,
+      slug: org.slug,
+      type: 'org',
+      isFree: org.plan.isFree,
+      plan: org.plan.name,
+      targetUrl: `/orgs/${org.slug}/projects`, // default to projects
+      disabled: false,
+    },
+    canRename: false,
+  };
+
+  result[`${org.slug}-projects`] = {
+    index: `${org.slug}-projects`,
+    canMove: false,
+    isFolder: true,
+    children: [
+      ...org.apps.map((app) => `${org.slug}-${app.subdomain}`),
+      `${org.slug}-new-project`,
+    ],
+    data: {
+      name: 'Projects',
+      targetUrl: `/orgs/${org.slug}/projects`,
+      disabled: false,
+    },
+    canRename: false,
+  };
+
+  result[`${org.slug}-new-project`] = {
+    index: `${org.slug}-new-project`,
+    isFolder: false,
+    canMove: false,
+    canRename: false,
+    data: {
+      name: 'New project',
+      slug: 'new',
+      icon: <Plus className="w-4 h-4 mr-1 font-bold" strokeWidth={3} />,
+      targetUrl: `/orgs/${org.slug}/projects/new`,
+      disabled: !isPlatform,
+    },
+  };
+
+  org.apps.forEach((app) => {
+    result[`${org.slug}-${app.subdomain}`] = {
+      index: `${org.slug}-${app.subdomain}`,
+      isFolder: true,
+      canMove: false,
+      canRename: false,
+      data: {
+        name: app.name,
+        slug: app.subdomain,
+        icon: <Box className="w-4 h-4" />,
+        targetUrl: `/orgs/${org.slug}/projects/${app.subdomain}`,
+      },
+      children: projectPages.map(
+        (page) => `${org.slug}-${app.subdomain}-${page.slug}`,
+      ),
+    };
+  });
+
+  org.apps.forEach((_app) => {
+    projectPages.forEach((_page) => {
+      result[`${org.slug}-${_app.subdomain}-${_page.slug}`] = {
+        index: `${org.slug}-${_app.subdomain}-${_page.slug}`,
+        canMove: false,
+        isFolder: _page.name === 'Settings',
+        children:
+          _page.name === 'Settings'
+            ? projectSettingsPages.map(
+                (p) => `${org.slug}-${_app.subdomain}-settings-${p.slug}`,
+              )
+            : undefined,
+        data: {
+          name: _page.name,
+          icon: _page.icon,
+          isProjectPage: true,
+          targetUrl: `/orgs/${org.slug}/projects/${_app.subdomain}/${_page.route}`,
+          disabled:
+            ['deployments', 'backups', 'logs', 'metrics'].includes(
+              _page.slug,
+            ) && !isPlatform,
+        },
+        canRename: false,
+      };
+    });
+
+    // add the settings pages
+    projectSettingsPages.forEach((p) => {
+      result[`${org.slug}-${_app.subdomain}-settings-${p.slug}`] = {
+        index: `${org.slug}-${_app.subdomain}-settings-${p.slug}`,
+        canMove: false,
+        isFolder: false,
+        children: undefined,
+        data: {
+          name: p.name,
+          targetUrl:
+            p.slug === 'general'
+              ? `/orgs/${org.slug}/projects/${_app.subdomain}/settings`
+              : `/orgs/${org.slug}/projects/${_app.subdomain}/settings/${p.route}`,
+        },
+        canRename: false,
+      };
+    });
+  });
+
+  result[`${org.slug}-settings`] = {
+    index: `${org.slug}-settings`,
+    canMove: false,
+    isFolder: false,
+    children: [],
+    data: {
+      name: 'Settings',
+      targetUrl: `/orgs/${org.slug}/settings`,
+      disabled: !isPlatform,
+    },
+    canRename: false,
+  };
+
+  result[`${org.slug}-members`] = {
+    index: `${org.slug}-members`,
+    canMove: false,
+    isFolder: false,
+    children: [],
+    data: {
+      name: 'Members',
+      targetUrl: `/orgs/${org.slug}/members`,
+      disabled: !isPlatform,
+    },
+    canRename: false,
+  };
+
+  result[`${org.slug}-billing`] = {
+    index: `${org.slug}-billing`,
+    canMove: false,
+    isFolder: false,
+    children: [],
+    data: {
+      name: 'Billing',
+      targetUrl: `/orgs/${org.slug}/billing`,
+      disabled: !isPlatform,
+    },
+    canRename: false,
+  };
+
+  return result;
+};
+
+type NavItem = {
+  name: string;
+  slug?: string;
+  type?: string;
+  isFree?: boolean;
+  plan?: string;
+  icon?: ReactElement;
+  targetUrl?: string;
+  disabled?: boolean;
+};
+
+const buildNavTreeData = (
+  org: Org,
+  isPlatform: boolean,
+): { items: Record<TreeItemIndex, TreeItem<NavItem>> } => {
+  if (!org) {
+    return {
+      items: {
+        root: {
+          index: 'root',
+          canMove: false,
+          isFolder: true,
+          children: [],
+          data: { name: 'root' },
+          canRename: false,
+        },
+      },
+    };
+  }
+
+  const navTree = {
+    items: {
+      root: {
+        index: 'root',
+        canMove: false,
+        isFolder: true,
+        children: [
+          `${org.slug}-projects`,
+          `${org.slug}-settings`,
+          `${org.slug}-members`,
+          `${org.slug}-billing`,
+        ],
+        data: { name: 'root' },
+        canRename: false,
+      },
+      ...createOrganization(org, isPlatform),
+    },
+  };
+
+  return navTree;
+};
+
+export default function NavTree() {
+  const { currentOrg: org } = useOrgs();
+  const isPlatform = useIsPlatform();
+  const navTree = useMemo(
+    () => buildNavTreeData(org, isPlatform),
+    [org, isPlatform],
+  );
+  const { orgsTreeViewState, setOrgsTreeViewState, setOpen } =
+    useTreeNavState();
+
+  return (
+    <ControlledTreeEnvironment
+      items={navTree.items}
+      getItemTitle={(item) => item.data.name}
+      viewState={{
+        'nav-tree': orgsTreeViewState,
+      }}
+      renderItemTitle={({ title }) => <span>{title}</span>}
+      renderItemArrow={({ item, context }) => {
+        if (!item.isFolder) {
+          return null;
+        }
+
+        return (
+          <Button
+            type="button"
+            variant="ghost"
+            onClick={() => context.toggleExpandedState()}
+            className="h-8 px-1"
+          >
+            {context.isExpanded ? (
+              <ChevronDown className="w-4 h-4 font-bold" strokeWidth={3} />
+            ) : (
+              <ChevronRight className="w-4 h-4" strokeWidth={3} />
+            )}
+          </Button>
+        );
+      }}
+      renderItem={({ arrow, context, item, children }) => (
+        <li
+          {...context.itemContainerWithChildrenProps}
+          className="flex flex-col gap-1"
+        >
+          <div className="flex flex-row items-center">
+            {arrow}
+            <Button
+              asChild
+              onClick={() => {
+                // do not focus an item if we already there
+                // this will prevent the case where clikcing on the project name
+                // would focus on the project name instead of the overview page
+                if (
+                  navTree.items[item.index].data.targetUrl ===
+                  item.data.targetUrl
+                ) {
+                  return;
+                }
+
+                if (item.data.type !== 'org') {
+                  context.focusItem();
+                }
+              }}
+              className={cn(
+                'flex h-8 w-full flex-row justify-start gap-1 bg-background px-1 text-foreground hover:bg-accent dark:hover:bg-muted',
+                context.isFocused &&
+                  'bg-[#ebf3ff] hover:bg-[#ebf3ff] dark:bg-muted',
+                item.data.disabled && 'pointer-events-none opacity-50',
+              )}
+            >
+              <Link
+                href={item.data.targetUrl || '/'}
+                shallow
+                onClick={() => setOpen(false)}
+              >
+                {item.data.icon && (
+                  <span
+                    className={cn(
+                      'flex items-start',
+                      context.isFocused ? 'text-primary' : '',
+                    )}
+                  >
+                    {item.data.icon}
+                  </span>
+                )}
+                <span
+                  className={cn(
+                    item?.index === 'organizations' && 'font-bold',
+                    context.isFocused ? 'font-bold text-primary' : '',
+                    'max-w-52 truncate',
+                  )}
+                >
+                  {item.data.name}
+                </span>
+                {item.data?.plan && (
+                  <Badge
+                    variant={item.data.isFree ? 'outline' : 'default'}
+                    className={cn(
+                      'h-5 px-[6px] text-[10px]',
+                      item.data.isFree ? 'bg-muted' : '',
+                    )}
+                  >
+                    {item.data.plan}
+                  </Badge>
+                )}
+              </Link>
+            </Button>
+          </div>
+          <div>{children}</div>
+        </li>
+      )}
+      renderTreeContainer={({ children, containerProps }) => (
+        <div {...containerProps} className="w-full">
+          {children}
+        </div>
+      )}
+      renderItemsContainer={({ children, containerProps, depth }) => {
+        if (depth === 0) {
+          return (
+            <ul {...containerProps} className="w-full">
+              {children}
+            </ul>
+          );
+        }
+
+        return (
+          <div className="flex flex-row w-full">
+            <div className="flex justify-center px-[12px] pb-3">
+              <div className="w-0 h-full border-r border-dashed" />
+            </div>
+            <ul {...containerProps} className="w-full">
+              {children}
+            </ul>
+          </div>
+        );
+      }}
+      canSearch={false}
+      onExpandItem={(item) => {
+        setOrgsTreeViewState(
+          ({ expandedItems: prevExpandedItems, ...rest }) => ({
+            ...rest,
+            // Add item index to expandedItems only if it's not already present
+            expandedItems: prevExpandedItems.includes(item.index)
+              ? prevExpandedItems
+              : [...prevExpandedItems, item.index],
+          }),
+        );
+      }}
+      onCollapseItem={(item) => {
+        setOrgsTreeViewState(
+          ({ expandedItems: prevExpandedItems, ...rest }) => ({
+            ...rest,
+            // Remove the item index from expandedItems
+            expandedItems: prevExpandedItems.filter(
+              (index) => index !== item.index,
+            ),
+          }),
+        );
+      }}
+      onFocusItem={(item) => {
+        setOrgsTreeViewState((prevViewState) => ({
+          ...prevViewState,
+          // Set the focused item
+          focusedItem: item.index,
+        }));
+      }}
+    >
+      <Tree treeId="nav-tree" rootItem="root" treeLabel="Navigation Tree" />
+    </ControlledTreeEnvironment>
+  );
+}

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

@@ -0,0 +1,89 @@
+import NavTree from '@/components/layout/MainNav/NavTree';
+import { Button } from '@/components/ui/v3/button';
+import { Separator } from '@/components/ui/v3/separator';
+import CreateOrgDialog from '@/features/orgs/components/CreateOrgFormDialog/CreateOrgFormDialog';
+import { useWorkspaces } from '@/features/orgs/projects/hooks/useWorkspaces';
+import { Pin, PinOff } from 'lucide-react';
+import { useRouter } from 'next/router';
+import { useEffect, useRef } from 'react';
+import { useTreeNavState } from './TreeNavStateContext';
+import WorkspacesNavTree from './WorkspacesNavTree';
+
+export default function PinnedMainNav() {
+  const {
+    asPath,
+    query: { workspaceSlug, orgSlug },
+  } = useRouter();
+
+  const scrollContainerRef = useRef();
+  const { workspaces } = useWorkspaces();
+  const { mainNavPinned, setMainNavPinned } = useTreeNavState();
+
+  useEffect(() => {
+    let observer: MutationObserver;
+
+    const scrollToElement = () => {
+      const element = document.querySelector(`a[href="${asPath}"]`);
+      if (element) {
+        element.scrollIntoView({ block: 'center' });
+        observer.disconnect(); // Stop observing once the element is found and scrolled to
+      }
+    };
+
+    if (scrollContainerRef.current) {
+      observer = new MutationObserver(scrollToElement);
+
+      // Start observing the tree container for child additions or subtree changes
+      observer.observe(scrollContainerRef.current, {
+        childList: true,
+        subtree: true,
+      });
+    }
+
+    // Clean up the observer when the component unmounts or the effect re-runs
+    return () => {
+      if (observer) {
+        observer.disconnect();
+      }
+    };
+  }, [asPath]);
+
+  if (!orgSlug && !workspaceSlug) {
+    return null;
+  }
+
+  return (
+    <div className="flex h-full w-full flex-shrink-0 flex-col border-r p-0 sm:max-w-[310px]">
+      <div className="flex justify-end w-full h-12 p-1 border-b bg-background">
+        <Button
+          variant="ghost"
+          onClick={() => setMainNavPinned(!mainNavPinned)}
+        >
+          {mainNavPinned ? (
+            <PinOff className="w-5 h-5" />
+          ) : (
+            <Pin className="w-5 h-5" />
+          )}
+        </Button>
+      </div>
+
+      <div
+        ref={scrollContainerRef}
+        className="h-[calc(100vh-7rem)] overflow-auto pb-12 pt-2 lg:h-[calc(100vh-6rem)]"
+      >
+        <div className="flex flex-col gap-1 px-2">
+          <NavTree />
+          <CreateOrgDialog />
+        </div>
+        {workspaces.length > 0 && (
+          <>
+            <Separator className="mx-auto my-2" />
+            <div className="px-2">
+              <WorkspacesNavTree />
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,120 @@
+import { useNavTreeStateFromURL } from '@/features/orgs/projects/hooks/useNavTreeStateFromURL';
+import { useWorkspacesNavTreeStateFromURL } from '@/features/orgs/projects/hooks/useWorkspacesNavTreeStateFromURL';
+import { useSSRLocalStorage } from '@/hooks/useSSRLocalStorage';
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type Dispatch,
+  type ReactNode,
+  type SetStateAction,
+} from 'react';
+import type { IndividualTreeViewState } from 'react-complex-tree';
+
+interface TreeNavStateContextType {
+  open: boolean;
+  setOpen: Dispatch<SetStateAction<boolean>>;
+  mainNavPinned: boolean;
+  orgsTreeViewState: IndividualTreeViewState<never>;
+  setOrgsTreeViewState: Dispatch<
+    SetStateAction<IndividualTreeViewState<never>>
+  >;
+  workspacesTreeViewState: IndividualTreeViewState<never>;
+  setWorkspacesTreeViewState: Dispatch<
+    SetStateAction<IndividualTreeViewState<never>>
+  >;
+  setMainNavPinned: (value: boolean) => void;
+}
+
+const TreeNavStateContext = createContext<TreeNavStateContextType | undefined>(
+  undefined,
+);
+
+interface TreeNavProviderProps {
+  children: ReactNode;
+}
+
+function useSyncedTreeViewState(
+  useTreeStateFromURL: () => {
+    expandedItems: string[];
+    focusedItem: string | null;
+  },
+) {
+  const { expandedItems, focusedItem } = useTreeStateFromURL();
+
+  const [state, setState] = useState<IndividualTreeViewState<never>>({
+    expandedItems,
+    focusedItem,
+    selectedItems: null,
+  });
+
+  useEffect(() => {
+    setState((prevState) => ({
+      ...prevState,
+      expandedItems: [
+        ...new Set([...prevState.expandedItems, ...expandedItems]),
+      ],
+      focusedItem,
+    }));
+  }, [expandedItems, focusedItem]);
+
+  return { state, setState };
+}
+
+function TreeNavStateProvider({ children }: TreeNavProviderProps) {
+  const [open, setOpen] = useState(false);
+  const [mainNavPinned, setMainNavPinned] = useSSRLocalStorage(
+    'pin-nav-tree',
+    true,
+  );
+  const orgsTreeViewState = useSyncedTreeViewState(useNavTreeStateFromURL);
+
+  const workspacesTreeViewState = useSyncedTreeViewState(
+    useWorkspacesNavTreeStateFromURL,
+  );
+
+  const value = useMemo(
+    () => ({
+      open,
+      setOpen,
+      mainNavPinned,
+      setMainNavPinned,
+      orgsTreeViewState: orgsTreeViewState.state,
+      setOrgsTreeViewState: orgsTreeViewState.setState,
+      workspacesTreeViewState: workspacesTreeViewState.state,
+      setWorkspacesTreeViewState: workspacesTreeViewState.setState,
+    }),
+    [
+      open,
+      setOpen,
+      mainNavPinned,
+      setMainNavPinned,
+      orgsTreeViewState.state,
+      orgsTreeViewState.setState,
+      workspacesTreeViewState.state,
+      workspacesTreeViewState.setState,
+    ],
+  );
+
+  return (
+    <TreeNavStateContext.Provider value={value}>
+      {children}
+    </TreeNavStateContext.Provider>
+  );
+}
+
+const useTreeNavState = (): TreeNavStateContextType => {
+  const context = useContext(TreeNavStateContext);
+
+  if (!context) {
+    throw new Error(
+      'useTreeNavState must be used within a TreeNavStateProvider',
+    );
+  }
+
+  return context;
+};
+
+export { TreeNavStateProvider, useTreeNavState };

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

@@ -0,0 +1,495 @@
+import { AIIcon } from '@/components/ui/v2/icons/AIIcon';
+import { ArrowSquareOutIcon } from '@/components/ui/v2/icons/ArrowSquareOutIcon';
+import { CloudIcon } from '@/components/ui/v2/icons/CloudIcon';
+import { DatabaseIcon } from '@/components/ui/v2/icons/DatabaseIcon';
+import { FileTextIcon } from '@/components/ui/v2/icons/FileTextIcon';
+import { GaugeIcon } from '@/components/ui/v2/icons/GaugeIcon';
+import { GraphQLIcon } from '@/components/ui/v2/icons/GraphQLIcon';
+import { HasuraIcon } from '@/components/ui/v2/icons/HasuraIcon';
+import { HomeIcon } from '@/components/ui/v2/icons/HomeIcon';
+import { RocketIcon } from '@/components/ui/v2/icons/RocketIcon';
+import { ServicesIcon } from '@/components/ui/v2/icons/ServicesIcon';
+import { StorageIcon } from '@/components/ui/v2/icons/StorageIcon';
+import { UserIcon } from '@/components/ui/v2/icons/UserIcon';
+import { Link } from '@/components/ui/v2/Link';
+import { Button } from '@/components/ui/v3/button';
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from '@/components/ui/v3/hover-card';
+import { useWorkspaces } from '@/features/orgs/projects/hooks/useWorkspaces';
+import { type Workspace } from '@/features/orgs/projects/hooks/useWorkspaces/useWorkspaces';
+import { useSSRLocalStorage } from '@/hooks/useSSRLocalStorage';
+import { cn } from '@/lib/utils';
+import { Box, ChevronDown, ChevronRight } from 'lucide-react';
+import NextLink from 'next/link';
+import { type ReactElement } from 'react';
+
+import {
+  ControlledTreeEnvironment,
+  Tree,
+  type TreeItem,
+  type TreeItemIndex,
+} from 'react-complex-tree';
+import { useTreeNavState } from './TreeNavStateContext';
+
+const projectPages = [
+  {
+    name: 'Overview',
+    icon: <HomeIcon className="h-4 w-4" />,
+    route: '',
+    slug: 'overview',
+  },
+  {
+    name: 'Database',
+    icon: <DatabaseIcon className="h-4 w-4" />,
+    route: 'database/browser/default',
+    slug: 'database',
+  },
+  {
+    name: 'GraphQL',
+    icon: <GraphQLIcon className="h-4 w-4" />,
+    route: 'graphql',
+    slug: 'graphql',
+  },
+  {
+    name: 'Hasura',
+    icon: <HasuraIcon className="h-4 w-4" />,
+    route: 'hasura',
+    slug: 'hasura',
+  },
+  {
+    name: 'Auth',
+    icon: <UserIcon className="h-4 w-4" />,
+    route: 'users',
+    slug: 'users',
+  },
+  {
+    name: 'Storage',
+    icon: <StorageIcon className="h-4 w-4" />,
+    route: 'storage',
+    slug: 'storage',
+  },
+  {
+    name: 'Run',
+    icon: <ServicesIcon className="h-4 w-4" />,
+    route: 'services',
+    slug: 'services',
+  },
+  {
+    name: 'AI',
+    icon: <AIIcon className="h-4 w-4" />,
+    route: 'ai/auto-embeddings',
+    slug: 'ai',
+  },
+  {
+    name: 'Deployments',
+    icon: <RocketIcon className="h-4 w-4" />,
+    route: 'deployments',
+    slug: 'deployments',
+  },
+  {
+    name: 'Backups',
+    icon: <CloudIcon className="h-4 w-4" />,
+    route: 'backups',
+    slug: 'backups',
+  },
+  {
+    name: 'Logs',
+    icon: <FileTextIcon className="h-4 w-4" />,
+    route: 'logs',
+    slug: 'logs',
+  },
+  {
+    name: 'Metrics',
+    icon: <GaugeIcon className="h-4 w-4" />,
+    route: 'metrics',
+    slug: 'metrics',
+  },
+  {
+    name: 'Settings',
+    route: 'settings/general',
+    slug: 'settings',
+  },
+];
+
+const projectSettingsPages = [
+  { name: 'General', slug: 'general', route: 'general' },
+  {
+    name: 'Compute Resources',
+    slug: 'resources',
+    route: 'resources',
+  },
+  { name: 'Database', slug: 'database', route: 'database' },
+  { name: 'Hasura', slug: 'hasura', route: 'hasura' },
+  {
+    name: 'Authentication',
+    slug: 'authentication',
+    route: 'authentication',
+  },
+  {
+    name: 'Sign-In methods',
+    slug: 'sign-in-methods',
+    route: 'sign-in-methods',
+  },
+  { name: 'Storage', slug: 'storage', route: 'storage' },
+  {
+    name: 'Roles and Permissions',
+    slug: 'roles-and-permissions',
+    route: 'roles-and-permissions',
+  },
+  { name: 'SMTP', slug: 'smtp', route: 'smtp' },
+  { name: 'Git', slug: 'git', route: 'git' },
+  {
+    name: 'Environment Variables',
+    slug: 'environment-variables',
+    route: 'environment-variables',
+  },
+  { name: 'Secrets', slug: 'secrets', route: 'secrets' },
+  {
+    name: 'Custom Domains',
+    slug: 'custom-domains',
+    route: 'custom-domains',
+  },
+  {
+    name: 'Rate Limiting',
+    slug: 'rate-limiting',
+    route: 'rate-limiting',
+  },
+  { name: 'AI', slug: 'ai', route: 'ai' },
+  { name: 'Configuration Editor', slug: 'editor', route: 'editor' },
+];
+
+const createWorkspace = (workspace: Workspace) => {
+  const result = {};
+
+  result[workspace.slug] = {
+    index: workspace.slug,
+    canMove: false,
+    isFolder: true,
+    children: [`${workspace.slug}-overview`, `${workspace.slug}-projects`],
+    data: {
+      name: workspace.name,
+      slug: workspace.slug,
+      type: 'workspace',
+      targetUrl: `/${workspace.slug}`,
+    },
+    canRename: false,
+  };
+
+  result[`${workspace.slug}-overview`] = {
+    index: `${workspace.slug}-overview`,
+    canMove: false,
+    isFolder: false,
+    children: null,
+    data: {
+      name: 'Overview',
+      targetUrl: `/${workspace.slug}`,
+    },
+    canRename: false,
+  };
+
+  result[`${workspace.slug}-projects`] = {
+    index: `${workspace.slug}-projects`,
+    canMove: false,
+    isFolder: true,
+    children: workspace.projects.map((app) => `${workspace.slug}-${app.slug}`),
+    data: {
+      name: 'Projects',
+    },
+    canRename: false,
+  };
+
+  workspace.projects.forEach((app) => {
+    result[`${workspace.slug}-${app.slug}`] = {
+      index: `${workspace.slug}-${app.slug}`,
+      isFolder: true,
+      canMove: false,
+      canRename: false,
+      data: {
+        name: app.name,
+        slug: app.slug,
+        icon: <Box className="h-4 w-4" />,
+        targetUrl: `/${workspace.slug}/${app.slug}`,
+      },
+      children: projectPages.map(
+        (page) => `${workspace.slug}-${app.slug}-${page.slug}`,
+      ),
+    };
+  });
+
+  workspace.projects.forEach((_app) => {
+    projectPages.forEach((_page) => {
+      result[`${workspace.slug}-${_app.slug}-${_page.slug}`] = {
+        index: `${workspace.slug}-${_app.slug}-${_page.slug}`,
+        canMove: false,
+        isFolder: _page.name === 'Settings',
+        children:
+          _page.name === 'Settings'
+            ? projectSettingsPages.map(
+                (p) => `${workspace.slug}-${_app.slug}-settings-${p.slug}`,
+              )
+            : undefined,
+        data: {
+          name: _page.name,
+          icon: _page.icon,
+          isProjectPage: true,
+          targetUrl: `/${workspace.slug}/${_app.slug}/${_page.route}`,
+        },
+        canRename: false,
+      };
+    });
+
+    // add the settings pages
+    projectSettingsPages.forEach((p) => {
+      result[`${workspace.slug}-${_app.slug}-settings-${p.slug}`] = {
+        index: `${workspace.slug}-${_app.slug}-settings-${p.slug}`,
+        canMove: false,
+        isFolder: false,
+        children: undefined,
+        data: {
+          name: p.name,
+          targetUrl: `/${workspace.slug}/${_app.slug}/settings/${p.route}`,
+        },
+        canRename: false,
+      };
+    });
+  });
+
+  return result;
+};
+
+type NavItem = {
+  name: string;
+  slug?: string;
+  type?: string;
+  icon?: ReactElement;
+  targetUrl?: string;
+};
+
+const buildNavTreeData = (
+  workspaces: Workspace[],
+): { items: Record<TreeItemIndex, TreeItem<NavItem>> } => {
+  const navTree = {
+    items: {
+      root: {
+        index: 'root',
+        canMove: false,
+        isFolder: true,
+        children: ['workspaces'],
+        data: { name: 'root' },
+        canRename: false,
+      },
+      workspaces: {
+        index: 'workspaces',
+        canMove: false,
+        isFolder: true,
+        children: workspaces.map((workspace) => workspace.slug),
+        data: { name: 'Workspaces', type: 'workspaces-root' },
+        canRename: false,
+      },
+      ...workspaces.reduce(
+        (acc, workspace) => ({ ...acc, ...createWorkspace(workspace) }),
+        {},
+      ),
+    },
+  };
+
+  return navTree;
+};
+
+export default function WorkspacesNavTree() {
+  const { workspaces } = useWorkspaces();
+  const navTree = buildNavTreeData(workspaces);
+  const [, setLastSlug] = useSSRLocalStorage('slug', null);
+
+  const { workspacesTreeViewState, setWorkspacesTreeViewState, setOpen } =
+    useTreeNavState();
+
+  const renderItem = ({ arrow, context, item, children }) => {
+    const navItemContent = () => (
+      <>
+        {item.data.icon && (
+          <span
+            className={cn(
+              'flex items-start',
+              context.isFocused ? 'text-primary' : '',
+            )}
+          >
+            {item.data.icon}
+          </span>
+        )}
+        <span
+          className={cn(
+            item?.index === 'workspaces' && 'font-bold',
+            context.isFocused ? 'font-bold text-primary' : '',
+            'max-w-40 truncate',
+          )}
+        >
+          {item.data.name}
+        </span>
+        {item.data.type === 'workspaces-root' && (
+          <HoverCard openDelay={0}>
+            <HoverCardTrigger asChild>
+              <div
+                className={cn(
+                  'h-5 rounded-full bg-muted bg-orange-200 px-[6px] text-[10px] dark:bg-orange-500',
+                )}
+              >
+                Legacy
+              </div>
+            </HoverCardTrigger>
+            <HoverCardContent className="w-64" side="top">
+              <div className="whitespace-normal">
+                <span>For more information read the </span>
+                <Link
+                  href="https://nhost.io/blog/organization-billing"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="font-medium"
+                >
+                  announcement
+                  <ArrowSquareOutIcon className="mb-1 ml-1 h-4 w-4" />
+                </Link>
+              </div>
+            </HoverCardContent>
+          </HoverCard>
+        )}
+      </>
+    );
+
+    return (
+      <li
+        {...context.itemContainerWithChildrenProps}
+        className="flex flex-col gap-1"
+      >
+        <div className="flex flex-row items-center">
+          {arrow}
+          <Button
+            asChild
+            onClick={() => {
+              if (item.data.type !== 'workspace') {
+                context.focusItem();
+              } else {
+                // persist last slug if the nav item is a workspace
+                setLastSlug(item.data.slug);
+              }
+            }}
+            className={cn(
+              'flex h-8 w-full flex-row justify-start gap-1 bg-background px-1 text-foreground hover:bg-accent dark:hover:bg-muted',
+              context.isFocused &&
+                'bg-[#ebf3ff] hover:bg-[#ebf3ff] dark:bg-muted',
+              item.data.disabled && 'pointer-events-none opacity-50',
+            )}
+          >
+            {item.data.targetUrl ? (
+              <NextLink
+                href={item.data.targetUrl || '/'}
+                onClick={() => setOpen(false)}
+              >
+                {navItemContent()}
+              </NextLink>
+            ) : (
+              <div className="cursor-pointer">{navItemContent()}</div>
+            )}
+          </Button>
+        </div>
+        <div>{children}</div>
+      </li>
+    );
+  };
+
+  return (
+    <ControlledTreeEnvironment
+      items={navTree.items}
+      getItemTitle={(item) => item.data.name}
+      viewState={{
+        'workspaces-nav-tree': workspacesTreeViewState,
+      }}
+      renderItemTitle={({ title }) => <span>{title}</span>}
+      renderItemArrow={({ item, context }) => {
+        if (!item.isFolder) {
+          return null;
+        }
+
+        return (
+          <Button
+            type="button"
+            variant="ghost"
+            onClick={() => context.toggleExpandedState()}
+            className="h-8 px-1"
+          >
+            {context.isExpanded ? (
+              <ChevronDown className="h-4 w-4 font-bold" strokeWidth={3} />
+            ) : (
+              <ChevronRight className="h-4 w-4" strokeWidth={3} />
+            )}
+          </Button>
+        );
+      }}
+      renderItem={renderItem}
+      renderTreeContainer={({ children, containerProps }) => (
+        <div {...containerProps} className="w-full">
+          {children}
+        </div>
+      )}
+      renderItemsContainer={({ children, containerProps, depth }) => {
+        if (depth === 0) {
+          return (
+            <ul {...containerProps} className="w-full">
+              {children}
+            </ul>
+          );
+        }
+
+        return (
+          <div className="flex w-full flex-row">
+            <div className="flex justify-center px-[12px] pb-3">
+              <div className="h-full w-0 border-r border-dashed" />
+            </div>
+            <ul {...containerProps} className="w-full">
+              {children}
+            </ul>
+          </div>
+        );
+      }}
+      canSearch={false}
+      onExpandItem={(item) => {
+        setWorkspacesTreeViewState(
+          ({ expandedItems: prevExpandedItems, ...rest }) => ({
+            ...rest,
+            // Add item index to expandedItems only if it's not already present
+            expandedItems: prevExpandedItems.includes(item.index)
+              ? prevExpandedItems
+              : [...prevExpandedItems, item.index],
+          }),
+        );
+      }}
+      onCollapseItem={(item) => {
+        setWorkspacesTreeViewState(
+          ({ expandedItems: prevExpandedItems, ...rest }) => ({
+            ...rest,
+            // Remove the item index from expandedItems
+            expandedItems: prevExpandedItems.filter(
+              (index) => index !== item.index,
+            ),
+          }),
+        );
+      }}
+      onFocusItem={(item) => {
+        setWorkspacesTreeViewState((prevViewState) => ({
+          ...prevViewState,
+          // Set the focused item
+          focusedItem: item.index,
+        }));
+      }}
+    >
+      <Tree
+        rootItem="root"
+        treeId="workspaces-nav-tree"
+        treeLabel="Workspaces Navigation Tree"
+      />
+    </ControlledTreeEnvironment>
+  );
+}

dashboard/src/components/layout/MainNav/index.ts

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

dashboard/src/components/layout/OrgProjectLayout/OrgProjectLayout.tsx

@@ -0,0 +1,123 @@
+import type { AuthenticatedLayoutProps } from '@/components/layout/AuthenticatedLayout';
+import { AuthenticatedLayout } from '@/components/layout/AuthenticatedLayout';
+import { DesktopNav } from '@/components/layout/DesktopNav';
+import { LoadingScreen } from '@/components/presentational/LoadingScreen';
+import type { BoxProps } from '@/components/ui/v2/Box';
+import { Box } from '@/components/ui/v2/Box';
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
+import { useNavigationVisible } from '@/features/projects/common/hooks/useNavigationVisible';
+import { useProjectRoutes } from '@/features/projects/common/hooks/useProjectRoutes';
+import { NextSeo } from 'next-seo';
+import { useRouter } from 'next/router';
+import { twMerge } from 'tailwind-merge';
+
+export interface ProjectLayoutProps extends AuthenticatedLayoutProps {
+  /**
+   * Props passed to the internal `<main />` element.
+   */
+  mainContainerProps?: BoxProps;
+}
+
+function ProjectLayoutContent({
+  children,
+  mainContainerProps: {
+    className: mainContainerClassName,
+    ...mainContainerProps
+  } = {},
+}: ProjectLayoutProps) {
+  const { currentProject, loading, error } = useCurrentWorkspaceAndProject();
+
+  const router = useRouter();
+  const shouldDisplayNav = useNavigationVisible();
+  const isPlatform = useIsPlatform();
+  const { nhostRoutes } = useProjectRoutes();
+  const pathWithoutWorkspaceAndProject = router.asPath.replace(
+    /^\/[\w\-_[\]]+\/[\w\-_[\]]+/i,
+    '',
+  );
+  const isRestrictedPath =
+    !isPlatform &&
+    nhostRoutes.some((route) =>
+      pathWithoutWorkspaceAndProject.startsWith(
+        route.relativeMainPath || route.relativePath,
+      ),
+    );
+
+  // useNotFoundRedirect();
+
+  // useEffect(() => {
+  //   if (isPlatform || !router.isReady) {
+  //     return;
+  //   }
+
+  //   TODO // Double check what restricted path means here
+  //   if (isRestrictedPath) {
+  //     router.push('/local/local');
+  //   }
+  // }, [isPlatform, isRestrictedPath, router]);
+
+  if (isRestrictedPath || loading) {
+    return <LoadingScreen />;
+  }
+
+  if (error) {
+    throw error;
+  }
+
+  if (!isPlatform) {
+    return (
+      <>
+        <DesktopNav className="top-0 hidden w-20 shrink-0 flex-col items-start sm:flex" />
+
+        <Box
+          component="main"
+          className={twMerge(
+            'relative flex-auto overflow-y-auto',
+            mainContainerClassName,
+          )}
+          {...mainContainerProps}
+        >
+          {children}
+
+          <NextSeo title="Local App" />
+        </Box>
+      </>
+    );
+  }
+
+  return (
+    <>
+      {shouldDisplayNav && (
+        <DesktopNav className="top-0 hidden w-20 shrink-0 flex-col items-start sm:flex" />
+      )}
+
+      <Box
+        component="main"
+        className={twMerge(
+          'relative flex-auto overflow-y-auto',
+          mainContainerClassName,
+        )}
+        {...mainContainerProps}
+      >
+        {children}
+
+        <NextSeo title={currentProject?.name} />
+      </Box>
+    </>
+  );
+}
+
+export default function OrgProjectLayout({
+  children,
+  mainContainerProps,
+  ...props
+}: ProjectLayoutProps) {
+  return (
+    <AuthenticatedLayout {...props}>
+      <ProjectLayoutContent mainContainerProps={mainContainerProps}>
+        {children}
+      </ProjectLayoutContent>
+    </AuthenticatedLayout>
+  );
+}

dashboard/src/components/layout/OrgProjectLayout/index.ts

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

dashboard/src/components/layout/ProjectLayout/ProjectLayout.tsx

@@ -1,16 +1,14 @@
 import type { AuthenticatedLayoutProps } from '@/components/layout/AuthenticatedLayout';
 import { AuthenticatedLayout } from '@/components/layout/AuthenticatedLayout';
-import { DesktopNav } from '@/components/layout/DesktopNav';
 import { LoadingScreen } from '@/components/presentational/LoadingScreen';
 import type { BoxProps } from '@/components/ui/v2/Box';
 import { Box } from '@/components/ui/v2/Box';
-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 { useNavigationVisible } from '@/features/projects/common/hooks/useNavigationVisible';
-import { useNotFoundRedirect } from '@/features/projects/common/hooks/useNotFoundRedirect';
 import { useProjectRoutes } from '@/features/projects/common/hooks/useProjectRoutes';
 import { NextSeo } from 'next-seo';
 import { useRouter } from 'next/router';
+import { useEffect } from 'react';
 import { twMerge } from 'tailwind-merge';
 
 export interface ProjectLayoutProps extends AuthenticatedLayoutProps {
@@ -27,10 +25,8 @@ function ProjectLayoutContent({
     ...mainContainerProps
   } = {},
 }: ProjectLayoutProps) {
-  const { currentProject, loading, error } = useCurrentWorkspaceAndProject();
-
+  const { project, loading, error } = useProject();
   const router = useRouter();
-  const shouldDisplayNav = useNavigationVisible();
   const isPlatform = useIsPlatform();
   const { nhostRoutes } = useProjectRoutes();
   const pathWithoutWorkspaceAndProject = router.asPath.replace(
@@ -45,18 +41,18 @@ function ProjectLayoutContent({
       ),
     );
 
-  useNotFoundRedirect();
+  // TODO(orgs) 1
+  // useNotFoundRedirect();
 
-  // useEffect(() => {
-  //   if (isPlatform || !router.isReady) {
-  //     return;
-  //   }
+  useEffect(() => {
+    if (isPlatform || !router.isReady) {
+      return;
+    }
 
-  //   TODO // Double check what restricted path means here
-  //   if (isRestrictedPath) {
-  //     router.push('/local/local');
-  //   }
-  // }, [isPlatform, isRestrictedPath, router]);
+    if (isRestrictedPath) {
+      router.push('/local/local');
+    }
+  }, [isPlatform, isRestrictedPath, router]);
 
   if (isRestrictedPath || loading) {
     return <LoadingScreen />;
@@ -68,31 +64,6 @@ function ProjectLayoutContent({
 
   if (!isPlatform) {
     return (
-      <>
-        <DesktopNav className="top-0 hidden w-20 shrink-0 flex-col items-start sm:flex" />
-
-        <Box
-          component="main"
-          className={twMerge(
-            'relative flex-auto overflow-y-auto',
-            mainContainerClassName,
-          )}
-          {...mainContainerProps}
-        >
-          {children}
-
-          <NextSeo title="Local App" />
-        </Box>
-      </>
-    );
-  }
-
-  return (
-    <>
-      {shouldDisplayNav && (
-        <DesktopNav className="top-0 hidden w-20 shrink-0 flex-col items-start sm:flex" />
-      )}
-
       <Box
         component="main"
         className={twMerge(
@@ -102,10 +73,24 @@ function ProjectLayoutContent({
         {...mainContainerProps}
       >
         {children}
-
-        <NextSeo title={currentProject?.name} />
+        <NextSeo title="Local App" />
       </Box>
-    </>
+    );
+  }
+
+  return (
+    <Box
+      component="main"
+      className={twMerge(
+        'relative flex-auto overflow-y-auto',
+        mainContainerClassName,
+      )}
+      {...mainContainerProps}
+    >
+      {children}
+
+      <NextSeo title={project?.name} />
+    </Box>
   );
 }
 

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

@@ -1,98 +1,69 @@
-import type { ProjectLayoutProps } from '@/components/layout/ProjectLayout';
-import { ProjectLayout } from '@/components/layout/ProjectLayout';
-import type { SettingsSidebarProps } from '@/components/layout/SettingsSidebar';
-import { SettingsSidebar } from '@/components/layout/SettingsSidebar';
 import { RetryableErrorBoundary } from '@/components/presentational/RetryableErrorBoundary';
 import { Alert } from '@/components/ui/v2/Alert';
 import { Box } from '@/components/ui/v2/Box';
 import { Text } from '@/components/ui/v2/Text';
+import type { ProjectLayoutProps } from '@/features/orgs/layout/ProjectLayout';
 import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
 import { useTheme } from '@mui/material';
 import { twMerge } from 'tailwind-merge';
 
-export interface SettingsLayoutProps extends ProjectLayoutProps {
-  /**
-   * Props passed to the sidebar component.
-   */
-  sidebarProps?: SettingsSidebarProps;
-}
+export interface SettingsLayoutProps extends ProjectLayoutProps {}
 
-export default function SettingsLayout({
-  children,
-  mainContainerProps: {
-    className: mainContainerClassName,
-    ...mainContainerProps
-  } = {},
-  sidebarProps: { className: sidebarClassName, ...sidebarProps } = {},
-  ...props
-}: SettingsLayoutProps) {
+export default function SettingsLayout({ children }: SettingsLayoutProps) {
   const theme = useTheme();
   const { currentProject } = useCurrentWorkspaceAndProject();
   const hasGitRepo = !!currentProject?.githubRepository;
 
   return (
-    <ProjectLayout
-      mainContainerProps={{
-        className: twMerge('flex h-full', mainContainerClassName),
-        ...mainContainerProps,
-      }}
-      {...props}
+    <Box
+      sx={{ backgroundColor: 'background.default' }}
+      className="flex w-full flex-auto flex-col overflow-y-auto overflow-x-hidden"
     >
-      <SettingsSidebar
-        className={twMerge('w-full max-w-sidebar', sidebarClassName)}
-        {...sidebarProps}
-      />
-
       <Box
         sx={{ backgroundColor: 'background.default' }}
-        className="flex w-full flex-auto flex-col overflow-y-auto overflow-x-hidden"
+        className="flex h-full flex-col"
       >
-        <Box
-          sx={{ backgroundColor: 'background.default' }}
-          className="flex h-full flex-col"
-        >
-          <RetryableErrorBoundary>
-            <div className="flex flex-col space-y-2">
-              {hasGitRepo && (
-                <Alert
-                  severity="warning"
-                  className="grid grid-flow-row place-content-center gap-2"
-                >
-                  <Text color="warning" className="text-sm ">
-                    As you have a connected repository, make sure to synchronize
-                    your changes with{' '}
-                    <code
-                      className={twMerge(
-                        'rounded-md px-2 py-px',
-                        theme.palette.mode === 'dark'
-                          ? 'bg-brown text-copper'
-                          : 'bg-slate-200 text-slate-700',
-                      )}
-                    >
-                      nhost config pull
-                    </code>{' '}
-                    or they may be reverted with the next push.
-                    <br />
-                    If there are multiple projects linked to the same repository
-                    and you only want these changes to apply to a subset of
-                    them, please check out{' '}
-                    <a
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="underline"
-                      href="https://docs.nhost.io/cli/overlays"
-                    >
-                      docs.nhost.io/cli/overlays
-                    </a>{' '}
-                    for guidance.
-                  </Text>
-                </Alert>
-              )}
-            </div>
-            {children}
-          </RetryableErrorBoundary>
-        </Box>
+        <RetryableErrorBoundary>
+          <div className="flex flex-col space-y-2">
+            {hasGitRepo && (
+              <Alert
+                severity="warning"
+                className="grid grid-flow-row place-content-center gap-2"
+              >
+                <Text color="warning" className="text-sm">
+                  As you have a connected repository, make sure to synchronize
+                  your changes with{' '}
+                  <code
+                    className={twMerge(
+                      'rounded-md px-2 py-px',
+                      theme.palette.mode === 'dark'
+                        ? 'bg-brown text-copper'
+                        : 'bg-slate-200 text-slate-700',
+                    )}
+                  >
+                    nhost config pull
+                  </code>{' '}
+                  or they may be reverted with the next push.
+                  <br />
+                  If there are multiple projects linked to the same repository
+                  and you only want these changes to apply to a subset of them,
+                  please check out{' '}
+                  <a
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="underline"
+                    href="https://docs.nhost.io/cli/overlays"
+                  >
+                    docs.nhost.io/cli/overlays
+                  </a>{' '}
+                  for guidance.
+                </Text>
+              </Alert>
+            )}
+          </div>
+          {children}
+        </RetryableErrorBoundary>
       </Box>
-    </ProjectLayout>
+    </Box>
   );
 }

dashboard/src/components/layout/UnauthenticatedLayout/UnauthenticatedLayout.tsx

@@ -59,19 +59,19 @@ export default function UnauthenticatedLayout({
 
         <RetryableErrorBoundary>
           <Box
-            className="flex min-h-screen items-center"
+            className="flex items-center min-h-screen"
             sx={{ backgroundColor: (theme) => theme.palette.common.black }}
           >
             <Container
               rootClassName="bg-transparent h-full"
-              className="grid h-full w-full items-center justify-items-center gap-12 bg-transparent pt-8 pb-12 lg:grid-cols-2 lg:gap-4 lg:pt-0 lg:pb-0"
+              className="grid items-center w-full h-full gap-12 pt-8 pb-12 bg-transparent justify-items-center lg:grid-cols-2 lg:gap-4 lg:pb-0 lg:pt-0"
             >
               <div className="relative z-10 order-2 grid w-full max-w-[544px] grid-flow-row gap-12 lg:order-1">
                 {children}
               </div>
 
               <div className="relative z-0 order-1 flex h-full w-full items-center justify-center md:min-h-[150px] lg:order-2 lg:min-h-[none]">
-                <div className="absolute top-0 left-0 right-0 bottom-0 mx-auto flex h-full w-full max-w-xl items-center justify-center opacity-70">
+                <div className="absolute top-0 bottom-0 left-0 right-0 flex items-center justify-center w-full h-full max-w-xl mx-auto overflow-hidden opacity-70">
                   <Image
                     priority
                     src="/assets/line-grid.svg"

dashboard/src/components/presentational/Logo/Logo.tsx

@@ -11,8 +11,9 @@ function Logo(
   return (
     <svg
       ref={ref}
-      width="32"
-      height="34"
+      width="100%"
+      height="100%"
+      viewBox="0 0 32 34"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       aria-label="Logo of Nhost"

dashboard/src/components/ui/v2/ErrorToast/ErrorToast.tsx

@@ -112,18 +112,24 @@ export default function ErrorToast({
             bounce: 0.1,
           }}
         >
-          <div className="flex w-full flex-row items-center justify-between space-x-4">
-            <button onClick={close} type="button" aria-label="Close">
+          <div className="flex w-full flex-row items-center justify-between gap-4">
+            <button
+              className="flex-shrink-0"
+              onClick={close}
+              type="button"
+              aria-label="Close"
+            >
               <XIcon className="h-4 w-4 text-white" />
             </button>
-            <span>
+            <span className="flex-grow overflow-hidden break-words">
               {msg ?? 'An unkown error has occured, please try again later!'}
             </span>
 
             <button
               type="button"
               onClick={() => setShowInfo(!showInfo)}
-              className="flex flex-row items-center justify-center space-x-2 text-white"
+              className="flex flex-shrink-0 flex-row items-center justify-center space-x-2 text-white"
+              aria-label="Show error details"
             >
               <span>Info</span>
               {showInfo ? (

dashboard/src/components/ui/v2/ThemeProvider/ThemeProvider.tsx

@@ -5,14 +5,21 @@ import CssBaseline from '@mui/material/CssBaseline';
 import GlobalStyles from '@mui/material/GlobalStyles';
 import { ThemeProvider as MaterialThemeProvider } from '@mui/material/styles';
 import Head from 'next/head';
-import type { PropsWithChildren } from 'react';
+import { useEffect, type PropsWithChildren } from 'react';
 
 function ThemeProviderContent({
   children,
   color: manualColor,
 }: PropsWithChildren<{ color?: 'light' | 'dark' }>) {
-  const { color } = useColorPreference();
-  const theme = createTheme(manualColor || color);
+  const { color: preferredColor } = useColorPreference();
+  const theme = createTheme(manualColor || preferredColor);
+
+  // Use effect to set the class on the root html tag
+  useEffect(() => {
+    const rootElement = document.documentElement;
+    rootElement.classList.remove('light', 'dark'); // Remove previous classes
+    rootElement.classList.add(preferredColor); // Add the current class
+  }, [preferredColor]);
 
   return (
     <MaterialThemeProvider theme={theme}>
@@ -22,13 +29,14 @@ function ThemeProviderContent({
           'html, body': {
             backgroundColor: `${theme.palette.background.default} !important`,
           },
+          html: {
+            class: `${preferredColor}`,
+          },
         }}
       />
-
       <Head>
         <meta name="theme-color" content={theme.palette.background.paper} />
       </Head>
-
       {children}
     </MaterialThemeProvider>
   );
@@ -36,9 +44,9 @@ function ThemeProviderContent({
 
 export interface ThemeProviderProps extends PropsWithChildren<unknown> {
   /**
-   * The key used to store the color preference in the local storage.
+   * The key used to store the color preference in local storage.
    *
-   * @default 'color-mode'
+   * @default 'color-preference'
    */
   colorPreferenceStorageKey?: string;
   /**

dashboard/src/components/ui/v2/icons/InfoOutlinedIcon/InfoOutlinedIcon.tsx

@@ -0,0 +1,45 @@
+import type { IconProps } from '@/components/ui/v2/icons';
+import { SvgIcon } from '@/components/ui/v2/icons/SvgIcon';
+import type { ForwardedRef } from 'react';
+import { forwardRef } from 'react';
+
+function InfoOutlinedIcon(props: IconProps, ref: ForwardedRef<SVGSVGElement>) {
+  return (
+    <SvgIcon
+      width="24"
+      height="24"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      aria-label="Info"
+      stroke="currentColor"
+      ref={ref}
+      {...props}
+    >
+      <path
+        fill="none"
+        d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fill="none"
+        d="M12 16V12"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fill="none"
+        d="M12 8H12.01"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </SvgIcon>
+  );
+}
+
+InfoOutlinedIcon.displayName = 'NhostInfoOutlinedIcon';
+
+export default forwardRef(InfoOutlinedIcon);

dashboard/src/components/ui/v2/icons/InfoOutlinedIcon/index.ts

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

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/alert-dialog.tsx

@@ -0,0 +1,139 @@
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import * as React from 'react';
+
+import { buttonVariants } from '@/components/ui/v3/button';
+import { cn } from '@/lib/utils';
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      'fixed inset-0 z-50 bg-black/30 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}
+    ref={ref}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        className,
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col space-y-2 text-center sm:text-left',
+      className,
+    )}
+    {...props}
+  />
+);
+AlertDialogHeader.displayName = 'AlertDialogHeader';
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      className,
+    )}
+    {...props}
+  />
+);
+AlertDialogFooter.displayName = 'AlertDialogFooter';
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold', className)}
+    {...props}
+  />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: 'outline' }),
+      'mt-2 sm:mt-0',
+      className,
+    )}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};

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

@@ -0,0 +1,61 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const alertVariants = cva(
+  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
+  {
+    variants: {
+      variant: {
+        default: 'bg-background text-foreground',
+        destructive:
+          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+));
+Alert.displayName = 'Alert';
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn('mb-1 font-medium leading-none tracking-tight', className)}
+    {...props}
+  >
+    {props.children}
+  </h5>
+));
+AlertTitle.displayName = 'AlertTitle';
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('text-sm [&_p]:leading-relaxed', className)}
+    {...props}
+  />
+));
+AlertDescription.displayName = 'AlertDescription';
+
+export { Alert, AlertTitle, AlertDescription };

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

@@ -0,0 +1,36 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80 dark:text-white',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive:
+          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+        outline: 'text-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };

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

@@ -0,0 +1,115 @@
+import { Slot } from '@radix-ui/react-slot';
+import { ChevronRight, MoreHorizontal } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const Breadcrumb = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<'nav'> & {
+    separator?: React.ReactNode;
+  }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
+Breadcrumb.displayName = 'Breadcrumb';
+
+const BreadcrumbList = React.forwardRef<
+  HTMLOListElement,
+  React.ComponentPropsWithoutRef<'ol'>
+>(({ className, ...props }, ref) => (
+  <ol
+    ref={ref}
+    className={cn(
+      'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-1.5',
+      className,
+    )}
+    {...props}
+  />
+));
+BreadcrumbList.displayName = 'BreadcrumbList';
+
+const BreadcrumbItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentPropsWithoutRef<'li'>
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    className={cn('inline-flex items-center gap-1.5', className)}
+    {...props}
+  />
+));
+BreadcrumbItem.displayName = 'BreadcrumbItem';
+
+const BreadcrumbLink = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<'a'> & {
+    asChild?: boolean;
+  }
+>(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : 'a';
+
+  return (
+    <Comp
+      ref={ref}
+      className={cn('transition-colors hover:text-foreground', className)}
+      {...props}
+    />
+  );
+});
+BreadcrumbLink.displayName = 'BreadcrumbLink';
+
+const BreadcrumbPage = React.forwardRef<
+  HTMLSpanElement,
+  React.ComponentPropsWithoutRef<'span'>
+>(({ className, ...props }, ref) => (
+  <span
+    ref={ref}
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    className={cn('font-normal text-foreground', className)}
+    {...props}
+  />
+));
+BreadcrumbPage.displayName = 'BreadcrumbPage';
+
+const BreadcrumbSeparator = ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<'li'>) => (
+  <li
+    role="presentation"
+    aria-hidden="true"
+    className={cn('[&>svg]:size-3.5', className)}
+    {...props}
+  >
+    {children ?? <ChevronRight />}
+  </li>
+);
+BreadcrumbSeparator.displayName = 'BreadcrumbSeparator';
+
+const BreadcrumbEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn('flex h-9 w-9 items-center justify-center', className)}
+    {...props}
+  >
+    <MoreHorizontal className="w-4 h-4" />
+    <span className="sr-only">More</span>
+  </span>
+);
+BreadcrumbEllipsis.displayName = 'BreadcrumbElipssis';
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};

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

@@ -0,0 +1,56 @@
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-white hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline:
+          'border border-input 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',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };

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

@@ -0,0 +1,28 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }

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

@@ -0,0 +1,153 @@
+import { type DialogProps } from '@radix-ui/react-dialog';
+import { Command as CommandPrimitive } from 'cmdk';
+import { Search } from 'lucide-react';
+import * as React from 'react';
+
+import { Dialog, DialogContent } from '@/components/ui/v3/dialog';
+import { cn } from '@/lib/utils';
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
+      className,
+    )}
+    {...props}
+  />
+));
+Command.displayName = CommandPrimitive.displayName;
+
+interface CommandDialogProps extends DialogProps {}
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="p-0 overflow-hidden shadow-lg">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center px-3 border-b" cmdk-input-wrapper="">
+    <Search className="w-4 h-4 mr-2 opacity-50 shrink-0" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        'flex h-11 w-full rounded-md border-none bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    />
+  </div>
+));
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
+    {...props}
+  />
+));
+
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-sm text-center"
+    {...props}
+  />
+));
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
+      className,
+    )}
+    {...props}
+  />
+));
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 h-px bg-border', className)}
+    {...props}
+  />
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 data-[selected='true']:dark:bg-muted",
+      className,
+    )}
+    {...props}
+  />
+));
+
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        'ml-auto text-xs tracking-widest text-muted-foreground',
+        className,
+      )}
+      {...props}
+    />
+  );
+};
+CommandShortcut.displayName = 'CommandShortcut';
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+};

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

@@ -0,0 +1,121 @@
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      'fixed inset-0 z-[50] 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}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay>
+      <DialogPrimitive.Content
+        ref={ref}
+        className={cn(
+          'relative z-50 grid w-full max-w-lg gap-4 bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg md:w-full',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+          <X className="h-4 w-4" />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogOverlay>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col space-y-1.5 text-center sm:text-left',
+      className,
+    )}
+    {...props}
+  />
+);
+DialogHeader.displayName = 'DialogHeader';
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      className,
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = 'DialogFooter';
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      'text-lg font-semibold leading-none tracking-tight',
+      className,
+    )}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};

dashboard/src/components/ui/v3/dropdown-menu.tsx

@@ -0,0 +1,198 @@
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}

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

@@ -0,0 +1,175 @@
+import type * as LabelPrimitive from '@radix-ui/react-label';
+import { Slot } from '@radix-ui/react-slot';
+import * as React from 'react';
+import type { ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
+import { Controller, FormProvider, useFormContext } from 'react-hook-form';
+
+import { Label } from '@/components/ui/v3/label';
+import { cn } from '@/lib/utils';
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue,
+);
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  const value = React.useMemo(() => ({ name: props.name }), [props.name]);
+
+  return (
+    <FormFieldContext.Provider value={value}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
+};
+
+type FormItemContextValue = {
+  id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue,
+);
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  if (!fieldContext) {
+    throw new Error('useFormField should be used within <FormField>');
+  }
+
+  const { id } = itemContext;
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId();
+
+  const contextValue = React.useMemo(() => ({ id }), [id]);
+
+  return (
+    <FormItemContext.Provider value={contextValue}>
+      <div ref={ref} className={cn('space-y-2', className)} {...props} />
+    </FormItemContext.Provider>
+  );
+});
+FormItem.displayName = 'FormItem';
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField();
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && 'text-destructive', className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
+});
+FormLabel.displayName = 'FormLabel';
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+});
+FormControl.displayName = 'FormControl';
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn('text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  );
+});
+FormDescription.displayName = 'FormDescription';
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message) : children;
+
+  if (!body) {
+    return null;
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn('text-sm font-medium text-destructive', className)}
+      {...props}
+    >
+      {body}
+    </p>
+  );
+});
+FormMessage.displayName = 'FormMessage';
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+};

dashboard/src/components/ui/v3/hover-card.tsx

@@ -0,0 +1,27 @@
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "@/lib/utils"
+
+const HoverCard = HoverCardPrimitive.Root
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }

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

@@ -0,0 +1,35 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+export interface InputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix'> {
+  prefix?: React.ReactNode;
+}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, prefix, ...props }, ref) => {
+    return (
+      <div className="relative flex items-center">
+        {prefix && (
+          <span className="pointer-events-none absolute left-3 flex items-center text-muted-foreground">
+            {prefix}
+          </span>
+        )}
+        <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>
+    );
+  },
+);
+Input.displayName = 'Input';
+
+export { Input };

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

@@ -0,0 +1,24 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }

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

@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent }

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

@@ -0,0 +1,33 @@
+import { cn } from '@/lib/utils';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+import * as React from 'react';
+
+interface ProgressProps
+  extends React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> {
+  indeterminate?: boolean;
+}
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  ProgressProps
+>(({ className, value, indeterminate = false, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      'relative h-4 w-full overflow-hidden rounded-full bg-secondary',
+      className,
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className={cn(
+        'h-full w-full flex-1 rounded-full bg-primary transition-all',
+        indeterminate && 'animate-progress origin-left',
+      )}
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+));
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+export { Progress };

dashboard/src/components/ui/v3/radio-group.tsx

@@ -0,0 +1,42 @@
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  )
+})
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="h-2.5 w-2.5 fill-current text-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+})
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+
+export { RadioGroup, RadioGroupItem }

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

@@ -0,0 +1,158 @@
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Check, ChevronDown, ChevronUp } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="w-4 h-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      'flex cursor-default items-center justify-center py-1',
+      className,
+    )}
+    {...props}
+  >
+    <ChevronUp className="w-4 h-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      'flex cursor-default items-center justify-center py-1',
+      className,
+    )}
+    {...props}
+  >
+    <ChevronDown className="w-4 h-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = 'popper', ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        position === 'popper' &&
+          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        className,
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          'p-1',
+          position === 'popper' &&
+            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="w-4 h-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+};

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

@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }

dashboard/src/components/ui/v3/shadcn-theme-provider.tsx

@@ -0,0 +1,8 @@
+import { ThemeProvider as NextThemesProvider } from 'next-themes';
+import { type ThemeProviderProps } from 'next-themes/dist/types';
+
+export const ShadcnThemeProvider = (
+  props: ThemeProviderProps,
+): React.JSX.Element => {
+  return NextThemesProvider(props) as React.JSX.Element;
+};

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

@@ -0,0 +1,162 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import * as SheetPrimitive from '@radix-ui/react-dialog';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { X } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const Sheet = SheetPrimitive.Root;
+
+const SheetTrigger = SheetPrimitive.Trigger;
+
+const SheetClose = SheetPrimitive.Close;
+
+const SheetPortal = SheetPrimitive.Portal;
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+  // eslint-disable-next-line react/prop-types
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className,
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+
+const sheetVariants = cva(
+  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+  {
+    variants: {
+      side: {
+        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+        bottom:
+          'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+        left: 'left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+        right:
+          'inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+      },
+    },
+    defaultVariants: {
+      side: 'right',
+    },
+  },
+);
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {
+  container?: HTMLElement;
+  hideCloseButton?: boolean;
+}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(
+  (
+    {
+      side = 'right',
+      className,
+      container,
+      hideCloseButton,
+      children,
+      ...props
+    },
+    ref,
+  ) => (
+    <SheetPortal container={container}>
+      <SheetPrimitive.Content
+        ref={ref}
+        className={cn(sheetVariants({ side }), className)}
+        {...props}
+      >
+        {children}
+        {!hideCloseButton && (
+          <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+            <X className="w-4 h-4" />
+            <span className="sr-only">Close</span>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  ),
+);
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+
+function SheetHeader({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        'flex flex-col space-y-2 text-center sm:text-left',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+SheetHeader.displayName = 'SheetHeader';
+
+function SheetFooter({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+SheetFooter.displayName = 'SheetFooter';
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+  // eslint-disable-next-line react/prop-types
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold text-foreground', className)}
+    {...props}
+  />
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+  // eslint-disable-next-line react/prop-types
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};

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

@@ -0,0 +1,117 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

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

@@ -0,0 +1,28 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

dashboard/src/features/ai/DeleteAssistantModal/DeleteAssistantModal.tsx

@@ -4,6 +4,7 @@ import { Checkbox } from '@/components/ui/v2/Checkbox';
 import { Text } from '@/components/ui/v2/Text';
 import { useAdminApolloClient } from '@/features/projects/common/hooks/useAdminApolloClient';
 import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
+// eslint-disable-next-line import/extensions
 import { useDeleteAssistantMutation } from '@/utils/__generated__/graphite.graphql';
 import { type Assistant } from 'pages/[workspaceSlug]/[appSlug]/ai/assistants';
 import { useState } from 'react';

dashboard/src/features/ai/DeleteAutoEmbeddingsModal/DeleteAutoEmbeddingsModal.tsx

@@ -6,6 +6,7 @@ import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/
 import { generateAppServiceUrl } from '@/features/projects/common/utils/generateAppServiceUrl';
 import { getHasuraAdminSecret } from '@/utils/env';
 import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
+// eslint-disable-next-line import/extensions
 import { useDeleteGraphiteAutoEmbeddingsConfigurationMutation } from '@/utils/__generated__/graphite.graphql';
 import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client';
 import { type AutoEmbeddingsConfiguration } from 'pages/[workspaceSlug]/[appSlug]/ai/auto-embeddings';

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

@@ -152,7 +152,7 @@ export default function DevAssistant() {
     }
   };
 
-  if (isPlatform && currentProject?.plan?.isFree) {
+  if (isPlatform && currentProject?.legacyPlan?.isFree) {
     return (
       <Box className="p-4">
         <UpgradeToProBanner
@@ -170,18 +170,18 @@ export default function DevAssistant() {
 
   if (
     (isPlatform &&
-      !currentProject?.plan?.isFree &&
-      !currentProject.config?.ai) ||
+      !currentProject?.legacyPlan?.isFree &&
+      !currentProject?.config?.ai) ||
     !isGraphiteEnabled
   ) {
     return (
       <Box className="p-4">
-        <Alert className="grid w-full grid-flow-col place-content-between items-center gap-2">
+        <Alert className="grid items-center w-full grid-flow-col gap-2 place-content-between">
           <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={`/${currentWorkspace?.slug}/${currentProject?.slug}/settings/ai`}
                 target="_blank"
                 rel="noopener noreferrer"
                 underline="hover"
@@ -197,11 +197,11 @@ export default function DevAssistant() {
   }
 
   return (
-    <div className="flex h-full flex-col overflow-auto">
+    <div className="flex flex-col h-full overflow-auto">
       <MessagesList loading={loading} />
 
       <form onSubmit={handleSubmit}>
-        <Box className="relative flex w-full flex-row justify-between p-2">
+        <Box className="relative flex flex-row justify-between w-full p-2">
           <Input
             value={userInput}
             onChange={(event) => {
@@ -224,7 +224,7 @@ export default function DevAssistant() {
             color="primary"
             aria-label="Send"
             type="submit"
-            className="absolute right-2 h-10 w-12 self-end rounded-xl"
+            className="absolute self-end w-12 h-10 right-2 rounded-xl"
           >
             {loading ? <ActivityIndicator /> : <ArrowUpIcon />}
           </IconButton>

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

@@ -22,14 +22,7 @@ import * as yup from 'yup';
 const smtpValidationSchema = yup
   .object({
     secure: yup.bool().label('SMTP Secure'),
-    host: yup
-      .string()
-      .label('SMTP Host')
-      .matches(
-        /((https?):\/\/)?(www\.)?[a-z0-9]+(\.[a-z]{2,}){1,3}(#[a-zA-Z0-9#]+?)*\/?(\?[a-zA-Z0-9-_]+=[a-zA-Z0-9-%]+&?)?$/,
-        'SMTP Host must be a valid URL',
-      )
-      .required(),
+    host: yup.string().label('SMTP Host').required(),
     port: yup
       .number()
       .typeError('The SMTP port should contain only numbers.')

dashboard/src/features/database/common/hooks/useEstimatedDatabaseMigrationDowntime/useEstimatedDatabaseMigrationDowntime.ts

@@ -63,7 +63,7 @@ export default function useEstimatedDatabaseMigrationDowntime(
 ): TimePeriod {
   const { currentProject } = useCurrentWorkspaceAndProject();
 
-  const isPlanFree = currentProject?.plan?.isFree;
+  const isPlanFree = currentProject?.legacyPlan?.isFree;
 
   const { data, loading, error } = useGetApplicationBackupsQuery({
     ...options,

dashboard/src/features/database/settings/components/DatabaseStorageCapacity/DatabaseStorageCapacity.tsx

@@ -43,7 +43,7 @@ export default function AuthDomain() {
 
   const capacity =
     (data?.config?.postgres?.resources?.storage?.capacity ??
-      currentProject?.plan?.featureMaxDbSize) ||
+      currentProject?.legacyPlan?.featureMaxDbSize) ||
     0;
 
   const [updateConfig] = useUpdateConfigMutation({
@@ -124,7 +124,7 @@ export default function AuthDomain() {
           }}
           className="flex flex-col"
         >
-          {currentProject.plan?.isFree && (
+          {currentProject.legacyPlan?.isFree && (
             <UpgradeNotification message="Unlock by upgrading your project to the Pro plan." />
           )}
           <Box className="grid grid-flow-row lg:grid-cols-5">
@@ -134,7 +134,7 @@ export default function AuthDomain() {
               name="capacity"
               type="number"
               fullWidth
-              disabled={currentProject.plan?.isFree}
+              disabled={currentProject.legacyPlan?.isFree}
               className="lg:col-span-2"
               error={Boolean(formState.errors.capacity?.message)}
               helperText={formState.errors.capacity?.message}
@@ -145,7 +145,7 @@ export default function AuthDomain() {
               }}
             />
           </Box>
-          {!currentProject.plan?.isFree && (
+          {!currentProject.legacyPlan?.isFree && (
             <Alert severity="info" className="col-span-6 text-left">
               Note that volumes can only be increased (not decreased). Also, due
               to an AWS limitation, the same volume can only be increased once

dashboard/src/features/hasura/settings/components/HasuraInferFunctionPermissionsSettings/HasuraInferFunctionPermissionsSettings.tsx

@@ -0,0 +1,145 @@
+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 {
+  GetHasuraSettingsDocument,
+  useGetHasuraSettingsQuery,
+  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';
+
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
+import { useLocalMimirClient } from '@/hooks/useLocalMimirClient';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
+
+const validationSchema = Yup.object({
+  enabled: Yup.boolean(),
+});
+
+export type HasuraInferFunctionPermissionsFormValues = Yup.InferType<
+  typeof validationSchema
+>;
+
+export default function HasuraInferFunctionPermissionsSettings() {
+  const { openDialog } = useDialog();
+  const isPlatform = useIsPlatform();
+  const { maintenanceActive } = useUI();
+  const localMimirClient = useLocalMimirClient();
+  const { currentProject, refetch: refetchWorkspaceAndProject } =
+    useCurrentWorkspaceAndProject();
+  const [updateConfig] = useUpdateConfigMutation({
+    refetchQueries: [GetHasuraSettingsDocument],
+    ...(!isPlatform ? { client: localMimirClient } : {}),
+  });
+
+  const { data, loading, error } = useGetHasuraSettingsQuery({
+    variables: { appId: currentProject?.id },
+    ...(!isPlatform ? { client: localMimirClient } : {}),
+  });
+
+  const { inferFunctionPermissions } = data?.config?.hasura.settings || {};
+
+  const form = useForm<HasuraInferFunctionPermissionsFormValues>({
+    reValidateMode: 'onSubmit',
+    defaultValues: {
+      enabled: inferFunctionPermissions,
+    },
+    resolver: yupResolver(validationSchema),
+  });
+
+  useEffect(() => {
+    if (!loading) {
+      form.reset({
+        enabled: inferFunctionPermissions,
+      });
+    }
+  }, [loading, inferFunctionPermissions, form]);
+
+  if (loading) {
+    return (
+      <ActivityIndicator
+        delay={1000}
+        label="Loading infer function permissions settings..."
+        className="justify-center"
+      />
+    );
+  }
+
+  if (error) {
+    throw error;
+  }
+
+  async function handleSubmit(
+    formValues: HasuraInferFunctionPermissionsFormValues,
+  ) {
+    const updateConfigPromise = updateConfig({
+      variables: {
+        appId: currentProject.id,
+        config: {
+          hasura: {
+            settings: {
+              inferFunctionPermissions: formValues.enabled,
+            },
+          },
+        },
+      },
+    });
+
+    await execPromiseWithErrorToast(
+      async () => {
+        await updateConfigPromise;
+        form.reset(formValues);
+        await refetchWorkspaceAndProject();
+
+        if (!isPlatform) {
+          openDialog({
+            title: 'Apply your changes',
+            component: <ApplyLocalSettingsDialog />,
+            props: {
+              PaperProps: {
+                className: 'max-w-2xl',
+              },
+            },
+          });
+        }
+      },
+      {
+        loadingMessage:
+          'Infer function permission settings are being updated...',
+        successMessage:
+          'Infer function permission settings have been updated successfully.',
+        errorMessage:
+          'An error occurred while trying to update infer function permission settings.',
+      },
+    );
+  }
+
+  return (
+    <FormProvider {...form}>
+      <Form onSubmit={handleSubmit}>
+        <SettingsContainer
+          title="Infer Function Permissions"
+          description="Enable or disable infer function permissions."
+          slotProps={{
+            submitButton: {
+              disabled: !form.formState.isDirty || maintenanceActive,
+              loading: form.formState.isSubmitting,
+            },
+          }}
+          switchId="enabled"
+          docsTitle="enabling or disabling Infer Function Permissions"
+          docsLink="https://hasura.io/docs/2.0/deployment/graphql-engine-flags/reference/#infer-function-permissions"
+          showSwitch
+          className="hidden"
+        />
+      </Form>
+    </FormProvider>
+  );
+}

dashboard/src/features/hasura/settings/components/HasuraInferFunctionPermissionsSettings/index.ts

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

dashboard/src/features/hasura/settings/gql/getHasuraSettings.gql

@@ -11,6 +11,7 @@ query GetHasuraSettings($appId: uuid!) {
         devMode
         corsDomain
         enabledAPIs
+        inferFunctionPermissions
       }
       logs {
         level

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

@@ -0,0 +1,276 @@
+import { Link } from '@/components/ui/v2/Link';
+import { Button } from '@/components/ui/v3/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/v3/dialog';
+import { Input } from '@/components/ui/v3/input';
+
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/v3/form';
+
+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';
+import { planDescriptions } from '@/features/projects/common/utils/planDescriptions';
+import { cn } from '@/lib/utils';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
+import {
+  useCreateOrganizationRequestMutation,
+  usePrefetchNewAppQuery,
+  type PrefetchNewAppPlansFragment,
+} from '@/utils/__generated__/graphql';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useUserData } from '@nhost/nextjs';
+import { DialogDescription } from '@radix-ui/react-dialog';
+import { Plus } from 'lucide-react';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+const createOrgFormSchema = z.object({
+  name: z.string().min(2),
+  plan: z.optional(z.string()),
+});
+
+interface CreateOrgFormProps {
+  plans: PrefetchNewAppPlansFragment[];
+  onSubmit?: ({
+    name,
+    plan,
+  }: z.infer<typeof createOrgFormSchema>) => Promise<void>;
+  onCancel: () => void;
+}
+
+function CreateOrgForm({ plans, onSubmit, onCancel }: CreateOrgFormProps) {
+  const form = useForm<z.infer<typeof createOrgFormSchema>>({
+    resolver: zodResolver(createOrgFormSchema),
+    defaultValues: {
+      name: '',
+      plan: plans[0].id,
+    },
+  });
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+        <FormField
+          control={form.control}
+          name="name"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Organization Name</FormLabel>
+              <FormControl>
+                <Input placeholder="Acme Inc" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="plan"
+          render={({ field }) => (
+            <FormItem className="">
+              <div>
+                <FormLabel>Plan</FormLabel>
+                <FormDescription className="text-xs">
+                  You can change this later
+                </FormDescription>
+              </div>
+              <FormControl>
+                <RadioGroup
+                  onValueChange={field.onChange}
+                  defaultValue={field.value}
+                  className="flex flex-col space-y-1"
+                >
+                  {plans.map((plan) => (
+                    <FormItem key={plan.id}>
+                      <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="text-md font-semibold">
+                              {plan.name}
+                            </div>
+                            <FormDescription className="w-2/3 text-xs">
+                              {planDescriptions[plan.name]}
+                            </FormDescription>
+                          </div>
+                        </div>
+
+                        <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 />
+            </FormItem>
+          )}
+        />
+
+        <div className="flex justify-end space-x-2">
+          <Button
+            variant="secondary"
+            type="button"
+            disabled={form.formState.isSubmitting}
+            onClick={onCancel}
+          >
+            Cancel
+          </Button>
+          <Button type="submit" disabled={form.formState.isSubmitting}>
+            {form.formState.isSubmitting ? (
+              <ActivityIndicator />
+            ) : (
+              'Create organization'
+            )}
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
+}
+
+export default function CreateOrgDialog() {
+  const { maintenanceActive } = useUI();
+  const user = useUserData();
+  const isPlatform = useIsPlatform();
+  const [open, setOpen] = useState(false);
+  const { data, loading, error } = usePrefetchNewAppQuery({
+    skip: !user,
+  });
+  const [createOrganizationRequest] = useCreateOrganizationRequestMutation();
+  const [stripeClientSecret, setStripeClientSecret] = useState('');
+
+  const createOrg = async ({
+    name,
+    plan,
+  }: {
+    name?: string;
+    plan?: string;
+  }) => {
+    await execPromiseWithErrorToast(
+      async () => {
+        const {
+          data: { billingCreateOrganizationRequest: clientSecret },
+        } = await createOrganizationRequest({
+          variables: {
+            organizationName: name,
+            planID: plan,
+            redirectURL: `${window.location.origin}/orgs/verify`,
+          },
+        });
+
+        setStripeClientSecret(clientSecret);
+      },
+      {
+        loadingMessage: 'Redirecting to checkout',
+        successMessage: 'Success',
+        errorMessage: 'An error occurred while redirecting to checkout!',
+      },
+    );
+  };
+
+  if (error) {
+    throw error;
+  }
+
+  if (!isPlatform) {
+    return null;
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button
+          disabled={maintenanceActive}
+          className={cn(
+            'flex h-8 w-full flex-row justify-start gap-3 px-2',
+            'bg-background text-foreground hover:bg-accent dark:hover:bg-muted',
+          )}
+          onClick={() => setStripeClientSecret('')}
+        >
+          <Plus className="h-4 w-4 font-bold" strokeWidth={3} />
+          New Organization
+        </Button>
+      </DialogTrigger>
+      <DialogContent
+        className={cn(
+          'text-foreground sm:max-w-xl',
+          !loading && stripeClientSecret ? 'bg-white text-black' : '',
+        )}
+        onInteractOutside={(e) => e.preventDefault()}
+        onEscapeKeyDown={(e) => e.preventDefault()}
+      >
+        <DialogHeader>
+          <DialogTitle>New Organization</DialogTitle>
+          <DialogDescription />
+        </DialogHeader>
+
+        {loading && (
+          <div className="flex h-52 items-center justify-center">
+            <ActivityIndicator
+              circularProgressProps={{
+                className: 'w-5 h-5',
+              }}
+            />
+          </div>
+        )}
+        {!loading && !stripeClientSecret && (
+          <CreateOrgForm
+            plans={data?.plans}
+            onSubmit={createOrg}
+            onCancel={() => setOpen(false)}
+          />
+        )}
+        {!loading && stripeClientSecret && (
+          <StripeEmbeddedForm clientSecret={stripeClientSecret} />
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

dashboard/src/features/orgs/components/CreateOrgFormDialog/index.ts

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

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

@@ -0,0 +1,222 @@
+import { Button } from '@/components/ui/v3/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/v3/dialog';
+import CreateOrgDialog from '@/features/orgs/components/CreateOrgFormDialog/CreateOrgFormDialog';
+
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/v3/form';
+
+import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
+import { ArrowSquareOutIcon } from '@/components/ui/v2/icons/ArrowSquareOutIcon';
+import { Link } from '@/components/ui/v2/Link';
+import { Badge } from '@/components/ui/v3/badge';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/v3/select';
+import { useOrgs } from '@/features/orgs/projects/hooks/useOrgs';
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { cn } from '@/lib/utils';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
+import { useBillingMigrateProjectToOrganizationMutation } from '@/utils/__generated__/graphql';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { DialogDescription } from '@radix-ui/react-dialog';
+import { CornerRightUp } from 'lucide-react';
+import { useRouter } from 'next/router';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+const migrateFormSchema = z.object({
+  organization: z.string(),
+});
+
+export default function MigrateProjectToOrg() {
+  const { push } = useRouter();
+  const { orgs } = useOrgs();
+  const [open, setOpen] = useState(false);
+  const { currentProject } = useCurrentWorkspaceAndProject();
+  const [migrateProjectToOrg] =
+    useBillingMigrateProjectToOrganizationMutation();
+
+  const form = useForm<z.infer<typeof migrateFormSchema>>({
+    resolver: zodResolver(migrateFormSchema),
+    defaultValues: {
+      organization: '',
+    },
+  });
+
+  const noValidOrg = orgs.every((o) => o.plan.isFree);
+
+  const onSubmit = async (values: z.infer<typeof migrateFormSchema>) => {
+    const { organization } = values;
+
+    await execPromiseWithErrorToast(
+      async () => {
+        await migrateProjectToOrg({
+          variables: {
+            appID: currentProject?.id,
+            organizationID: organization,
+          },
+        });
+
+        const targetOrg = orgs.find((o) => o.id === organization);
+        await push(`/orgs/${targetOrg.slug}/projects`);
+      },
+      {
+        loadingMessage: 'Migrating project',
+        successMessage: 'Success',
+        errorMessage: 'An error occurred while migrating project!',
+      },
+    );
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(value) => {
+        form.reset();
+        setOpen(value);
+      }}
+    >
+      <DialogTrigger asChild>
+        <Button className="flex items-center gap-2 py-1 text-base">
+          Migrate to an Organization
+          <CornerRightUp className="w-5 h-5" />
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="text-foreground sm:max-w-xl">
+        <DialogHeader className="gap-2">
+          <DialogTitle>Migrate project to an Organization</DialogTitle>
+          <DialogDescription className="flex flex-col gap-2 text-sm text-muted-foreground">
+            <span className="mt-4 font-medium">
+              Please read the following information before migrating:
+            </span>
+            <ul className="pl-4 space-y-2 list-disc">
+              <li>
+                A project can only be migrated to an organization in the same or
+                higher plan as the project you are migrating.
+              </li>
+              <li className="mt-4">
+                Any remaining usage credits in your current workspace will be
+                transferred and credited to the target organization.
+              </li>
+              <li className="mt-4">
+                While there is no downtime for stateless services, Postgres
+                requires a restart so plan for 1-2 minutes of downtime.
+              </li>
+            </ul>
+            <div className="flex items-center justify-start gap-1 mt-4">
+              <span>For more information read the</span>
+              <Link
+                href="https://nhost.io/blog/organization-billing"
+                target="_blank"
+                rel="noopener noreferrer"
+                underline="hover"
+                className="font-medium"
+              >
+                announcement
+                <ArrowSquareOutIcon className="w-4 h-4 mb-1 ml-1" />
+              </Link>
+            </div>
+          </DialogDescription>
+        </DialogHeader>
+        {noValidOrg && (
+          <>
+            <span className="text-sm">
+              We couldn&apos;t find a {currentProject.legacyPlan.name}{' '}
+              organization, please create one first.
+            </span>
+            <CreateOrgDialog />
+          </>
+        )}
+        {!noValidOrg && (
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+              <FormField
+                control={form.control}
+                name="organization"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Organization</FormLabel>
+                    <Select
+                      onValueChange={field.onChange}
+                      defaultValue={field.value}
+                    >
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue placeholder="Organization" />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {orgs.map((org) => (
+                          <SelectItem
+                            key={org.id}
+                            value={org.id}
+                            disabled={org.plan.isFree}
+                          >
+                            {org.name}
+                            <Badge
+                              variant={org.plan.isFree ? 'outline' : 'default'}
+                              className={cn(
+                                org.plan.isFree ? 'bg-muted' : '',
+                                'hover:none ml-2 h-5 px-[6px] text-[10px]',
+                              )}
+                            >
+                              {org.plan.name}
+                            </Badge>
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <div className="flex justify-end space-x-2">
+                <Button
+                  variant="secondary"
+                  type="button"
+                  disabled={form.formState.isSubmitting}
+                  onClick={() => {
+                    form.reset();
+                    setOpen(false);
+                  }}
+                >
+                  Cancel
+                </Button>
+                <Button
+                  type="submit"
+                  disabled={
+                    form.formState.isSubmitting || !form.formState.isDirty
+                  }
+                >
+                  {form.formState.isSubmitting ? (
+                    <ActivityIndicator />
+                  ) : (
+                    'Migrate'
+                  )}
+                </Button>
+              </div>
+            </form>
+          </Form>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

dashboard/src/features/orgs/components/MigrateProjectToOrg/index.ts

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

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

@@ -0,0 +1,95 @@
+import { useCurrentOrg } from '@/features/orgs/projects/hooks/useCurrentOrg';
+import { Organization_Status_Enum } from '@/utils/__generated__/graphql';
+import { TriangleAlert } from 'lucide-react';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { useEffect } from 'react';
+
+function StatusBanner({
+  title,
+  description,
+}: {
+  title: string;
+  description: React.ReactNode;
+}) {
+  return (
+    <div className="m-4 rounded-lg bg-destructive p-4 text-white">
+      <div className="flex items-center gap-2">
+        <TriangleAlert className="h-4 w-4" />
+        <h3 className="font-medium">{title}</h3>
+      </div>
+      <p>{description}</p>
+    </div>
+  );
+}
+
+export default function OrgStatus() {
+  const { org } = useCurrentOrg();
+  const { asPath, push } = useRouter();
+
+  useEffect(() => {
+    if (
+      org &&
+      (org.status === Organization_Status_Enum.Disabled ||
+        org?.status === Organization_Status_Enum.Locked)
+    ) {
+      push(`/orgs/${org.slug}/billing`);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [asPath, org]);
+
+  if (!org) {
+    return null;
+  }
+
+  if (org.status === Organization_Status_Enum.AllowanceExceeded) {
+    return (
+      <StatusBanner
+        title="Usage limit has been exceeded for this organization"
+        description="Your project has been paused. You can either migrate it to a paid organization or wait until the billing cycle resets to unpause it."
+      />
+    );
+  }
+
+  if (org.status === Organization_Status_Enum.Cancelled) {
+    return (
+      <StatusBanner
+        title="Subscription is cancelled after multiple failed billing attempts"
+        description={
+          <span>
+            Please open a{' '}
+            <Link
+              href="https://app.nhost.io/support"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="font-bold underline"
+            >
+              support ticket
+            </Link>{' '}
+            if you need to restore access to this organization.
+          </span>
+        }
+      />
+    );
+  }
+
+  if (org.status === Organization_Status_Enum.Disabled) {
+    return (
+      <StatusBanner
+        title="Organization is disabled after multiple failed billing attempts"
+        description="All projects have been paused and new projects cannot be created until a valid payment method is provided and the outstanding invoice is closed."
+      />
+    );
+  }
+
+  if (org.status === Organization_Status_Enum.Locked) {
+    return (
+      <StatusBanner
+        title="Organization is locked due to an outstanding invoice"
+        description="New projects cannot be created until a valid payment method is provided and the outstanding invoice is closed. Your existing projects are not affected."
+      />
+    );
+  }
+
+  return null;
+}

dashboard/src/features/orgs/components/OrgStatus/index.ts

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

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

@@ -0,0 +1,26 @@
+import {
+  EmbeddedCheckout,
+  EmbeddedCheckoutProvider,
+} from '@stripe/react-stripe-js';
+import { loadStripe } from '@stripe/stripe-js';
+
+const stripePromise = process.env.NEXT_PUBLIC_STRIPE_PK
+  ? loadStripe(process.env.NEXT_PUBLIC_STRIPE_PK)
+  : null;
+
+export default function StripeEmbeddedForm({
+  clientSecret,
+}: {
+  clientSecret: string;
+}) {
+  return (
+    <EmbeddedCheckoutProvider
+      stripe={stripePromise}
+      options={{
+        clientSecret,
+      }}
+    >
+      <EmbeddedCheckout />
+    </EmbeddedCheckoutProvider>
+  );
+}

dashboard/src/features/orgs/components/StripeEmbeddedForm/index.ts

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

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

@@ -0,0 +1,32 @@
+import { useUI } from '@/components/common/UIProvider';
+import { SettingsContainer } from '@/components/layout/SettingsContainer';
+import { TransferProjectDialog } from '@/features/orgs/components/common/TransferProjectDialog';
+import { useIsPlatform } from '@/features/orgs/projects/common/hooks/useIsPlatform';
+import { useState } from 'react';
+
+export default function TransferProject() {
+  const isPlatform = useIsPlatform();
+  const { maintenanceActive } = useUI();
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <SettingsContainer
+        title="Transfer Project"
+        description="Move the current project to a different organization."
+        submitButtonText="Transfer"
+        slotProps={{
+          submitButton: {
+            type: 'button',
+            color: 'primary',
+            variant: 'contained',
+            disabled: maintenanceActive || !isPlatform,
+            onClick: () => setOpen(true),
+          },
+        }}
+      />
+
+      <TransferProjectDialog open={open} setOpen={setOpen} />
+    </>
+  );
+}

dashboard/src/features/orgs/components/TransferProject/index.ts

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

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

@@ -0,0 +1,298 @@
+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';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/v3/dialog';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/v3/form';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/v3/radio-group';
+import { useCurrentOrg } from '@/features/orgs/projects/hooks/useCurrentOrg';
+import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
+import { planDescriptions } from '@/features/projects/common/utils/planDescriptions';
+import {
+  useBillingChangeOrganizationPlanMutation,
+  useBillingOrganizationCustomePortalLazyQuery,
+  useGetOrganizationPlansQuery,
+} from '@/utils/__generated__/graphql';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Slash } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+const changeOrgPlanForm = z.object({
+  plan: z.string(),
+});
+
+export default function SubscriptionPlan() {
+  const { maintenanceActive } = useUI();
+  const { org, refetch: refetchOrg } = useCurrentOrg();
+  const [open, setOpen] = useState(false);
+  const [changeOrgPlan] = useBillingChangeOrganizationPlanMutation();
+  const { data: { plans = [] } = {} } = useGetOrganizationPlansQuery();
+  const [fetchOrganizationCustomePortalLink, { loading }] =
+    useBillingOrganizationCustomePortalLazyQuery();
+
+  const form = useForm<z.infer<typeof changeOrgPlanForm>>({
+    resolver: zodResolver(changeOrgPlanForm),
+    defaultValues: {
+      plan: '',
+    },
+  });
+
+  useEffect(() => {
+    if (org) {
+      form.setValue('plan', org?.plan.id, { shouldDirty: false });
+    }
+  }, [form, org]);
+
+  const selectedPlan = form.watch('plan');
+
+  const onSubmit = async (values: z.infer<typeof changeOrgPlanForm>) => {
+    const { plan: planID } = values;
+    const { id: organizationID } = org;
+
+    await execPromiseWithErrorToast(
+      async () => {
+        await changeOrgPlan({
+          variables: {
+            organizationID,
+            planID,
+          },
+        });
+
+        await refetchOrg();
+        form.reset({ plan: planID });
+        setOpen(false);
+      },
+      {
+        loadingMessage: 'Upgrading organization plan',
+        successMessage: 'Organization plan was upgraded successfully',
+        errorMessage:
+          'An error occurred while upgrading the organization plan! Please try again',
+      },
+    );
+  };
+
+  const handleUpdatePaymentDetails = async () => {
+    const { id: organizationID } = org;
+    await execPromiseWithErrorToast(
+      async () => {
+        const { data: { billingOrganizationCustomePortal = null } = {} } =
+          await fetchOrganizationCustomePortalLink({
+            variables: {
+              organizationID,
+            },
+          });
+
+        if (billingOrganizationCustomePortal) {
+          const newWindow = window.open(billingOrganizationCustomePortal);
+          if (!newWindow) {
+            window.location.href = billingOrganizationCustomePortal;
+          }
+        } else {
+          throw new Error('Could not fetch customer portal link');
+        }
+      },
+      {
+        loadingMessage: 'Processing',
+        successMessage: 'Redirecting to customer portal',
+        errorMessage:
+          'An error occurred while redirecting to customer portal! Please try again',
+      },
+    );
+  };
+
+  return (
+    <>
+      <div>
+        <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 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-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>
+              </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 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
+                href="https://nhost.io/pricing"
+                target="_blank"
+                rel="noopener noreferrer"
+                underline="hover"
+                className="font-medium"
+              >
+                pricing
+                <ArrowSquareOutIcon className="mb-[2px] ml-1 h-4 w-4" />
+              </Link>
+            </div>
+            <div className="flex w-full flex-row items-center justify-end gap-2">
+              <Button
+                className="h-fit truncate"
+                variant="secondary"
+                onClick={handleUpdatePaymentDetails}
+                disabled={org?.plan?.isFree || maintenanceActive || loading}
+              >
+                {loading ? (
+                  <ActivityIndicator />
+                ) : (
+                  <span className="truncate">Stripe Customer Portal</span>
+                )}
+              </Button>
+              <Button
+                disabled={org?.plan?.isFree || maintenanceActive}
+                className="h-fit"
+                onClick={() => setOpen(true)}
+              >
+                Upgrade
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="text-foreground sm:max-w-xl">
+          <DialogHeader>
+            <DialogTitle>Upgrade Organization {org?.name}</DialogTitle>
+            <DialogDescription />
+          </DialogHeader>
+
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+              <FormField
+                control={form.control}
+                name="plan"
+                render={({ field }) => (
+                  <FormItem className="">
+                    <div>
+                      <FormLabel>Plan</FormLabel>
+                    </div>
+                    <FormControl>
+                      <RadioGroup
+                        onValueChange={field.onChange}
+                        defaultValue={field.value}
+                        className="flex flex-col space-y-1"
+                      >
+                        {plans.map((plan) => (
+                          <FormItem key={plan.id}>
+                            <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="text-md font-semibold">
+                                    {plan.name}
+                                  </div>
+                                  <FormDescription className="w-2/3 text-xs">
+                                    {planDescriptions[plan.name]}
+                                  </FormDescription>
+                                </div>
+                              </div>
+
+                              <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 />
+                  </FormItem>
+                )}
+              />
+              <DialogFooter>
+                <Button
+                  variant="secondary"
+                  type="button"
+                  disabled={form.formState.isSubmitting}
+                  onClick={() => setOpen(false)}
+                >
+                  Cancel
+                </Button>
+                <Button
+                  type="submit"
+                  disabled={
+                    selectedPlan === org?.plan?.id ||
+                    form.formState.isSubmitting
+                  }
+                >
+                  {form.formState.isSubmitting ? 'Upgrading...' : 'Upgrade'}
+                </Button>
+              </DialogFooter>
+            </form>
+          </Form>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

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

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

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

@@ -0,0 +1,30 @@
+export const getBillingCycleInfo = () => {
+  const now = new Date();
+  const year = now.getFullYear();
+
+  const startOfMonth = new Date(year, now.getMonth(), 1);
+  const endOfMonth = new Date(year, now.getMonth() + 1, 0);
+
+  const options: Intl.DateTimeFormatOptions = {
+    month: 'short',
+    day: 'numeric',
+  };
+  const billingCycleStart = startOfMonth.toLocaleDateString('en-US', options);
+  const billingCycleEnd = endOfMonth.toLocaleDateString('en-US', options);
+
+  const totalDays =
+    (endOfMonth.getTime() - startOfMonth.getTime()) / (1000 * 60 * 60 * 24) + 1;
+  const daysPassed =
+    (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

@@ -0,0 +1,194 @@
+import { Badge } from '@/components/ui/v3/badge';
+import { Button } from '@/components/ui/v3/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/v3/dialog';
+
+import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/v3/form';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/v3/select';
+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 {
+  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';
+
+interface TransferProjectDialogProps {
+  open: boolean;
+  setOpen: (value: boolean) => void;
+}
+
+const transferProjectFormSchema = z.object({
+  organization: z.string(),
+});
+
+export default function TransferProjectDialog({
+  open,
+  setOpen,
+}: TransferProjectDialogProps) {
+  const { push } = useRouter();
+  const currentUserId = useUserId();
+  const { project } = useProject();
+  const { orgs, currentOrg } = useOrgs();
+  const [transferProject] = useBillingTransferAppMutation();
+
+  const form = useForm<z.infer<typeof transferProjectFormSchema>>({
+    resolver: zodResolver(transferProjectFormSchema),
+    defaultValues: {
+      organization: '',
+    },
+  });
+
+  const onSubmit = async (
+    values: z.infer<typeof transferProjectFormSchema>,
+  ) => {
+    const { organization } = values;
+
+    await execPromiseWithErrorToast(
+      async () => {
+        await transferProject({
+          variables: {
+            appID: project?.id,
+            organizationID: organization,
+          },
+        });
+
+        const targetOrg = orgs.find((o) => o.id === organization);
+        await push(`/orgs/${targetOrg.slug}/projects`);
+      },
+      {
+        loadingMessage: 'Transferring project...',
+        successMessage: 'Project transferred successfully!',
+        errorMessage: 'Error transferring project. Please try again.',
+      },
+    );
+  };
+
+  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={(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 organizations, you must be an{' '}
+            <span className="font-bold">ADMIN</span> in both.
+          </DialogDescription>
+        </DialogHeader>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+            <FormField
+              control={form.control}
+              name="organization"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Organization</FormLabel>
+                  <Select
+                    onValueChange={field.onChange}
+                    defaultValue={field.value}
+                  >
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue placeholder="Organization" />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      {orgs.map((org) => (
+                        <SelectItem
+                          key={org.id}
+                          value={org.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
+                            variant={org.plan.isFree ? 'outline' : 'default'}
+                            className={cn(
+                              org.plan.isFree ? 'bg-muted' : '',
+                              'hover:none ml-2 h-5 px-[6px] text-[10px]',
+                            )}
+                          >
+                            {org.plan.name}
+                          </Badge>
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className="flex justify-end space-x-2">
+              <Button
+                variant="secondary"
+                type="button"
+                disabled={form.formState.isSubmitting}
+                onClick={() => {
+                  form.reset();
+                  setOpen(false);
+                }}
+              >
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                disabled={
+                  form.formState.isSubmitting || !form.formState.isDirty
+                }
+              >
+                {form.formState.isSubmitting ? (
+                  <ActivityIndicator />
+                ) : (
+                  'Transfer'
+                )}
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}

dashboard/src/features/orgs/components/common/TransferProjectDialog/index.ts

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

dashboard/src/features/orgs/components/general/components/DeleteOrg/DeleteOrg.tsx

@@ -0,0 +1,148 @@
+import { useUI } from '@/components/common/UIProvider';
+import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@/components/ui/v3/alert-dialog';
+import { Button, buttonVariants } from '@/components/ui/v3/button';
+import { Checkbox } from '@/components/ui/v3/checkbox';
+import { Separator } from '@/components/ui/v3/separator';
+import { useCurrentOrg } from '@/features/orgs/projects/hooks/useCurrentOrg';
+import { useOrgs } from '@/features/orgs/projects/hooks/useOrgs';
+import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
+import { useDeleteOrganizationMutation } from '@/utils/__generated__/graphql';
+import { useRouter } from 'next/router';
+import { useState } from 'react';
+
+export default function DeleteOrg() {
+  const { maintenanceActive } = useUI();
+  const router = useRouter();
+  const { org } = useCurrentOrg();
+  const { refetch: refetchOrgs } = useOrgs();
+  const [deleting, setDeleting] = useState(false);
+  const [deleteCheck1, setDeleteCheck1] = useState(false);
+  const [deleteCheck2, setDeleteCheck2] = useState(false);
+  const [deleteOrgMutation] = useDeleteOrganizationMutation();
+
+  const handleDeleteOrg = async () => {
+    setDeleting(true);
+
+    await execPromiseWithErrorToast(
+      async () => {
+        await deleteOrgMutation({
+          variables: {
+            id: org?.id,
+          },
+          onCompleted: async () => {
+            await refetchOrgs();
+            setDeleting(false);
+            await router.push('/');
+          },
+        });
+      },
+      {
+        loadingMessage: 'Deleting the organization',
+        successMessage: 'Successfully deleted the organization',
+        errorMessage: 'An error occurred while deleting the organization!',
+      },
+    );
+  };
+
+  return (
+    <div className="flex flex-col w-full border rounded-md border-destructive bg-background">
+      <div className="flex flex-col w-full gap-2 p-4 font-medium border-b">
+        <h3>Delete Organization</h3>
+        <p className="text-sm font-normal text-muted-foreground">
+          Proceed with caution, as this action is irreversible and will
+          permanently remove the organization.
+        </p>
+      </div>
+
+      <div className="flex justify-end gap-2 p-2">
+        <AlertDialog>
+          <AlertDialogTrigger asChild>
+            <Button
+              variant="destructive"
+              disabled={deleting || org?.plan?.isFree || maintenanceActive}
+            >
+              Delete
+            </Button>
+          </AlertDialogTrigger>
+          <AlertDialogContent className="flex flex-col w-full max-w-sm gap-6 p-6 text-left text-foreground">
+            <AlertDialogHeader>
+              <AlertDialogTitle>Delete Organization</AlertDialogTitle>
+              <AlertDialogDescription className="flex flex-col gap-1">
+                Are you sure you want to delete this Organization?
+                <span className="font-bold text-red-500">
+                  This cannot be undone.
+                </span>
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+
+            <div className="flex flex-col gap-2">
+              <Separator />
+              <div className="flex items-center space-x-2">
+                <Checkbox
+                  id="delete-check1"
+                  checked={deleteCheck1}
+                  onCheckedChange={(checked) =>
+                    setDeleteCheck1(Boolean(checked))
+                  }
+                />
+                {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+                <label
+                  htmlFor="delete-check1"
+                  className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                >
+                  I&apos;m sure I want to delete this Organization
+                </label>
+              </div>
+              <Separator />
+              <div className="flex items-center space-x-2">
+                <Checkbox
+                  id="delete-check2"
+                  checked={deleteCheck2}
+                  onCheckedChange={(checked) =>
+                    setDeleteCheck2(Boolean(checked))
+                  }
+                />
+                {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+                <label
+                  htmlFor="delete-check2"
+                  className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                >
+                  I understand this action cannot be undone
+                </label>
+              </div>
+              <Separator />
+            </div>
+            <AlertDialogFooter>
+              <AlertDialogCancel disabled={deleting}>Cancel</AlertDialogCancel>
+              <AlertDialogAction
+                onClick={async (e) => {
+                  e.preventDefault();
+                  await handleDeleteOrg();
+                }}
+                className={buttonVariants({ variant: 'destructive' })}
+                disabled={
+                  deleting ||
+                  !(deleteCheck1 && deleteCheck2) ||
+                  maintenanceActive
+                }
+              >
+                {deleting ? <ActivityIndicator /> : 'Delete'}
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      </div>
+    </div>
+  );
+}

dashboard/src/features/orgs/components/general/components/DeleteOrg/index.ts

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