chore: update versions (#3221)

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/apollo@8.0.6

### Patch Changes

-   @nhost/nhost-js@3.2.6

## @nhost/react-apollo@17.0.2

### Patch Changes

-   Updated dependencies [ad57a9e]
    -   @nhost/react@3.10.2
    -   @nhost/apollo@8.0.6

## @nhost/react-urql@14.0.2

### Patch Changes

-   Updated dependencies [ad57a9e]
    -   @nhost/react@3.10.2

## @nhost/hasura-auth-js@2.10.2

### Patch Changes

-   ad57a9e: fix(auth): allow to pass custom headers to signup

## @nhost/nextjs@2.2.5

### Patch Changes

-   Updated dependencies [ad57a9e]
    -   @nhost/react@3.10.2

## @nhost/nhost-js@3.2.6

### Patch Changes

-   Updated dependencies [ad57a9e]
    -   @nhost/hasura-auth-js@2.10.2

## @nhost/react@3.10.2

### Patch Changes

-   ad57a9e: fix(auth): allow to pass custom headers to signup
    -   @nhost/nhost-js@3.2.6

## @nhost/vue@2.9.3

### Patch Changes

-   @nhost/nhost-js@3.2.6

## @nhost/dashboard@2.22.0

# @nhost/dashboard

## 2.17.0

### Minor Changes

-   fd59918: fix: redirect to 404 with nhost cli dashboard

## 2.16.0

### Minor Changes

-   f8e6b61: fix: can add rule groups in table permissions
-   9e404c8: fix: not redirect to 404 page if using local Nhost backend
-   ac4aa01: fix: can delete column in database page
-   4385524: fix: update url to check service health in local dashboard

### Patch Changes

-   @nhost/react-apollo@16.0.1
-   @nhost/nextjs@2.2.2

## 2.15.0

### Minor Changes

- f1052a8: fix: improve stability of the dashboard when pausing projects
-   30daa41: fix: update links to docs in overview page
-   7537237: feat: add image preview toggle in storage

## 2.14.0

### Minor Changes

- d43931e: fix: invalid organization slug/project subdomain doesn't open
404 page
- 5df6fa2: feat: add unencrypted disk warning in storage capacity
settings

### Patch Changes

-   44c1e17: chore: update `msw` to v1.3.5 to fix vulnerabilities
    -   @nhost/react-apollo@16.0.0
    -   @nhost/nextjs@2.2.1

## 2.13.0

### Minor Changes

- 21e90da: chore: remove restrictions on SMTP sender so My Name
[name@acme.com](mailto:name@acme.com) can be added
- 865dd93: fix: duplicate Run placeholders when there is an error in the
backend
- 6902a36: fix: can remove resources if postgres capacity is higher than
10
-   a535aa3: fix: fetch user roles locally in auth section
-   0c50816: fix: allow decimal numbers in database row insert
- aea6d18: chore: add warning when pausing a project about losing Run
services persistent volume data
- d3b4fc3: feat: allow to change postgres settings if project is paused
-   29d27e1: chore: update `next` to v14.2.22 to fix vulnerabilities
-   c9dca09: feat: add reset password form
-   b3bcacb: fix: paused project banner cannot read null project name

### Patch Changes

-   Updated dependencies [46fc520]
-   Updated dependencies [29d27e1]
    -   @nhost/nextjs@2.2.0
    -   @nhost/react-apollo@15.0.1

## 2.12.0

### Minor Changes

- eb95562: fix: show all available permission variables in permission
dropdown select

### Patch Changes

- 8b5c4a0: chore: cleanup layout and add disable duplicate atom key
checking in development mode

## 2.11.3

### Patch Changes

- 714dffa: fix: improve project polling logic and unify usage across
components

## 2.11.2

### Patch Changes

- 6a34f89: fix: improve project polling logic and unify usage across
components

## 2.11.1

### Patch Changes

-   0f6ce52: fix: consolidate useProject hook and fix jwt expired error

## 2.11.0

### Minor Changes

-   cea3ef5: Feat: add org and project placeholders

## 2.10.0

### Minor Changes

-   86ecf27: feat: add support for additional metrics in overview
- 21708be: feat: dashboard: add support for storage buckets to AI
assistants

## 1.30.0

### Minor Changes

- 50441a8: feat: add ui for project autoscaler settings and run services
autoscaler settings

## 1.29.0

### Minor Changes

-   55d8bb5: feat: integrate turnstile for signup verification
-   2a2e54c: fix: update docs url in run services form tooltip
- 18f942f: fix: display long error messages in error toast without
overflow

### Patch Changes

-   @nhost/react-apollo@13.0.0
-   @nhost/nextjs@2.1.22

## 1.28.2

### Patch Changes

- 52a38fe: chore: update dependencies to address security
vulnerabilities
-   Updated dependencies [52a38fe]
    -   @nhost/nextjs@2.1.21

## 1.28.1

### Patch Changes

-   9735fa2: chore: remove broken link

## 1.28.0

### Minor Changes

- 526183a: feat: allow filtering users in "make request as" in graphql
section
-   be3b85b: feat: add conceal errors toggle on auth settings page

### Patch Changes

- 35a2f12: fix: prevent run service details from opening when attempting
to delete
    -   @nhost/react-apollo@12.0.6
    -   @nhost/nextjs@2.1.20

## 1.27.0

### Minor Changes

-   a7cd02c: fix: resolve rate limit query

## 1.26.0

### Minor Changes

-   3773ad7: chore: update pricing information
- b63250d: fix: not allow run service creation form resubmission while
creating a run service
-   a44a1d4: feat: add rate limits settings page

### Patch Changes

-   @nhost/react-apollo@12.0.5
-   @nhost/nextjs@2.1.19

## 1.25.0

### Minor Changes

- d1ceede: feat: add setting to migrate postgres major and/or minor
versions
- e5d3d1a: fix: allow manually typing column for custom check in
database row permissions

### Patch Changes

-   @nhost/react-apollo@12.0.4
-   @nhost/nextjs@2.1.18

## 1.24.1

### Patch Changes

- 49f2e55: fix: use service subdomain in service form and service
details dialog
- 598b988: fix: use current project subdomain in ServiceDetailsDialog
component

## 1.24.0

### Minor Changes

-   abb24af: chore: add redirect to support page when project is locked
- 18a6455: feat: show contact us info and locked reason when project is
locked

### Patch Changes

-   e31eefa: fix: include ingresses field when updating run services

## 1.23.0

### Minor Changes

-   33284d3: fix: don't show double scrollbar in configuration editor

### Patch Changes

-   @nhost/react-apollo@12.0.3
-   @nhost/nextjs@2.1.17

## 1.22.0

### Minor Changes

-   998c037: fix: align drop-down list in select component
- 807b8c0: fix: show city name in region selection for project creation

## 1.21.0

### Minor Changes

- a2efeed: fix: improve project health error handling, add unknown state
and polling interval for health state

## 1.20.0

### Minor Changes

- 8ea4210: fix: error toasts can be closed individually, instead of
dismissing all toasts at once
- 58919ba: chore: add blink animation when project health service is
updating

## 1.19.0

### Minor Changes

- b519862: fix: get configuration in configuration editor using local
development environment

## 1.18.0

### Minor Changes

- 502abad: feat: add services health checks indicators to the overview
page
-   b3ff6ad: chore: update title text on service status modal
- dbadf59: feat: add project configuration TOML editor to the settings
page

## 1.17.0

### Minor Changes

- 77fba27: fix: postgres version validation when activating ai in ai
settings page
-   ac6d1b6: feat: use name instead of awsName

## 1.16.3

### Patch Changes

- 87a37cf: fix: remove unnecessary isPlatform check from verify button
disable logic on custom domains
    -   @nhost/react-apollo@12.0.2
    -   @nhost/nextjs@2.1.16

## 1.16.2

### Patch Changes

- a9413af: fix: update `GetAllWorkspacesAndProjects` query polling to
use exponential backoff
    -   @nhost/react-apollo@12.0.1
    -   @nhost/nextjs@2.1.15

## 1.16.1

### Patch Changes

-   @nhost/react-apollo@12.0.0
-   @nhost/nextjs@2.1.14

## 1.16.0

### Minor Changes

- c6d5c5c: feat: add toggle switch to enable/disable public access in
the database settings

## 1.15.2

### Patch Changes

-   @nhost/react-apollo@11.0.4
-   @nhost/nextjs@2.1.13

## 1.15.1

### Patch Changes

-   @nhost/react-apollo@11.0.3
-   @nhost/nextjs@2.1.12

## 1.15.0

### Minor Changes

-   a7bde37: feat: send metadata in the edit form

### Patch Changes

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

## 1.14.0

### Minor Changes

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

## 1.13.3

### Patch Changes

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

## 1.13.2

### Patch Changes

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

## 1.13.1

### Patch Changes

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

## 1.13.0

### Minor Changes

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

## 1.12.2

### Patch Changes

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

## 1.12.1

### Patch Changes

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

## 1.12.0

### Minor Changes

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

### Patch Changes

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

## 1.11.2

### Patch Changes

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

## 1.11.1

### Patch Changes

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

## 1.11.0

### Minor Changes

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

### Patch Changes

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

## 1.10.0

### Minor Changes

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

### Patch Changes

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

## 1.9.0

### Minor Changes

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

## 1.8.3

### Patch Changes

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

## 1.8.2

### Patch Changes

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

## 1.8.1

### Patch Changes

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

## 1.8.0

### Minor Changes

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

### Patch Changes

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

## 1.7.0

### Minor Changes

-   0d8d0eb: Update docs and dashboard references

## 1.6.9

### Patch Changes

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

## 1.6.8

### Patch Changes

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

## 1.6.7

### Patch Changes

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

## 1.6.6

### Patch Changes

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

## 1.6.5

### Patch Changes

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

## 1.6.4

### Patch Changes

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

## 1.6.3

### Patch Changes

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

## 1.6.2

### Patch Changes

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

## 1.6.1

### Patch Changes

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

## 1.6.0

### Minor Changes

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

## 1.5.0

### Minor Changes

-   c2ef17c0a: feat: add support for new Team plan

## 1.4.0

### Minor Changes

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

### Patch Changes

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

## 1.3.2

### Patch Changes

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

## 1.3.1

### Patch Changes

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

## 1.3.0

### Minor Changes

-   04784d880: Fix graphite's default version

## 1.2.0

### Minor Changes

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

## 1.1.0

### Minor Changes

-   e2b79b5ec: chore: remove sharp from deps

## 1.0.1

### Patch Changes

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

## 1.0.0

### Major Changes

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

### Patch Changes

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

## 0.21.1

### Patch Changes

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

## 0.21.0

### Minor Changes

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

## 0.20.28

### Patch Changes

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

## 0.20.27

### Patch Changes

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

## 0.20.26

### Patch Changes

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

## 0.20.25

### Patch Changes

-   @nhost/react-apollo@5.0.38

## 0.20.24

### Patch Changes

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

## 0.20.23

### Patch Changes

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

## 0.20.22

### Patch Changes

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

## 0.20.21

### Patch Changes

-   3e46d3873: chore: update link to node18 announcement

## 0.20.20

### Patch Changes

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

## 0.20.19

### Patch Changes

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

## 0.20.18

### Patch Changes

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

## 0.20.17

### Patch Changes

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

## 0.20.16

### Patch Changes

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

## 0.20.15

### Patch Changes

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

## 0.20.14

### Patch Changes

-   9fbea9787: feat: add node18 announcement

## 0.20.13

### Patch Changes

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

## 0.20.12

### Patch Changes

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

## 0.20.11

### Patch Changes

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

## 0.20.10

### Patch Changes

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

## 0.20.9

### Patch Changes

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

## 0.20.8

### Patch Changes

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

## 0.20.7

### Patch Changes

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

## 0.20.6

### Patch Changes

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

## 0.20.5

### Patch Changes

-   8d7f84b8d: fix: make announcement adapt to theme

## 0.20.4

### Patch Changes

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

## 0.20.3

### Patch Changes

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

## 0.20.2

### Patch Changes

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

## 0.20.1

### Patch Changes

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

## 0.20.0

### Minor Changes

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

## 0.19.2

### Patch Changes

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

## 0.19.1

### Patch Changes

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

## 0.19.0

### Minor Changes

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

### Patch Changes

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

## 0.18.0

### Minor Changes

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

## 0.17.20

### Patch Changes

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

## 0.17.19

### Patch Changes

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

## 0.17.18

### Patch Changes

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

## 0.17.17

### Patch Changes

-   ea7b102c0: fix(pat): highlight expired tokens

## 0.17.16

### Patch Changes

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

## 0.17.15

### Patch Changes

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

## 0.17.14

### Patch Changes

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

## 0.17.13

### Patch Changes

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

## 0.17.12

### Patch Changes

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

## 0.17.11

### Patch Changes

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

## 0.17.10

### Patch Changes

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

## 0.17.9

### Patch Changes

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

## 0.17.8

### Patch Changes

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

## 0.17.7

### Patch Changes

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

## 0.17.6

### Patch Changes

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

## 0.17.5

### Patch Changes

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

## 0.17.4

### Patch Changes

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

## 0.17.3

### Patch Changes

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

## 0.17.2

### Patch Changes

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

## 0.17.1

### Patch Changes

-   9b0d4dde: feat(secrets): enable secrets

## 0.17.0

### Minor Changes

-   15d84a19: Add postgres 14.6-20230525

## 0.16.14

### Patch Changes

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

## 0.16.13

### Patch Changes

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

## 0.16.12

### Patch Changes

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

## 0.16.11

### Patch Changes

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

## 0.16.10

### Patch Changes

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

## 0.16.9

### Patch Changes

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

## 0.16.8

### Patch Changes

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

## 0.16.7

### Patch Changes

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

## 0.16.6

### Patch Changes

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

## 0.16.5

### Patch Changes

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

## 0.16.4

### Patch Changes

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

## 0.16.3

### Patch Changes

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

## 0.16.2

### Patch Changes

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

## 0.16.1

### Patch Changes

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

## 0.16.0

### Minor Changes

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

### Patch Changes

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

## 0.15.2

### Patch Changes

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

## 0.15.1

### Patch Changes

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

## 0.15.0

### Minor Changes

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

## 0.14.8

### Patch Changes

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

## 0.14.7

### Patch Changes

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

## 0.14.6

### Patch Changes

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

## 0.14.5

### Patch Changes

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

## 0.14.4

### Patch Changes

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

## 0.14.3

### Patch Changes

-   @nhost/react-apollo@5.0.16

## 0.14.2

### Patch Changes

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

## 0.14.1

### Patch Changes

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

## 0.14.0

### Minor Changes

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

### Patch Changes

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

## 0.13.10

### Patch Changes

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

## 0.13.9

### Patch Changes

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

## 0.13.8

### Patch Changes

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

## 0.13.7

### Patch Changes

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

## 0.13.6

### Patch Changes

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

## 0.13.5

### Patch Changes

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

## 0.13.4

### Patch Changes

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

## 0.13.3

### Patch Changes

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

## 0.13.2

### Patch Changes

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

## 0.13.1

### Patch Changes

-   cbb1fc5b: chore(dashboard): cleanup GraphQL operations

## 0.13.0

### Minor Changes

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

### Patch Changes

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

## 0.12.4

### Patch Changes

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

## 0.12.3

### Patch Changes

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

## 0.12.2

### Patch Changes

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

## 0.12.1

### Patch Changes

-   c96d7ccd: fix(dashboard): fix docker builds

## 0.12.0

### Minor Changes

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

### Patch Changes

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

## 0.11.20

### Patch Changes

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

## 0.11.19

### Patch Changes

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

## 0.11.18

### Patch Changes

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

## 0.11.17

### Patch Changes

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

## 0.11.16

### Patch Changes

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

## 0.11.15

### Patch Changes

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

## 0.11.14

### Patch Changes

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

## 0.11.13

### Patch Changes

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

## 0.11.12

### Patch Changes

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

## 0.11.11

### Patch Changes

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

## 0.11.10

### Patch Changes

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

## 0.11.9

### Patch Changes

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

## 0.11.8

### Patch Changes

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

## 0.11.7

### Patch Changes

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

## 0.11.6

### Patch Changes

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

## 0.11.5

### Patch Changes

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

## 0.11.4

### Patch Changes

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

## 0.11.3

### Patch Changes

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

## 0.11.2

### Patch Changes

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

## 0.11.1

### Patch Changes

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

## 0.11.0

### Minor Changes

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

### Patch Changes

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

## 0.10.1

### Patch Changes

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

## 0.10.0

### Minor Changes

-   ed4c7801: chore(dashboard): remove Functions section

## 0.9.10

### Patch Changes

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

## 0.9.9

### Patch Changes

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

## 0.9.8

### Patch Changes

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

## 0.9.7

### Patch Changes

-   c126b20d: fix(dashboard): correct redeployment button

## 0.9.6

### Patch Changes

-   36c3519c: feat(dashboard): retrigger deployments

## 0.9.5

### Patch Changes

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

## 0.9.4

### Patch Changes

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

## 0.9.3

### Patch Changes

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

## 0.9.2

### Patch Changes

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

## 0.9.1

### Patch Changes

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

## 0.9.0

### Minor Changes

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

### Patch Changes

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

## 0.8.1

### Patch Changes

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

## 0.8.0

### Minor Changes

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

### Patch Changes

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

## 0.7.13

### Patch Changes

-   dd0738d5: fix(dashboard): provisioning status polling

## 0.7.12

### Patch Changes

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

## 0.7.11

### Patch Changes

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

## 0.7.10

### Patch Changes

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

## 0.7.9

### Patch Changes

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

## 0.7.8

### Patch Changes

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

    `NhostReactProvider` and `NhostNextProvider` are now deprecated

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

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

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

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

## 0.7.7

### Patch Changes

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

## 0.7.6

### Patch Changes

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

## 0.7.5

### Patch Changes

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

## 0.7.4

### Patch Changes

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

## 0.7.3

### Patch Changes

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

## 0.7.2

### Patch Changes

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

## 0.7.1

### Patch Changes

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

## 0.7.0

### Minor Changes

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

### Patch Changes

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

## 0.6.0

### Minor Changes

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

## 0.5.0

### Minor Changes

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

## 0.4.3

### Patch Changes

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

## 0.4.2

### Patch Changes

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

## 0.4.1

### Patch Changes

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

## 0.4.0

### Minor Changes

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

## 0.3.0

### Minor Changes

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

## 0.2.0

### Minor Changes

-   db118f97: feat(dashboard): generate Docker image

## @nhost/docs@2.29.0

### Minor Changes

-   b40d375: feat: added pitr docs

## @nhost-examples/cli@0.3.19

### Patch Changes

-   @nhost/nhost-js@3.2.6

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

### Patch Changes

-   Updated dependencies [ad57a9e]
    -   @nhost/react@3.10.2
    -   @nhost/react-apollo@17.0.2

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

### Patch Changes

-   Updated dependencies [ad57a9e]
    -   @nhost/react@3.10.2

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

### Patch Changes

-   Updated dependencies [ad57a9e]
    -   @nhost/react@3.10.2
    -   @nhost/react-urql@14.0.2

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

### Patch Changes

-   @nhost/nhost-js@3.2.6

## @nhost-examples/nextjs@0.4.5

### Patch Changes

-   Updated dependencies [ad57a9e]
    -   @nhost/react@3.10.2
    -   @nhost/react-apollo@17.0.2
    -   @nhost/nextjs@2.2.5

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

### Patch Changes

-   @nhost/nhost-js@3.2.6

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

### Patch Changes

-   @nhost/nhost-js@3.2.6

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

### Patch Changes

-   Updated dependencies [ad57a9e]
    -   @nhost/react@3.10.2
    -   @nhost/react-apollo@17.0.2

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

### Patch Changes

-   Updated dependencies [ad57a9e]
    -   @nhost/react@3.10.2

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

### Patch Changes

-   Updated dependencies [ad57a9e]
    -   @nhost/react@3.10.2
    -   @nhost/react-apollo@17.0.2

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

### Patch Changes

-   @nhost/nhost-js@3.2.6
-   @nhost/apollo@8.0.6
-   @nhost/vue@2.9.3

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

### Patch Changes

-   @nhost/apollo@8.0.6
-   @nhost/vue@2.9.3

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

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

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

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

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

.github/workflows/changesets.yaml

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

.github/workflows/ci.yaml

@@ -18,7 +18,6 @@ env:
   TURBO_TEAM: nhost
   NEXT_PUBLIC_ENV: dev
   NEXT_TELEMETRY_DISABLED: 1
-  NEXT_PUBLIC_NHOST_BACKEND_URL: http://localhost:1337
   NHOST_TEST_DASHBOARD_URL: ${{ vars.NHOST_TEST_DASHBOARD_URL }}
   NHOST_TEST_WORKSPACE_NAME: ${{ vars.NHOST_TEST_WORKSPACE_NAME }}
   NHOST_TEST_PROJECT_NAME: ${{ vars.NHOST_TEST_PROJECT_NAME }}
@@ -108,6 +107,9 @@ jobs:
         with:
           TURBO_TOKEN: ${{ env.TURBO_TOKEN }}
           TURBO_TEAM: ${{ env.TURBO_TEAM }}
+      - name: Enforce Prettier formatting in dashboard
+        working-directory: ./dashboard
+        run: pnpm prettier --check "./**/*.tsx" --config prettier.config.js
       # * Run every `lint` script in the workspace . Dependencies build is cached by Turborepo
       - name: Lint
         run: pnpm run lint:all
@@ -132,10 +134,27 @@ jobs:
         with:
           TURBO_TOKEN: ${{ env.TURBO_TOKEN }}
           TURBO_TEAM: ${{ env.TURBO_TEAM }}
+      # * Build Dashboard image to test it locally
+      - name: Build Dashboard local image
+        if: matrix.package.path == 'dashboard'
+        run: |
+          docker build -t nhost/dashboard:0.0.0-dev -f ${{ matrix.package.path }}/Dockerfile .
+          mkdir -p nhost-test-project
       # * Install Nhost CLI if a `nhost/config.yaml` file is found
       - name: Install Nhost CLI
-        if: hashFiles(format('{0}/nhost/config.yaml', matrix.package.path)) != ''
+        if: hashFiles(format('{0}/nhost/config.yaml', matrix.package.path)) != '' && matrix.package.path != 'dashboard'
         uses: ./.github/actions/nhost-cli
+      # * Install Nhost CLI to test Dashboard locally
+      - name: Install Nhost CLI (Local Dashboard tests)
+        timeout-minutes: 5
+        if: matrix.package.path == 'dashboard'
+        uses: ./.github/actions/nhost-cli
+        with:
+          init: 'true' # Initialize the application
+          start: 'true' # Start the application
+          path: ./nhost-test-project
+          wait: 'true' # Wait until the application is ready
+          dashboard-image: 'nhost/dashboard:0.0.0-dev'
       - name: Fetch Dashboard Preview URL
         id: fetch-dashboard-preview-url
         uses: zentered/vercel-preview-url@v1.1.9
@@ -155,6 +174,17 @@ jobs:
       - name: Run e2e tests
         timeout-minutes: 20
         run: pnpm --filter="${{ matrix.package.name }}" run e2e
+      # * Run the `e2e-local` script of the dashboard
+      - name: Run Local Dashboard e2e tests
+        if: matrix.package.path == 'dashboard'
+        timeout-minutes: 5
+        run: |
+          pnpm --filter="${{ matrix.package.name }}" run e2e-local
+
+      - name: Stop Nhost CLI
+        if: matrix.package.path == 'dashboard'
+        working-directory: ./nhost-test-project
+        run: nhost down
       - id: file-name
         if: ${{ failure() }}
         name: Transform package name into a valid file name
@@ -164,7 +194,7 @@ jobs:
       # * Run this step only if the previous step failed, and Playwright generated a report
       - name: Upload Playwright Report
         if: ${{ failure() && hashFiles(format('{0}/playwright-report/**', matrix.package.path)) != ''}}
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: playwright-${{ steps.file-name.outputs.fileName }}
           path: ${{format('{0}/playwright-report/**', matrix.package.path)}}

.github/workflows/dashboard.yaml

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

.github/workflows/deploy-dashboard.yaml

@@ -0,0 +1,58 @@
+name: 'dashboard: release form'
+
+on:
+  workflow_dispatch:
+    inputs:
+      git_ref:
+        type: string
+        description: 'Branch, tag, or commit SHA'
+        required: true
+
+      environment:
+        type: choice
+        description: 'Deployment environment'
+        required: true
+        default: staging
+        options:
+          - staging
+          - production
+
+  workflow_call:
+    inputs:
+      git_ref:
+        required: true
+        type: string
+      environment:
+        required: true
+        type: string
+
+jobs:
+  publish-vercel:
+    name: Publish to Vercel
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ inputs.git_ref }}
+          fetch-depth: 0
+
+      - name: Install Node and dependencies
+        uses: ./.github/actions/install-dependencies
+        with:
+          TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+          TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+
+      - name: Setup Vercel CLI
+        run: pnpm add -g vercel
+
+      - name: Trigger Vercel deployment
+        env:
+          VERCEL_ORG_ID: ${{ secrets.DASHBOARD_VERCEL_TEAM_ID }}
+          VERCEL_PROJECT_ID: ${{ inputs.environment == 'production' && secrets.DASHBOARD_VERCEL_PROJECT_ID || secrets.DASHBOARD_STAGING_VERCEL_PROJECT_ID }}
+        run: |
+          echo "Deploying to: ${{ inputs.environment }}..."
+          vercel pull --environment=production --token=${{ secrets.DASHBOARD_VERCEL_DEPLOY_TOKEN }}
+          vercel build --prod --token=${{ secrets.DASHBOARD_VERCEL_DEPLOY_TOKEN }}
+          vercel deploy --prebuilt --prod --token=${{ secrets.DASHBOARD_VERCEL_DEPLOY_TOKEN }}

.github/workflows/gen_ai_review.yaml

@@ -12,12 +12,11 @@ jobs:
     permissions:
       issues: write
       pull-requests: write
-      contents: write
     name: Run pr agent on every pull request, respond to user comments
     steps:
       - name: PR Agent action step
         id: pragent
-        uses: Codium-ai/pr-agent@v0.24
+        uses: Codium-ai/pr-agent@v0.26
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           OPENAI_KEY: ${{ secrets.OPENAI_API_KEY }}

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

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

.gitignore

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

README.md

@@ -4,7 +4,7 @@
 
 # Nhost
 
-<a href="https://docs.nhost.io/#quickstart">Quickstart</a>
+<a href="https://docs.nhost.io/introduction#quick-start-guides">Quickstart</a>
 <span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
 <a href="http://nhost.io/">Website</a>
 <span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
@@ -15,6 +15,8 @@
 <a href="https://twitter.com/nhost">Twitter</a>
 <span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
 <a href="https://nhost.io/discord">Discord</a>
+<span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
+<a href="https://gurubase.io/g/nhost">Ask Nhost Guru (third party, unofficial)</a>
 <br />
 
   <hr />
@@ -34,7 +36,7 @@ Nhost consists of open source software:
 - Authentication: [Hasura Auth](https://github.com/nhost/hasura-auth/)
 - Storage: [Hasura Storage](https://github.com/nhost/hasura-storage)
 - Serverless Functions: Node.js (JavaScript and TypeScript)
-- [Nhost CLI](https://docs.nhost.io/cli) for local development
+- [Nhost CLI](https://docs.nhost.io/development/cli/overview) for local development
 
 ## Architecture of Nhost
 
@@ -87,12 +89,12 @@ await nhost.graphql.request(`{
 Nhost is frontend agnostic, which means Nhost works with all frontend frameworks.
 
 <div align="center">
-  <a href="https://docs.nhost.io/platform/quickstarts/nextjs"><img src="assets/nextjs.svg"/></a>
+  <a href="https://docs.nhost.io/guides/quickstarts/nextjs"><img src="assets/nextjs.svg"/></a>
   <a href="https://docs.nhost.io/reference/javascript"><img src="assets/nuxtjs.svg"/></a>
-  <a href="https://docs.nhost.io/platform/quickstarts/react"><img src="assets/react.svg"/></a>
+  <a href="https://docs.nhost.io/guides/quickstarts/react"><img src="assets/react.svg"/></a>
   <a href="https://docs.nhost.io/reference/javascript"><img src="assets/react-native.svg"/></a>
   <a href="https://docs.nhost.io/reference/javascript"><img src="assets/svelte.svg"/></a>
-  <a href="https://docs.nhost.io/platform/quickstarts/vue"><img src="assets/vuejs.svg"/></a>
+  <a href="https://docs.nhost.io/guides/quickstarts/vue"><img src="assets/vuejs.svg"/></a>
 </div>
 
 # Resources
@@ -138,7 +140,7 @@ This repository, and most of our other open source projects, are licensed under
 
 Here are some ways of contributing to making Nhost better:
 
-- **[Try out Nhost](https://docs.nhost.io/get-started/quick-start)**, and think of ways to make the service better. Let us know here on GitHub.
+- **[Try out Nhost](https://docs.nhost.io/introduction)**, and think of ways to make the service better. Let us know here on GitHub.
 - Join our [Discord](https://discord.com/invite/9V7Qb2U) and connect with other members to share and learn from.
 - Send a pull request to any of our [open source repositories](https://github.com/nhost) on Github. Check our [contribution guide](https://github.com/nhost/nhost/blob/main/CONTRIBUTING.md) and our [developers guide](https://github.com/nhost/nhost/blob/main/DEVELOPERS.md) for more details about how to contribute. We're looking forward to your contribution!
 
@@ -148,4 +150,4 @@ Here are some ways of contributing to making Nhost better:
   <p align="center">
     <img width="720" src="https://contrib.rocks/image?repo=nhost/nhost" alt="A table of avatars from the project's contributors" />
   </p>
-</a>
+</a>

audit-ci.jsonc

@@ -2,5 +2,5 @@
   // $schema provides code completion hints to IDEs.
   "$schema": "https://github.com/IBM/audit-ci/raw/main/docs/schema.json",
   "moderate": true,
-  "allowlist": ["vue-template-compiler", "micromatch", "path-to-regexp"]
+  "allowlist": ["vue-template-compiler"]
 }

dashboard/.env.example

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

dashboard/.storybook/main.js

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

dashboard/.vscode/settings.json

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

dashboard/CHANGELOG.md

@@ -1,5 +1,109 @@
 # @nhost/dashboard
 
+## 2.17.0
+
+### Minor Changes
+
+- fd59918: fix: redirect to 404 with nhost cli dashboard
+
+## 2.16.0
+
+### Minor Changes
+
+- f8e6b61: fix: can add rule groups in table permissions
+- 9e404c8: fix: not redirect to 404 page if using local Nhost backend
+- ac4aa01: fix: can delete column in database page
+- 4385524: fix: update url to check service health in local dashboard
+
+### Patch Changes
+
+- @nhost/react-apollo@16.0.1
+- @nhost/nextjs@2.2.2
+
+## 2.15.0
+
+### Minor Changes
+
+- f1052a8: fix: improve stability of the dashboard when pausing projects
+- 30daa41: fix: update links to docs in overview page
+- 7537237: feat: add image preview toggle in storage
+
+## 2.14.0
+
+### Minor Changes
+
+- d43931e: fix: invalid organization slug/project subdomain doesn't open 404 page
+- 5df6fa2: feat: add unencrypted disk warning in storage capacity settings
+
+### Patch Changes
+
+- 44c1e17: chore: update `msw` to v1.3.5 to fix vulnerabilities
+  - @nhost/react-apollo@16.0.0
+  - @nhost/nextjs@2.2.1
+
+## 2.13.0
+
+### Minor Changes
+
+- 21e90da: chore: remove restrictions on SMTP sender so My Name <name@acme.com> can be added
+- 865dd93: fix: duplicate Run placeholders when there is an error in the backend
+- 6902a36: fix: can remove resources if postgres capacity is higher than 10
+- a535aa3: fix: fetch user roles locally in auth section
+- 0c50816: fix: allow decimal numbers in database row insert
+- aea6d18: chore: add warning when pausing a project about losing Run services persistent volume data
+- d3b4fc3: feat: allow to change postgres settings if project is paused
+- 29d27e1: chore: update `next` to v14.2.22 to fix vulnerabilities
+- c9dca09: feat: add reset password form
+- b3bcacb: fix: paused project banner cannot read null project name
+
+### Patch Changes
+
+- Updated dependencies [46fc520]
+- Updated dependencies [29d27e1]
+  - @nhost/nextjs@2.2.0
+  - @nhost/react-apollo@15.0.1
+
+## 2.12.0
+
+### Minor Changes
+
+- eb95562: fix: show all available permission variables in permission dropdown select
+
+### Patch Changes
+
+- 8b5c4a0: chore: cleanup layout and add disable duplicate atom key checking in development mode
+
+## 2.11.3
+
+### Patch Changes
+
+- 714dffa: fix: improve project polling logic and unify usage across components
+
+## 2.11.2
+
+### Patch Changes
+
+- 6a34f89: fix: improve project polling logic and unify usage across components
+
+## 2.11.1
+
+### Patch Changes
+
+- 0f6ce52: fix: consolidate useProject hook and fix jwt expired error
+
+## 2.11.0
+
+### Minor Changes
+
+- cea3ef5: Feat: add org and project placeholders
+
+## 2.10.0
+
+### Minor Changes
+
+- 86ecf27: feat: add support for additional metrics in overview
+- 21708be: feat: dashboard: add support for storage buckets to AI assistants
+
 ## 1.30.0
 
 ### Minor Changes

dashboard/Dockerfile

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

dashboard/README.md

@@ -51,13 +51,13 @@ You can connect the Nhost Dashboard to your locally running backend by setting t
 ```bash
 NEXT_PUBLIC_ENV=dev
 NEXT_PUBLIC_NHOST_PLATFORM=false
-NEXT_PUBLIC_NHOST_AUTH_URL=https://local.auth.nhost.run/v1
-NEXT_PUBLIC_NHOST_FUNCTIONS_URL=https://local.functions.nhost.run/v1
-NEXT_PUBLIC_NHOST_GRAPHQL_URL=https://local.graphql.nhost.run/v1
-NEXT_PUBLIC_NHOST_STORAGE_URL=https://local.storage.nhost.run/v1
-NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL=https://local.hasura.nhost.run
-NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL=https://local.hasura.nhost.run/v1/migrations
-NEXT_PUBLIC_NHOST_HASURA_API_URL=https://local.hasura.nhost.run
+NEXT_PUBLIC_NHOST_AUTH_URL=https://local.auth.local.nhost.run/v1
+NEXT_PUBLIC_NHOST_FUNCTIONS_URL=https://local.functions.local.nhost.run/v1
+NEXT_PUBLIC_NHOST_GRAPHQL_URL=https://local.graphql.local.nhost.run/v1
+NEXT_PUBLIC_NHOST_STORAGE_URL=https://local.storage.local.nhost.run/v1
+NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL=https://local.hasura.local.nhost.run
+NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL=https://local.hasura.local.nhost.run/v1/migrations
+NEXT_PUBLIC_NHOST_HASURA_API_URL=https://local.hasura.local.nhost.run
 ```
 
 This will connect the Nhost Dashboard to your locally running Nhost backend.
@@ -100,7 +100,6 @@ pnpm storybook --port 6007
 
 | Name                                    | Description                                                                                 |
 | --------------------------------------- | ------------------------------------------------------------------------------------------- |
-| `NEXT_PUBLIC_NHOST_BACKEND_URL`         | Backend URL. This is only used if `NEXT_PUBLIC_NHOST_PLATFORM` is `true`.                   |
 | `NEXT_PUBLIC_STRIPE_PK`                 | Stripe public key. This is only used if `NEXT_PUBLIC_NHOST_PLATFORM` is `true`.             |
 | `NEXT_PUBLIC_GITHUB_APP_INSTALL_URL`    | URL of the GitHub application. This is only used if `NEXT_PUBLIC_NHOST_PLATFORM` is `true`. |
 | `NEXT_PUBLIC_ANALYTICS_WRITE_KEY`       | Analytics key. This is only used if `NEXT_PUBLIC_NHOST_PLATFORM` is `true`.                 |

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

@@ -0,0 +1,43 @@
+import { TEST_ORGANIZATION_SLUG, TEST_PROJECT_SUBDOMAIN } from '@/e2e/env';
+import { createUser, generateTestEmail } from '@/e2e/utils';
+import { faker } from '@faker-js/faker';
+import type { Page } from '@playwright/test';
+import test, { expect } from '@playwright/test';
+
+let page: Page;
+
+test.beforeAll(async ({ browser }) => {
+  page = await browser.newPage();
+});
+
+test.beforeEach(async () => {
+  const authUrl = `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/users`;
+  await page.goto(authUrl);
+  await page.waitForURL(authUrl, { waitUntil: 'networkidle' });
+});
+
+test.afterAll(async () => {
+  await page.close();
+});
+
+test('should be able to edit user roles from the details page', async () => {
+  const email = generateTestEmail();
+  const password = faker.internet.password();
+
+  await createUser({ page, email, password });
+
+  await page
+    .getByRole('button', { name: `View ${email}`, exact: true })
+    .click();
+
+  await page.locator('#defaultRole').click();
+  await page.getByRole('option', { name: /anonymous/i }).click();
+
+  await page.getByLabel('anonymous').click();
+
+  await page.getByRole('button', { name: /save/i }).click();
+
+  await expect(
+    page.getByText('User settings have been updated successfully.'),
+  ).toBeVisible();
+});

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

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

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

@@ -66,6 +66,7 @@ test('should delete a table', async () => {
 });
 
 test('should not be able to delete a table if other tables have foreign keys referencing it', async () => {
+  test.setTimeout(60000);
   await page.getByRole('button', { name: /new table/i }).click();
   await expect(page.getByText(/create a new table/i)).toBeVisible();
 

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

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

dashboard/e2e/teardown/database.teardown.ts

@@ -0,0 +1,61 @@
+import {
+  TEST_DASHBOARD_URL,
+  TEST_ORGANIZATION_SLUG,
+  TEST_PROJECT_SUBDOMAIN,
+} from '@/e2e/env';
+import { navigateToProject } from '@/e2e/utils';
+import { type Page, expect, test as teardown } from '@playwright/test';
+
+let page: Page;
+
+teardown.beforeAll(async ({ browser }) => {
+  const context = await browser.newContext({
+    baseURL: TEST_DASHBOARD_URL,
+    storageState: 'e2e/.auth/user.json',
+  });
+
+  page = await context.newPage();
+});
+
+teardown.beforeEach(async () => {
+  await page.goto('/');
+
+  await navigateToProject({
+    page,
+    orgSlug: TEST_ORGANIZATION_SLUG,
+    projectSubdomain: TEST_PROJECT_SUBDOMAIN,
+  });
+
+  const databaseRoute = `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default`;
+  await page.goto(databaseRoute);
+  await page.waitForURL(databaseRoute);
+});
+
+teardown.afterAll(async () => {
+  await page.close();
+});
+
+teardown('clean up database tables', async () => {
+  await page.getByRole('link', { name: /sql editor/i }).click();
+
+  await page.waitForURL(
+    `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default/editor`,
+  );
+
+  const inputField = page.locator('[contenteditable]');
+  await inputField.fill(`
+      DO $$ DECLARE
+        tablename text;
+      BEGIN
+        FOR tablename IN
+          SELECT table_name FROM information_schema.tables
+          WHERE table_schema = 'public'
+        LOOP
+          EXECUTE 'DROP TABLE IF EXISTS public.' || quote_ident(tablename) || ' CASCADE';
+        END LOOP;
+      END $$;
+    `);
+
+  await page.locator('button[type="button"]', { hasText: /run/i }).click();
+  await expect(page.getByText(/success/i)).toBeVisible();
+});

dashboard/e2e/utils.ts

@@ -191,3 +191,23 @@ export function generateTestEmail(prefix: string = 'Nhost_Test_') {
 
   return [prefix, email].join('');
 }
+
+export async function clickPermissionButton({
+  page,
+  role,
+  permission,
+}: {
+  page: Page;
+  role: string;
+  permission: 'Insert' | 'Select' | 'Update' | 'Delete';
+}) {
+  const permissionIndex =
+    ['Insert', 'Select', 'Update', 'Delete'].indexOf(permission) + 1;
+
+  await page
+    .locator('tr', { hasText: role })
+    .locator('td')
+    .nth(permissionIndex)
+    .locator('button')
+    .click();
+}

dashboard/global-teardown.ts

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

dashboard/graphite.graphql.config.yaml

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

dashboard/next.config.js

@@ -7,7 +7,7 @@ const { version } = require('./package.json');
 const cspHeader = `
     default-src 'self' *.nhost.run ws://*.nhost.run nhost.run ws://nhost.run;
     script-src 'self' 'unsafe-eval' 'unsafe-inline' cdn.segment.com js.stripe.com;
-    connect-src 'self' *.nhost.run ws://*.nhost.run nhost.run ws://nhost.run discord.com;
+    connect-src 'self' *.nhost.run ws://*.nhost.run nhost.run ws://nhost.run discord.com api.segment.io api.segment.com cdn.segment.com;
     style-src 'self' 'unsafe-inline';
     img-src 'self' blob: data: avatars.githubusercontent.com s.gravatar.com *.nhost.run nhost.run;
     font-src 'self' data:;
@@ -16,6 +16,8 @@ const cspHeader = `
     form-action 'self';
     frame-ancestors 'none';
     frame-src 'self' js.stripe.com;
+    block-all-mixed-content;
+    upgrade-insecure-requests;
 `;
 
 module.exports = withBundleAnalyzer({
@@ -36,9 +38,13 @@ module.exports = withBundleAnalyzer({
       {
         source: '/(.*)',
         headers: [
+          {
+            key: 'Content-Security-Policy',
+            value: cspHeader.replace(/\s+/g, ' ').trim(),
+          },
           {
             key: 'X-Frame-Options',
-            value: 'SAMEORIGIN',
+            value: 'DENY',
           },
         ],
       },

dashboard/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@nhost/dashboard",
-  "version": "2.7.1",
+  "version": "2.22.0",
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
-    "dev": "next dev",
+    "dev": "RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED=false next dev",
     "build": "next build --no-lint",
     "analyze": "ANALYZE=true pnpm build --no-lint",
     "start": "next start",
@@ -16,13 +16,15 @@
     "storybook": "start-storybook -p 6006 -s public",
     "build-storybook": "build-storybook",
     "install-browsers": "pnpm playwright install && pnpm playwright install-deps",
-    "e2e": "pnpm install-browsers && pnpm playwright test"
+    "e2e": "pnpm install-browsers && pnpm playwright test --config=playwright.config.ts",
+    "e2e-local": "pnpm install-browsers && pnpm playwright test --config=playwright.local.config.ts"
   },
   "dependencies": {
     "@apollo/client": "^3.9.9",
     "@codemirror/lang-sql": "^6.6.2",
     "@codemirror/language": "^6.10.1",
     "@codemirror/legacy-modes": "^6.4.0",
+    "@date-fns/tz": "^1.2.0",
     "@emotion/cache": "^11.11.0",
     "@emotion/react": "^11.11.4",
     "@emotion/server": "^11.11.0",
@@ -55,24 +57,25 @@
     "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.3",
     "@radix-ui/react-tooltip": "^1.1.2",
-    "@segment/snippet": "^4.16.2",
+    "@segment/analytics-next": "^1.77.0",
     "@stripe/react-stripe-js": "^2.6.2",
     "@stripe/stripe-js": "^1.54.2",
     "@tailwindcss/forms": "^0.5.7",
     "@tanstack/react-query": "^4.36.1",
     "@tanstack/react-table": "^8.15.3",
-    "@tanstack/react-virtual": "^3.2.0",
+    "@tanstack/react-virtual": "^3.5.0",
     "@uidotdev/usehooks": "^2.4.1",
     "@uiw/codemirror-theme-bbedit": "^4.22.2",
     "@uiw/codemirror-theme-github": "^4.21.25",
     "@uiw/react-codemirror": "^4.21.25",
-    "analytics-node": "^6.2.0",
     "bcryptjs": "^2.4.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^1.2.1",
     "cmdk": "1.0.0",
     "date-fns": "^2.30.0",
+    "date-fns-v4": "npm:date-fns@4.1.0",
     "dequal": "^2.0.3",
     "framer-motion": "^10.18.0",
     "generate-password": "^1.7.1",
@@ -84,7 +87,7 @@
     "just-kebab-case": "^4.2.0",
     "lodash.debounce": "^4.0.8",
     "lucide-react": "^0.416.0",
-    "next": "^14.2.10",
+    "next": "^14.2.22",
     "next-nprogress-bar": "^2.3.13",
     "next-seo": "^6.5.0",
     "next-themes": "^0.3.0",
@@ -93,6 +96,7 @@
     "react": "18.2.0",
     "react-children-utilities": "^2.10.0",
     "react-complex-tree": "^2.4.5",
+    "react-day-picker": "8.10.1",
     "react-dom": "18.2.0",
     "react-error-boundary": "^4.0.13",
     "react-hook-form": "^7.53.0",
@@ -113,6 +117,7 @@
     "stripe": "^10.17.0",
     "tailwind-merge": "^1.14.0",
     "tailwindcss-animate": "^1.0.7",
+    "timezones-list": "^3.1.0",
     "utility-types": "^3.11.0",
     "uuid": "^9.0.1",
     "validator": "^13.11.0",
@@ -177,13 +182,13 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "jsdom": "^22.1.0",
     "lint-staged": "^15.2.2",
-    "msw": "^1.3.3",
+    "msw": "^1.3.5",
     "msw-storybook-addon": "^1.10.0",
     "node-fetch": "^3.3.2",
     "postcss": "^8.4.38",
-    "prettier": "^3.3.3",
+    "prettier": "^3.4.2",
     "prettier-plugin-organize-imports": "^4.1.0",
-    "prettier-plugin-tailwindcss": "^0.6.6",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "react-date-fns-hooks": "^0.9.4",
     "require-from-string": "^2.0.2",
     "snake-case": "^3.0.4",
@@ -191,7 +196,7 @@
     "tailwindcss": "^3.4.12",
     "ts-node": "^10.9.2",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
-    "vite": "^5.4.6",
+    "vite": "^5.4.12",
     "vite-tsconfig-paths": "^4.3.2",
     "vitest": "^0.32.4"
   },

dashboard/playwright.config.ts

@@ -6,16 +6,15 @@ dotenv.config({ path: path.resolve(__dirname, '.env.test') });
 
 export default defineConfig({
   testDir: './e2e',
-  timeout: 40 * 1000,
+  timeout: 60 * 1000,
   expect: {
-    timeout: 5000,
+    timeout: 10000,
   },
   fullyParallel: false,
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
   workers: 1,
   reporter: 'html',
-  globalTeardown: require.resolve('./global-teardown'),
   use: {
     actionTimeout: 0,
     trace: 'on-first-retry',
@@ -28,6 +27,11 @@ export default defineConfig({
     {
       name: 'setup',
       testMatch: ['**/setup/*.setup.ts'],
+      teardown: 'teardown',
+    },
+    {
+      name: 'teardown',
+      testMatch: ['**/teardown/*.teardown.ts'],
     },
     {
       name: 'chromium',
@@ -36,6 +40,7 @@ export default defineConfig({
         storageState: 'e2e/.auth/user.json',
       },
       dependencies: ['setup'],
+      grepInvert: [/Local Dashboard CLI e2e tests/],
     },
   ],
 });

dashboard/playwright.local.config.ts

@@ -0,0 +1,31 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './e2e',
+  timeout: 30 * 1000,
+  expect: {
+    timeout: 5000,
+  },
+  fullyParallel: false,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: 1,
+  reporter: 'html',
+  use: {
+    actionTimeout: 0,
+    trace: 'on-first-retry',
+    baseURL: '', // Local dashboard URL
+    launchOptions: {
+      slowMo: 500,
+    },
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+      },
+      testMatch: ['**/e2e/cli-local-dashboard/**'],
+    },
+  ],
+});

dashboard/src/components/analytics/analytics.tsx

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

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

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

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

@@ -18,7 +18,7 @@ export default function FeedbackForm({
   return (
     <div
       className={twMerge(
-        'grid max-w-md grid-flow-row gap-2 py-4 px-5',
+        'grid max-w-md grid-flow-row gap-2 px-5 py-4',
         className,
       )}
       {...props}

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

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

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

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

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

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

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

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

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

@@ -60,7 +60,7 @@ export default function InviteNotification() {
 
   const handleInviteAccept = async (
     _event: React.SyntheticEvent<HTMLButtonElement>,
-    invite: typeof data.workspaceMemberInvites[number],
+    invite: (typeof data.workspaceMemberInvites)[number],
   ) => {
     setSubmitState({
       error: null,
@@ -99,7 +99,7 @@ export default function InviteNotification() {
   };
 
   async function handleIgnoreInvitation(
-    inviteId: typeof data.workspaceMemberInvites[number]['id'],
+    inviteId: (typeof data.workspaceMemberInvites)[number]['id'],
   ) {
     setIgnoreState({
       loading: true,
@@ -151,7 +151,7 @@ export default function InviteNotification() {
       }}
     >
       {data?.workspaceMemberInvites?.map(
-        (invite: typeof data.workspaceMemberInvites[number]) => (
+        (invite: (typeof data.workspaceMemberInvites)[number]) => (
           <div key={invite.id} className="grid grid-flow-row gap-4 text-center">
             <div className="grid grid-flow-row gap-1">
               <Text variant="h3" component="h2" sx={{ color: 'common.white' }}>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,34 @@
+import { VirtualizedCombobox } from '@/components/common/VirtualizedCombobox';
+import { createTimezoneOptions } from '@/utils/timezoneUtils';
+import { memo, useMemo } from 'react';
+
+interface Props {
+  selectedTimezone: string;
+  onTimezoneSelect: (timezone: { value: string; label: string }) => void;
+  button?: React.JSX.Element;
+  dateTime: string;
+}
+
+function TimezonePicker({
+  selectedTimezone,
+  onTimezoneSelect,
+  button,
+  dateTime,
+}: Props) {
+  const timezoneOptions = useMemo(
+    () => createTimezoneOptions(dateTime),
+    [dateTime],
+  );
+  return (
+    <VirtualizedCombobox
+      options={timezoneOptions}
+      selectedOption={selectedTimezone}
+      onSelectOption={onTimezoneSelect}
+      searchPlaceholder="Search timezones..."
+      button={button}
+      side="right"
+    />
+  );
+}
+
+export default memo(TimezonePicker);

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

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

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

@@ -1,14 +1,13 @@
-import { useDialog } from '@/components/common/DialogProvider';
 import { NhostIcon } from '@/components/presentational/NhostIcon';
 import { Box } from '@/components/ui/v2/Box';
-import { Button } from '@/components/ui/v2/Button';
 import { ArrowSquareOutIcon } from '@/components/ui/v2/icons/ArrowSquareOutIcon';
 import { Link } from '@/components/ui/v2/Link';
 import { Text } from '@/components/ui/v2/Text';
 import { TransferProjectDialog } from '@/features/orgs/components/common/TransferProjectDialog';
-import { useIsCurrentUserOwner } from '@/features/orgs/projects/common/hooks/useIsCurrentUserOwner';
 import { useState } from 'react';
 
+import { OpenTransferDialogButton } from '@/components/common/OpenTransferDialogButton';
+
 import Image from 'next/image';
 import { type ReactNode } from 'react';
 
@@ -21,11 +20,11 @@ export default function UpgradeToProBanner({
   title,
   description,
 }: UpgradeToProBannerProps) {
-  const isOwner = useIsCurrentUserOwner();
-  const { openAlertDialog } = useDialog();
   const [transferProjectDialogOpen, setTransferProjectDialogOpen] =
     useState(false);
 
+  const handleTransferDialogOpen = () => setTransferProjectDialogOpen(true);
+
   return (
     <Box
       sx={{ backgroundColor: 'primary.light' }}
@@ -51,29 +50,7 @@ export default function UpgradeToProBanner({
         </div>
 
         <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="max-w-xs lg:w-auto"
-            onClick={() => {
-              if (isOwner) {
-                setTransferProjectDialogOpen(true);
-              } else {
-                openAlertDialog({
-                  title: "You can't migrate this project",
-                  payload: (
-                    <Text variant="subtitle1" component="span">
-                      Ask an owner of this organization to migrate the project.
-                    </Text>
-                  ),
-                  props: {
-                    secondaryButtonText: 'I understand',
-                    hidePrimaryAction: true,
-                  },
-                });
-              }
-            }}
-          >
-            Transfer Project
-          </Button>
+          <OpenTransferDialogButton onClick={handleTransferDialogOpen} />
           <TransferProjectDialog
             open={transferProjectDialogOpen}
             setOpen={setTransferProjectDialogOpen}

dashboard/src/components/common/VirtualizedCombobox/VirtualizedCombobox.tsx

@@ -0,0 +1,252 @@
+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 { useVirtualizer } from '@tanstack/react-virtual';
+import { Check, ChevronsUpDown } from 'lucide-react';
+import * as React from 'react';
+
+type Option = {
+  value: string;
+  label: string;
+  key?: string;
+};
+
+interface VirtualizedCommandProps<O extends Option> {
+  height: string;
+  options: O[];
+  placeholder: string;
+  selectedOption: string;
+  onSelectOption?: (option: O) => void;
+  emptyText?: string;
+}
+
+function VirtualizedCommand<O extends Option>({
+  height,
+  options,
+  placeholder,
+  selectedOption,
+  onSelectOption,
+  emptyText,
+}: VirtualizedCommandProps<O>) {
+  const [filteredOptions, setFilteredOptions] = React.useState<O[]>(options);
+  const [focusedIndex, setFocusedIndex] = React.useState(0);
+  const [isKeyboardNavActive, setIsKeyboardNavActive] = React.useState(false);
+
+  const parentRef = React.useRef(null);
+
+  const virtualizer = useVirtualizer({
+    count: filteredOptions.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 35,
+  });
+
+  const virtualOptions = virtualizer.getVirtualItems();
+
+  const scrollToIndex = (index: number) => {
+    virtualizer.scrollToIndex(index, {
+      align: 'center',
+    });
+  };
+
+  const handleSearch = (search: string) => {
+    setIsKeyboardNavActive(false);
+    setFilteredOptions(
+      options.filter((option) =>
+        option.label.toLowerCase().includes(search.toLowerCase()),
+      ),
+    );
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    switch (event.key) {
+      case 'ArrowDown': {
+        event.preventDefault();
+        setIsKeyboardNavActive(true);
+        setFocusedIndex((prev) => {
+          const newIndex =
+            prev === -1 ? 0 : Math.min(prev + 1, filteredOptions.length - 1);
+          scrollToIndex(newIndex);
+          return newIndex;
+        });
+        break;
+      }
+      case 'ArrowUp': {
+        event.preventDefault();
+        setIsKeyboardNavActive(true);
+        setFocusedIndex((prev) => {
+          const newIndex =
+            prev === -1 ? filteredOptions.length - 1 : Math.max(prev - 1, 0);
+          scrollToIndex(newIndex);
+          return newIndex;
+        });
+        break;
+      }
+      case 'Enter': {
+        event.preventDefault();
+        if (filteredOptions[focusedIndex]) {
+          onSelectOption?.(filteredOptions[focusedIndex]);
+        }
+        break;
+      }
+      default:
+        break;
+    }
+  };
+
+  React.useEffect(() => {
+    if (selectedOption) {
+      const option = filteredOptions.find(
+        (opt) => opt.value === selectedOption,
+      );
+      if (option) {
+        const index = filteredOptions.indexOf(option);
+        setFocusedIndex(index);
+      }
+    }
+  }, [selectedOption, filteredOptions, virtualizer]);
+
+  return (
+    <Command shouldFilter={false} onKeyDown={handleKeyDown}>
+      <CommandInput onValueChange={handleSearch} placeholder={placeholder} />
+      <CommandList
+        ref={parentRef}
+        style={{
+          height,
+          width: '100%',
+          overflow: 'auto',
+        }}
+        onMouseDown={() => setIsKeyboardNavActive(false)}
+        onMouseMove={() => setIsKeyboardNavActive(false)}
+      >
+        <CommandEmpty>{emptyText || 'No item found.'}</CommandEmpty>
+        <CommandGroup>
+          <div
+            style={{
+              height: `${virtualizer.getTotalSize()}px`,
+              width: '100%',
+              position: 'relative',
+            }}
+          >
+            {virtualOptions.map((virtualOption) => (
+              <CommandItem
+                key={
+                  filteredOptions[virtualOption.index].key ??
+                  filteredOptions[virtualOption.index].value
+                }
+                disabled={isKeyboardNavActive}
+                className={cn(
+                  'absolute left-0 top-0 w-full bg-transparent',
+                  focusedIndex === virtualOption.index &&
+                    'bg-accent text-accent-foreground',
+                  isKeyboardNavActive &&
+                    focusedIndex !== virtualOption.index &&
+                    'aria-selected:bg-transparent aria-selected:text-primary',
+                )}
+                style={{
+                  height: `${virtualOption.size}px`,
+                  transform: `translateY(${virtualOption.start}px)`,
+                }}
+                value={filteredOptions[virtualOption.index].value}
+                onMouseEnter={() =>
+                  !isKeyboardNavActive && setFocusedIndex(virtualOption.index)
+                }
+                onMouseLeave={() => !isKeyboardNavActive && setFocusedIndex(-1)}
+                onSelect={() => onSelectOption?.(filteredOptions[focusedIndex])}
+              >
+                <Check
+                  className={cn(
+                    'mr-2 h-4 w-4',
+                    selectedOption ===
+                      filteredOptions[virtualOption.index].value
+                      ? 'opacity-100'
+                      : 'opacity-0',
+                  )}
+                />
+                {filteredOptions[virtualOption.index].label}
+              </CommandItem>
+            ))}
+          </div>
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  );
+}
+
+interface VirtualizedComboboxProps<O extends Option> {
+  options: O[];
+  searchPlaceholder?: string;
+  width?: string;
+  height?: string;
+  button?: React.JSX.Element;
+  onSelectOption?: (option: O) => void;
+  selectedOption: string;
+  align?: 'start' | 'center' | 'end';
+  side?: 'right' | 'top' | 'bottom' | 'left';
+}
+
+function VirtualizedCombobox<O extends Option>({
+  options,
+  searchPlaceholder = 'Search items...',
+  width,
+  height,
+  button,
+  onSelectOption,
+  selectedOption,
+  align = 'start',
+  side,
+}: VirtualizedComboboxProps<O>) {
+  const [open, setOpen] = React.useState(false);
+  const defaultButton = (
+    <Button
+      variant="outline"
+      role="combobox"
+      aria-expanded={open}
+      className="justify-between"
+      style={{
+        width,
+      }}
+    >
+      {selectedOption
+        ? options.find((option) => option.value === selectedOption).value
+        : searchPlaceholder}
+      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+    </Button>
+  );
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>{button || defaultButton}</PopoverTrigger>
+      <PopoverContent
+        className="p-0"
+        style={{ width }}
+        align={align}
+        side={side}
+      >
+        <VirtualizedCommand
+          height={height}
+          options={options}
+          placeholder={searchPlaceholder}
+          selectedOption={selectedOption}
+          onSelectOption={(currentValue) => {
+            onSelectOption(currentValue);
+            setOpen(false);
+          }}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+export default VirtualizedCombobox;

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

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

dashboard/src/components/dataGrid/DataGridBooleanCell/DataGridBooleanCell.tsx

@@ -2,7 +2,7 @@ import type { CommonDataGridCellProps } from '@/components/dataGrid/DataGridCell
 import { useDataGridCell } from '@/components/dataGrid/DataGridCell';
 import { ReadOnlyToggle } from '@/components/presentational/ReadOnlyToggle';
 import { Dropdown } from '@/components/ui/v2/Dropdown';
-import type { KeyboardEvent as ReactKeyboardEvent, MouseEvent } from 'react';
+import type { MouseEvent, KeyboardEvent as ReactKeyboardEvent } from 'react';
 import { twMerge } from 'tailwind-merge';
 
 export type DataGridBooleanCellProps<TData extends object> =

dashboard/src/components/dataGrid/DataGridPreviewCell/DataGridPreviewCell.tsx

@@ -267,7 +267,7 @@ export default function DataGridPreviewCell<TData extends object>({
               aria-label="Close"
               variant="borderless"
               color="secondary"
-              className="absolute top-2 right-2 z-50 p-2"
+              className="absolute right-2 top-2 z-50 p-2"
               sx={{
                 [`&:hover, &:active, &:focus`]: {
                   backgroundColor: (theme) => {

dashboard/src/components/layout/AISidebar/AISidebar.tsx

@@ -20,8 +20,7 @@ interface AINavLinkProps extends ListItemButtonProps {
    */
   href: string;
   /**
-   * Determines whether or not the link should be active if it's href exactly
-   * matches the current route.
+   * Determines whether or not the link should be active if href matches the current route.
    *
    * @default true
    */
@@ -87,7 +86,7 @@ export default function AISidebar({ className, ...props }: AISidebarProps) {
     <>
       <Backdrop
         open={expanded}
-        className="absolute top-0 left-0 bottom-0 right-0 z-[34] md:hidden"
+        className="absolute bottom-0 left-0 right-0 top-0 z-[34] md:hidden"
         role="button"
         tabIndex={-1}
         onClick={() => setExpanded(false)}
@@ -104,7 +103,7 @@ export default function AISidebar({ className, ...props }: AISidebarProps) {
       <Box
         component="aside"
         className={twMerge(
-          'absolute top-0 z-[35] h-full w-full overflow-auto border-r-1 px-2 pt-2 pb-17 motion-safe:transition-transform md:relative md:z-0 md:h-full md:py-2.5 md:transition-none',
+          'absolute top-0 z-[35] h-full w-full overflow-auto border-r-1 px-2 pb-17 pt-2 motion-safe:transition-transform md:relative md:z-0 md:h-full md:py-2.5 md:transition-none',
           expanded ? 'translate-x-0' : '-translate-x-full md:translate-x-0',
           className,
         )}
@@ -119,6 +118,7 @@ export default function AISidebar({ className, ...props }: AISidebarProps) {
             >
               Auto-Embeddings
             </AINavLink>
+
             <AINavLink href="/assistants" exact={false} onClick={handleSelect}>
               Assistants
             </AINavLink>

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

@@ -21,22 +21,9 @@ import { useNotFoundRedirect } from '@/features/projects/common/hooks/useNotFoun
 import { cn } from '@/lib/utils';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
-import {
-  useEffect,
-  useState,
-  type DetailedHTMLProps,
-  type HTMLProps,
-} from 'react';
+import { useEffect, useState } from 'react';
 
-export interface AuthenticatedLayoutProps extends BaseLayoutProps {
-  /**
-   * Props passed to the internal content container.
-   */
-  contentContainerProps?: DetailedHTMLProps<
-    HTMLProps<HTMLDivElement>,
-    HTMLDivElement
-  >;
-}
+export interface AuthenticatedLayoutProps extends BaseLayoutProps {}
 
 export default function AuthenticatedLayout({
   children,

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

@@ -18,6 +18,7 @@ import {
   PopoverTrigger,
 } from '@/components/ui/v3/popover';
 
+import { useIsPlatform } from '@/features/orgs/projects/common/hooks/useIsPlatform';
 import { Check, ChevronsUpDown } from 'lucide-react';
 import { useEffect, useMemo, useState } from 'react';
 
@@ -40,6 +41,8 @@ export default function OrgPagesComboBox() {
     asPath,
   } = useRouter();
 
+  const isPlatform = useIsPlatform();
+
   const pathSegments = useMemo(() => asPath.split('/'), [asPath]);
   const orgPageFromUrl = pathSegments[3] || null;
 
@@ -64,7 +67,7 @@ export default function OrgPagesComboBox() {
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
+      <PopoverTrigger disabled={!isPlatform} asChild>
         <Button
           variant="ghost"
           size="sm"
@@ -75,7 +78,7 @@ export default function OrgPagesComboBox() {
           ) : (
             <>Select a page</>
           )}
-          <ChevronsUpDown className="w-5 h-5 text-muted-foreground" />
+          <ChevronsUpDown className="h-5 w-5 text-muted-foreground" />
         </Button>
       </PopoverTrigger>
       <PopoverContent className="p-0" side="bottom" align="start">
@@ -103,7 +106,7 @@ export default function OrgPagesComboBox() {
                     )}
                   />
                   <div className="flex flex-row items-center gap-2">
-                    <span className="truncate max-w-52">{option.label}</span>
+                    <span className="max-w-52 truncate">{option.label}</span>
                   </div>
                 </CommandItem>
               ))}

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

@@ -105,7 +105,7 @@ export default function OrgsComboBox() {
         <Button
           size="sm"
           variant="ghost"
-          className="justify-between w-full gap-2 bg-background text-foreground hover:bg-accent dark:hover:bg-muted"
+          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">
@@ -115,7 +115,7 @@ export default function OrgsComboBox() {
           ) : (
             'Select organization / workspace'
           )}
-          <ChevronsUpDown className="w-5 h-5 text-muted-foreground" />
+          <ChevronsUpDown className="h-5 w-5 text-muted-foreground" />
         </Button>
       </PopoverTrigger>
       <PopoverContent className="p-0" side="bottom" align="start">

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

@@ -32,6 +32,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from '@/components/ui/v3/popover';
+import { useIsPlatform } from '@/features/orgs/projects/common/hooks/useIsPlatform';
 import { cn } from '@/lib/utils';
 import { useRouter } from 'next/router';
 import { useEffect, useMemo, useState, type ReactElement } from 'react';
@@ -40,88 +41,10 @@ type Option = {
   value: string;
   label: string;
   icon: ReactElement;
+  disabled: boolean;
 };
 
-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',
-  },
-];
+type SelectedOption = Omit<Option, 'disabled'>;
 
 export default function ProjectPagesComboBox() {
   const {
@@ -130,6 +53,105 @@ export default function ProjectPagesComboBox() {
     asPath,
   } = useRouter();
 
+  const isPlatform = useIsPlatform();
+
+  const projectPages = useMemo(
+    () => [
+      {
+        label: 'Overview',
+        value: 'overview',
+        icon: <HomeIcon className="h-4 w-4" />,
+        slug: '',
+        disabled: false,
+      },
+      {
+        label: 'Database',
+        value: 'database',
+        icon: <DatabaseIcon className="h-4 w-4" />,
+        slug: '/database/browser/default',
+        disabled: false,
+      },
+      {
+        label: 'GraphQL',
+        value: 'graphql',
+        icon: <GraphQLIcon className="h-4 w-4" />,
+        slug: 'graphql',
+        disabled: false,
+      },
+      {
+        label: 'Hasura',
+        value: 'hasura',
+        icon: <HasuraIcon className="h-4 w-4" />,
+        slug: 'hasura',
+        disabled: false,
+      },
+      {
+        label: 'Auth',
+        value: 'users',
+        icon: <UserIcon className="h-4 w-4" />,
+        slug: 'users',
+        disabled: false,
+      },
+      {
+        label: 'Storage',
+        value: 'storage',
+        icon: <StorageIcon className="h-4 w-4" />,
+        slug: 'storage',
+        disabled: false,
+      },
+      {
+        label: 'Run',
+        value: 'run',
+        icon: <ServicesIcon className="h-4 w-4" />,
+        slug: 'run',
+        disabled: false,
+      },
+      {
+        label: 'AI',
+        value: 'ai',
+        icon: <AIIcon className="h-4 w-4" />,
+        slug: 'ai/auto-embeddings',
+        disabled: false,
+      },
+      {
+        label: 'Deployments',
+        value: 'deployments',
+        icon: <RocketIcon className="h-4 w-4" />,
+        slug: 'deployments',
+        disabled: !isPlatform,
+      },
+      {
+        label: 'Backups',
+        value: 'backups',
+        icon: <CloudIcon className="h-4 w-4" />,
+        slug: 'backups',
+        disabled: !isPlatform,
+      },
+      {
+        label: 'Logs',
+        value: 'logs',
+        icon: <FileTextIcon className="h-4 w-4" />,
+        slug: 'logs',
+        disabled: !isPlatform,
+      },
+      {
+        label: 'Metrics',
+        value: 'metrics',
+        icon: <GaugeIcon className="h-4 w-4" />,
+        slug: 'metrics',
+        disabled: !isPlatform,
+      },
+      {
+        label: 'Settings',
+        value: 'settings',
+        icon: <CogIcon className="h-4 w-4" />,
+        slug: 'settings',
+        disabled: false,
+      },
+    ],
+    [isPlatform],
+  );
+
   const pathSegments = useMemo(() => asPath.split('/'), [asPath]);
   const projectPageFromUrl = appSubdomain
     ? pathSegments[5] || 'overview'
@@ -137,9 +159,8 @@ export default function ProjectPagesComboBox() {
   const selectedProjectPageFromUrl = projectPages.find(
     (item) => item.value === projectPageFromUrl,
   );
-  const [selectedProjectPage, setSelectedProjectPage] = useState<Option | null>(
-    null,
-  );
+  const [selectedProjectPage, setSelectedProjectPage] =
+    useState<SelectedOption | null>(null);
 
   useEffect(() => {
     if (selectedProjectPageFromUrl) {
@@ -155,6 +176,7 @@ export default function ProjectPagesComboBox() {
     label: app.label,
     value: app.slug,
     icon: app.icon,
+    disabled: app.disabled,
   }));
 
   const [open, setOpen] = useState(false);
@@ -175,7 +197,7 @@ export default function ProjectPagesComboBox() {
           ) : (
             <>Select a page</>
           )}
-          <ChevronsUpDown className="w-5 h-5 text-muted-foreground" />
+          <ChevronsUpDown className="h-5 w-5 text-muted-foreground" />
         </Button>
       </PopoverTrigger>
       <PopoverContent className="p-0" side="bottom" align="start">
@@ -188,6 +210,7 @@ export default function ProjectPagesComboBox() {
                 <CommandItem
                   key={option.value}
                   value={option.label}
+                  disabled={option.disabled}
                   onSelect={() => {
                     setSelectedProjectPage(option);
                     setOpen(false);
@@ -206,7 +229,7 @@ export default function ProjectPagesComboBox() {
                   />
                   <div className="flex flex-row items-center gap-2">
                     {option.icon}
-                    <span className="truncate max-w-52">{option.label}</span>
+                    <span className="max-w-52 truncate">{option.label}</span>
                   </div>
                 </CommandItem>
               ))}

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

@@ -8,20 +8,15 @@ import {
   CommandItem,
   CommandList,
 } from '@/components/ui/v3/command';
-import {
-  HoverCard,
-  HoverCardContent,
-  HoverCardTrigger,
-} from '@/components/ui/v3/hover-card';
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from '@/components/ui/v3/popover';
+import { ProjectStatusIndicator } from '@/features/orgs/components/common/ProjectStatusIndicator';
 import { useAppState } from '@/features/orgs/projects/common/hooks/useAppState';
 import { useOrgs } from '@/features/orgs/projects/hooks/useOrgs';
 import { cn } from '@/lib/utils';
-import { ApplicationStatus } from '@/types/application';
 import { Box, Check, ChevronsUpDown } from 'lucide-react';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
@@ -31,56 +26,6 @@ type Option = {
   label: string;
 };
 
-function ProjectStatusIndicator({ status }: { status: ApplicationStatus }) {
-  const indicatorStyles: Record<
-    number,
-    { className: string; description: string }
-  > = {
-    [ApplicationStatus.Errored]: {
-      className: 'bg-destructive',
-      description: 'Project errored',
-    },
-    [ApplicationStatus.Pausing]: {
-      className: 'bg-primary-main animate-blinking',
-      description: 'Project is pausing',
-    },
-    [ApplicationStatus.Restoring]: {
-      className: 'bg-primary-main animate-blinking',
-      description: 'Project is restoring',
-    },
-    [ApplicationStatus.Paused]: {
-      className: 'bg-slate-400',
-      description: 'Project is paused',
-    },
-    [ApplicationStatus.Unpausing]: {
-      className: 'bg-primary-main animate-blinking',
-      description: 'Project is unpausing',
-    },
-    [ApplicationStatus.Live]: {
-      className: 'bg-primary-main',
-      description: 'Project is live',
-    },
-  };
-  const style = indicatorStyles[status];
-
-  if (style) {
-    return (
-      <HoverCard openDelay={0}>
-        <HoverCardTrigger asChild>
-          <span
-            className={cn('mt-[1px] h-2 w-2 rounded-full', style.className)}
-          />
-        </HoverCardTrigger>
-        <HoverCardContent side="top" className="h-fit w-fit py-2">
-          {style.description}
-        </HoverCardContent>
-      </HoverCard>
-    );
-  }
-
-  return null;
-}
-
 export default function ProjectsComboBox() {
   const {
     query: { appSubdomain },

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

@@ -48,7 +48,7 @@ export default function MainNav({ container }: MainNavProps) {
         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" />
+        <Menu className="h-4 w-4" />
       </div>
 
       <SheetContent
@@ -65,16 +65,16 @@ export default function MainNav({ container }: MainNavProps) {
           </SheetDescription>
         </SheetHeader>
 
-        <div className="flex flex-row items-center justify-end w-full h-12 px-1 border-b bg-background">
+        <div className="flex h-12 w-full flex-row items-center justify-end border-b bg-background px-1">
           <Button
             variant="ghost"
             className="hidden sm:flex"
             onClick={() => setMainNavPinned(!mainNavPinned)}
           >
             {mainNavPinned ? (
-              <PinOff className="w-5 h-5" />
+              <PinOff className="h-5 w-5" />
             ) : (
-              <Pin className="w-5 h-5" />
+              <Pin className="h-5 w-5" />
             )}
           </Button>
 
@@ -83,7 +83,7 @@ export default function MainNav({ container }: MainNavProps) {
             className="flex sm:hidden"
             onClick={() => setOpen(false)}
           >
-            <X className="w-5 h-5" />
+            <X className="h-5 w-5" />
           </Button>
         </div>
 

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

@@ -54,15 +54,15 @@ export default function PinnedMainNav() {
 
   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">
+      <div className="flex h-12 w-full justify-end border-b bg-background p-1">
         <Button
           variant="ghost"
           onClick={() => setMainNavPinned(!mainNavPinned)}
         >
           {mainNavPinned ? (
-            <PinOff className="w-5 h-5" />
+            <PinOff className="h-5 w-5" />
           ) : (
-            <Pin className="w-5 h-5" />
+            <Pin className="h-5 w-5" />
           )}
         </Button>
       </div>

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

@@ -17,18 +17,18 @@ export default function SettingsLayout({ children }: SettingsLayoutProps) {
   return (
     <Box
       sx={{ backgroundColor: 'background.default' }}
-      className="flex flex-col flex-auto w-full overflow-x-hidden overflow-y-auto"
+      className="flex w-full flex-auto flex-col overflow-y-auto overflow-x-hidden"
     >
       <Box
         sx={{ backgroundColor: 'background.default' }}
-        className="flex flex-col h-full"
+        className="flex h-full flex-col"
       >
         <RetryableErrorBoundary>
           <div className="flex flex-col space-y-2">
             {hasGitRepo && (
               <Alert
                 severity="warning"
-                className="grid grid-flow-row gap-2 place-content-center"
+                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

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

@@ -21,23 +21,22 @@ export default function UnauthenticatedLayout({
   const router = useRouter();
   const isPlatform = useIsPlatform();
   const { isAuthenticated, isLoading } = useAuthenticationStatus();
+  const isOnResetPassword = router.route === '/password/reset';
 
   useEffect(() => {
     if (!isPlatform || (!isLoading && isAuthenticated)) {
-      router.push('/');
+      // we do not want to redirect if the user tries to reset their password
+      if (!isOnResetPassword) {
+        router.push('/');
+      }
     }
-  }, [isLoading, isAuthenticated, router, isPlatform]);
+  }, [isLoading, isAuthenticated, router, isPlatform, isOnResetPassword]);
 
-  if (!isPlatform || isLoading || isAuthenticated) {
+  if ((!isPlatform || isLoading || isAuthenticated) && !isOnResetPassword) {
     return (
       <BaseLayout {...props}>
         <LoadingScreen
           sx={{ backgroundColor: (theme) => theme.palette.background.default }}
-          slotProps={{
-            activityIndicator: {
-              className: 'text-white',
-            },
-          }}
         />
       </BaseLayout>
     );
@@ -59,19 +58,19 @@ export default function UnauthenticatedLayout({
 
         <RetryableErrorBoundary>
           <Box
-            className="flex items-center min-h-screen"
+            className="flex min-h-screen items-center"
             sx={{ backgroundColor: (theme) => theme.palette.common.black }}
           >
             <Container
               rootClassName="bg-transparent h-full"
-              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"
+              className="grid h-full w-full items-center justify-items-center gap-12 bg-transparent pb-12 pt-8 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 bottom-0 left-0 right-0 flex items-center justify-center w-full h-full max-w-xl mx-auto overflow-hidden opacity-70">
+                <div className="absolute bottom-0 left-0 right-0 top-0 mx-auto flex h-full w-full max-w-xl items-center justify-center overflow-hidden opacity-70">
                   <Image
                     priority
                     src="/assets/line-grid.svg"

dashboard/src/components/presentational/LoadingScreen/LoadingScreen.tsx

@@ -28,7 +28,7 @@ export default function LoadingScreen({
   return (
     <Box
       className={twMerge(
-        'absolute top-0 left-0 bottom-0 right-0 z-50 flex h-full w-full items-center justify-center',
+        'absolute bottom-0 left-0 right-0 top-0 z-50 flex h-full w-full items-center justify-center',
         className,
         slotProps?.root?.className,
       )}

dashboard/src/components/ui/v1/Modal/Modal.tsx

@@ -55,7 +55,7 @@ export default function Modal({
         >
           <div
             className={clsx(
-              'flex min-h-screen items-center justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0',
+              'flex min-h-screen items-center justify-center px-4 pb-20 pt-4 text-center sm:block sm:p-0',
               wrapperClassName,
             )}
           >

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

@@ -8,9 +8,9 @@ import { Input, inputClasses } from '@/components/ui/v2/Input';
 import { OptionBase } from '@/components/ui/v2/Option';
 import { OptionGroupBase } from '@/components/ui/v2/OptionGroup';
 import type { StyledComponent } from '@emotion/styled';
+import { Popper } from '@mui/base';
 import type { UseAutocompleteProps } from '@mui/base/useAutocomplete';
 import { createFilterOptions } from '@mui/base/useAutocomplete';
-import { Popper } from '@mui/base'
 import { styled } from '@mui/material';
 import type { AutocompleteProps as MaterialAutocompleteProps } from '@mui/material/Autocomplete';
 import MaterialAutocomplete, {

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

@@ -2,8 +2,8 @@ import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
 import type { SxProps, Theme } from '@mui/material';
 import { alpha, styled } from '@mui/material';
 import type {
-  ButtonProps as MaterialButtonProps,
   ButtonTypeMap,
+  ButtonProps as MaterialButtonProps,
 } from '@mui/material/Button';
 import MaterialButton, { buttonClasses } from '@mui/material/Button';
 import type { ForwardedRef } from 'react';

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

@@ -1,7 +1,7 @@
 import { styled } from '@mui/material';
 import type {
-  DividerProps as MaterialDividerProps,
   DividerTypeMap,
+  DividerProps as MaterialDividerProps,
 } from '@mui/material/Divider';
 import MaterialDivider from '@mui/material/Divider';
 

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

@@ -0,0 +1,26 @@
+import type { IconProps } from '@/components/ui/v2/icons';
+import { SvgIcon } from '@/components/ui/v2/icons/SvgIcon';
+
+function FileStoresIcon(props: IconProps) {
+  return (
+    <SvgIcon
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      aria-label="FileStores Icon"
+      {...props}
+    >
+      <path d="M12 22v-9" />
+      <path d="M15.17 2.21a1.67 1.67 0 0 1 1.63 0L21 4.57a1.93 1.93 0 0 1 0 3.36L8.82 14.79a1.655 1.655 0 0 1-1.64 0L3 12.43a1.93 1.93 0 0 1 0-3.36z" />
+      <path d="M20 13v3.87a2.06 2.06 0 0 1-1.11 1.83l-6 3.08a1.93 1.93 0 0 1-1.78 0l-6-3.08A2.06 2.06 0 0 1 4 16.87V13" />
+      <path d="M21 12.43a1.93 1.93 0 0 0 0-3.36L8.83 2.2a1.64 1.64 0 0 0-1.63 0L3 4.57a1.93 1.93 0 0 0 0 3.36l12.18 6.86a1.636 1.636 0 0 0 1.63 0z" />
+    </SvgIcon>
+  );
+}
+
+FileStoresIcon.displayName = 'FileStoresIcon';
+
+export default FileStoresIcon;

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

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

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

@@ -46,7 +46,7 @@ const AccordionContent = React.forwardRef<
 >(({ 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"
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
     {...props}
   >
     <div className={cn('pb-4 pt-0', className)}>{children}</div>
@@ -55,4 +55,4 @@ const AccordionContent = React.forwardRef<
 
 AccordionContent.displayName = AccordionPrimitive.Content.displayName;
 
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

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

@@ -126,14 +126,14 @@ AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 
 export {
   AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
   AlertDialogAction,
   AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
 };

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

@@ -58,4 +58,4 @@ const AlertDescription = React.forwardRef<
 ));
 AlertDescription.displayName = 'AlertDescription';
 
-export { Alert, AlertTitle, AlertDescription };
+export { Alert, AlertDescription, AlertTitle };

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

@@ -98,7 +98,7 @@ const BreadcrumbEllipsis = ({
     className={cn('flex h-9 w-9 items-center justify-center', className)}
     {...props}
   >
-    <MoreHorizontal className="w-4 h-4" />
+    <MoreHorizontal className="h-4 w-4" />
     <span className="sr-only">More</span>
   </span>
 );
@@ -106,10 +106,10 @@ BreadcrumbEllipsis.displayName = 'BreadcrumbElipssis';
 
 export {
   Breadcrumb,
-  BreadcrumbList,
+  BreadcrumbEllipsis,
   BreadcrumbItem,
   BreadcrumbLink,
+  BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-  BreadcrumbEllipsis,
 };

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

@@ -3,6 +3,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 
 import { cn } from '@/lib/utils';
+import { Loader2 } from 'lucide-react';
 
 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',
@@ -53,4 +54,16 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 );
 Button.displayName = 'Button';
 
-export { Button, buttonVariants };
+const ButtonWithLoading = React.forwardRef<
+  HTMLButtonElement,
+  ButtonProps & { loading?: boolean }
+>(({ loading, disabled, children, ...props }, ref) => {
+  return (
+    <Button disabled={loading || disabled} ref={ref} {...props}>
+      {loading && <Loader2 className="mr-2 animate-spin" />}
+      {children}
+    </Button>
+  );
+});
+
+export { Button, buttonVariants, ButtonWithLoading };

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

@@ -0,0 +1,80 @@
+'use client';
+
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import {
+  DayPicker,
+  type DayPickerProps,
+  type StyledComponent,
+} from 'react-day-picker';
+
+import { buttonVariants } from '@/components/ui/v3/button';
+import { cn } from '@/lib/utils';
+
+const IconLeft = ({ className, ...props }: StyledComponent) => (
+  <ChevronLeft className={cn('h-4 w-4', className)} {...props} />
+);
+const IconRight = ({ className, ...props }: StyledComponent) => (
+  <ChevronRight className={cn('h-4 w-4', className)} {...props} />
+);
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: DayPickerProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn('p-3', className)}
+      classNames={{
+        months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',
+        month: 'space-y-4',
+        caption: 'flex justify-center pt-1 relative items-center',
+        caption_label: 'text-sm font-medium',
+        nav: 'space-x-1 flex items-center',
+        nav_button: cn(
+          buttonVariants({ variant: 'outline' }),
+          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+        ),
+        nav_button_previous: 'absolute left-1',
+        nav_button_next: 'absolute right-1',
+        table: 'w-full border-collapse space-y-1',
+        head_row: 'flex',
+        head_cell:
+          'text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]',
+        row: 'flex w-full mt-2',
+        cell: cn(
+          'relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md',
+          props.mode === 'range'
+            ? '[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md'
+            : '[&:has([aria-selected])]:rounded-md',
+        ),
+        day: cn(
+          buttonVariants({ variant: 'ghost' }),
+          'h-8 w-8 p-0 font-normal aria-selected:opacity-100',
+        ),
+        day_range_start: 'day-range-start',
+        day_range_end: 'day-range-end',
+        day_selected:
+          'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
+        day_today: 'bg-accent text-accent-foreground',
+        day_outside:
+          'day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground',
+        day_disabled: 'text-muted-foreground opacity-50',
+        day_range_middle:
+          'aria-selected:bg-accent aria-selected:text-accent-foreground',
+        day_hidden: 'invisible',
+        ...classNames,
+      }}
+      components={{
+        IconLeft,
+        IconRight,
+      }}
+      {...props}
+    />
+  );
+}
+Calendar.displayName = 'Calendar';
+
+export { Calendar };

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

@@ -1,8 +1,8 @@
-import * as React from "react"
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-import { Check } from "lucide-react"
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Check } from 'lucide-react';
+import * as React from 'react';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
@@ -11,18 +11,18 @@ const Checkbox = React.forwardRef<
   <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
+      '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")}
+      className={cn('flex items-center justify-center text-current')}
     >
       <Check className="h-4 w-4" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
-))
-Checkbox.displayName = CheckboxPrimitive.Root.displayName
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
-export { Checkbox }
+export { Checkbox };

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

@@ -1,6 +1,6 @@
 import { type DialogProps } from '@radix-ui/react-dialog';
-import { Command as CommandPrimitive } from 'cmdk';
-import { Search } from 'lucide-react';
+import { Command as CommandPrimitive, useCommandState } from 'cmdk';
+import { PlusIcon, Search } from 'lucide-react';
 import * as React from 'react';
 
 import { Dialog, DialogContent } from '@/components/ui/v3/dialog';
@@ -26,7 +26,7 @@ interface CommandDialogProps extends DialogProps {}
 const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   return (
     <Dialog {...props}>
-      <DialogContent className="p-0 overflow-hidden shadow-lg">
+      <DialogContent className="overflow-hidden p-0 shadow-lg">
         <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
           {children}
         </Command>
@@ -37,14 +37,22 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
 
 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" />
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> & {
+    prefix?: React.ReactNode;
+  }
+>(({ className, prefix, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    {prefix && (
+      <span className="pointer-events-none flex items-center text-muted-foreground">
+        {prefix}
+      </span>
+    )}
     <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',
+        prefix && 'pl-0',
         className,
       )}
       {...props}
@@ -73,7 +81,7 @@ const CommandEmpty = React.forwardRef<
 >((props, ref) => (
   <CommandPrimitive.Empty
     ref={ref}
-    className="py-6 text-sm text-center"
+    className="py-6 text-center text-sm"
     {...props}
   />
 ));
@@ -140,14 +148,34 @@ const CommandShortcut = ({
 };
 CommandShortcut.displayName = 'CommandShortcut';
 
+const CommandCreateItem = ({
+  onCreate,
+}: {
+  onCreate: (value: string) => void;
+}) => {
+  const query = useCommandState((state) => state.search);
+  if (!query || !onCreate) {
+    return null;
+  }
+
+  return (
+    <CommandItem forceMount value="create" onSelect={() => onCreate(query)}>
+      <PlusIcon className="mr-2" /> {query}
+    </CommandItem>
+  );
+};
+
+CommandCreateItem.displayName = 'CommandCreateItem';
+
 export {
   Command,
+  CommandCreateItem,
   CommandDialog,
-  CommandInput,
-  CommandList,
   CommandEmpty,
   CommandGroup,
+  CommandInput,
   CommandItem,
-  CommandShortcut,
+  CommandList,
   CommandSeparator,
+  CommandShortcut,
 };

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

@@ -27,10 +27,15 @@ const DialogOverlay = React.forwardRef<
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
+interface DialogContentProps
+  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+  disableOutsideClick?: boolean;
+}
+
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
+  DialogContentProps
+>(({ className, children, disableOutsideClick, ...props }, ref) => (
   <DialogPortal>
     <DialogOverlay>
       <DialogPrimitive.Content
@@ -39,6 +44,11 @@ const DialogContent = React.forwardRef<
           '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,
         )}
+        onInteractOutside={
+          disableOutsideClick
+            ? (e) => e.preventDefault()
+            : props.onInteractOutside
+        }
         {...props}
       >
         {children}
@@ -109,13 +119,13 @@ DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 export {
   Dialog,
-  DialogPortal,
-  DialogOverlay,
   DialogClose,
-  DialogTrigger,
   DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
   DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
 };

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

@@ -1,42 +1,42 @@
-import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { Check, ChevronRight, Circle } from "lucide-react"
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { Check, ChevronRight, Circle } from 'lucide-react';
+import * as React from 'react';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
-const DropdownMenu = DropdownMenuPrimitive.Root
+const DropdownMenu = DropdownMenuPrimitive.Root;
 
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 
-const DropdownMenuGroup = DropdownMenuPrimitive.Group
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 
-const DropdownMenuSub = DropdownMenuPrimitive.Sub
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
 const DropdownMenuSubTrigger = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean
+    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
+      '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
+  DropdownMenuPrimitive.SubTrigger.displayName;
 
 const DropdownMenuSubContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
@@ -45,14 +45,14 @@ const DropdownMenuSubContent = React.forwardRef<
   <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
+      '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
+  DropdownMenuPrimitive.SubContent.displayName;
 
 const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
@@ -63,32 +63,32 @@ const DropdownMenuContent = React.forwardRef<
       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
+        '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
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 
 const DropdownMenuItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean
+    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
+      '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
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
 const DropdownMenuCheckboxItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
@@ -97,8 +97,8 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <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
+      '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}
@@ -110,9 +110,9 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuPrimitive.CheckboxItem>
-))
+));
 DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName
+  DropdownMenuPrimitive.CheckboxItem.displayName;
 
 const DropdownMenuRadioItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
@@ -121,8 +121,8 @@ const DropdownMenuRadioItem = React.forwardRef<
   <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
+      '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}
   >
@@ -133,26 +133,26 @@ const DropdownMenuRadioItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuPrimitive.RadioItem>
-))
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 
 const DropdownMenuLabel = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean
+    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
+      'px-2 py-1.5 text-sm font-semibold',
+      inset && 'pl-8',
+      className,
     )}
     {...props}
   />
-))
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 
 const DropdownMenuSeparator = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
@@ -160,11 +160,11 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
     {...props}
   />
-))
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 
 const DropdownMenuShortcut = ({
   className,
@@ -172,27 +172,27 @@ const DropdownMenuShortcut = ({
 }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
-      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      className={cn('ml-auto text-xs tracking-widest opacity-60', className)}
       {...props}
     />
-  )
-}
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+  );
+};
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
 
 export {
   DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
   DropdownMenuCheckboxItem,
-  DropdownMenuRadioItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
   DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
   DropdownMenuSeparator,
   DropdownMenuShortcut,
-  DropdownMenuGroup,
-  DropdownMenuPortal,
   DropdownMenuSub,
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
-  DropdownMenuRadioGroup,
-}
+  DropdownMenuTrigger,
+};

dashboard/src/components/ui/v3/fancy-multi-select.tsx

@@ -0,0 +1,183 @@
+'use client';
+
+import { X } from 'lucide-react';
+
+import { Badge } from '@/components/ui/v3/badge';
+import {
+  Command,
+  CommandGroup,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/v3/command';
+import { cn } from '@/lib/utils';
+import { Command as CommandPrimitive } from 'cmdk';
+import {
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+  type KeyboardEvent,
+} from 'react';
+
+type Option = Record<'value' | 'label', string>;
+
+interface FancyMultiSelectProps {
+  defaultValue?: Option[];
+  options?: Option[];
+  creatable?: boolean;
+  className?: string;
+  onChange?: (selected: Option[]) => void;
+}
+
+export function FancyMultiSelect({
+  defaultValue = [],
+  options = [],
+  creatable = false,
+  className,
+  onChange,
+}: FancyMultiSelectProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [open, setOpen] = useState(false);
+  const [selected, setSelected] = useState<Option[]>(defaultValue);
+  const [inputValue, setInputValue] = useState('');
+
+  const handleUnselect = useCallback((option: Option) => {
+    setSelected((prev) => prev.filter((s) => s.value !== option.value));
+  }, []);
+
+  const handleKeyDown = useCallback((e: KeyboardEvent<HTMLDivElement>) => {
+    const input = inputRef.current;
+    if (input) {
+      if (e.key === 'Delete' || e.key === 'Backspace') {
+        if (input.value === '') {
+          setSelected((prev) => {
+            const newSelected = [...prev];
+            newSelected.pop();
+            return newSelected;
+          });
+        }
+      }
+      // This is not a default behaviour of the <input /> field
+      if (e.key === 'Escape') {
+        input.blur();
+      }
+    }
+  }, []);
+
+  const handleSelect = useCallback(
+    (option: Option) => {
+      setInputValue('');
+      setSelected((prev) => {
+        const newSelected = [...prev, option];
+        onChange?.(newSelected);
+        return newSelected;
+      });
+    },
+    [onChange],
+  );
+
+  const selectables = useMemo(() => {
+    const filtered = options.filter(
+      (option) =>
+        !selected.map((s) => s.value).includes(option.value) &&
+        option.label.toLowerCase().includes(inputValue.toLowerCase()),
+    );
+
+    if (creatable && inputValue) {
+      return [
+        ...filtered,
+        {
+          value: inputValue.toLowerCase(),
+          label: inputValue,
+        },
+      ];
+    }
+
+    return filtered;
+  }, [options, selected, inputValue, creatable]);
+
+  return (
+    <Command
+      onKeyDown={handleKeyDown}
+      className="relative overflow-visible bg-transparent"
+    >
+      <div
+        className={cn(
+          'group flex min-h-10 flex-1 rounded-md border bg-background px-4 py-0 text-sm ring-offset-background hover:bg-accent',
+          className,
+        )}
+      >
+        <div className="flex flex-1 flex-wrap items-center gap-1 overflow-x-hidden py-1">
+          {selected.map((option) => {
+            return (
+              <Badge
+                className="h-7 overflow-x-hidden text-[12px] font-normal"
+                key={option.value}
+                variant="outline"
+              >
+                <span className="overflow-x-hidden text-ellipsis whitespace-nowrap break-words font-medium">
+                  {option.label}
+                </span>
+                <button
+                  type="button"
+                  aria-label={`Remove ${option.label}`}
+                  className="ml-1 rounded-full outline-none"
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') {
+                      handleUnselect(option);
+                    }
+                  }}
+                  onMouseDown={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                  }}
+                  onClick={() => handleUnselect(option)}
+                >
+                  <X className="h-3 w-3 text-muted-foreground hover:text-foreground" />
+                </button>
+              </Badge>
+            );
+          })}
+          {/* Avoid having the "Search" Icon */}
+          <CommandPrimitive.Input
+            ref={inputRef}
+            value={inputValue}
+            onValueChange={setInputValue}
+            onBlur={() => setOpen(false)}
+            onFocus={() => setOpen(true)}
+            placeholder="Select options..."
+            className="flex flex-1 border-none bg-transparent px-0 py-1 text-sm font-medium outline-none !ring-0 !ring-offset-0 placeholder:text-sm placeholder:text-muted-foreground group-hover:text-accent-foreground"
+          />
+        </div>
+      </div>
+      <div className="relative">
+        <CommandList>
+          {open && selectables.length > 0 ? (
+            <div className="absolute top-2 z-10 w-full rounded-md border bg-popover text-popover-foreground shadow-md outline-none animate-in">
+              <CommandGroup className="h-full overflow-auto">
+                {selectables.map((option) => {
+                  return (
+                    <CommandItem
+                      key={option.value}
+                      onMouseDown={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                      }}
+                      onSelect={() => handleSelect(option)}
+                      className="cursor-pointer"
+                    >
+                      {creatable &&
+                      !options.find((opt) => opt.value === option.value)
+                        ? `Create "${option.label}"`
+                        : option.label}
+                    </CommandItem>
+                  );
+                })}
+              </CommandGroup>
+            </div>
+          ) : null}
+        </CommandList>
+      </div>
+    </Command>
+  );
+}

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

@@ -164,12 +164,12 @@ const FormMessage = React.forwardRef<
 FormMessage.displayName = 'FormMessage';
 
 export {
-  useFormField,
   Form,
-  FormItem,
-  FormLabel,
   FormControl,
   FormDescription,
-  FormMessage,
   FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  useFormField,
 };

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

@@ -1,27 +1,27 @@
-import * as React from "react"
-import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
+import * as React from 'react';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
-const HoverCard = HoverCardPrimitive.Root
+const HoverCard = HoverCardPrimitive.Root;
 
-const HoverCardTrigger = HoverCardPrimitive.Trigger
+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) => (
+>(({ 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
+      '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
+));
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
 
-export { HoverCard, HoverCardTrigger, HoverCardContent }
+export { HoverCard, HoverCardContent, HoverCardTrigger };

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

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

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

@@ -1,29 +1,29 @@
-import * as React from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as React from 'react';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
-const Popover = PopoverPrimitive.Root
+const Popover = PopoverPrimitive.Root;
 
-const PopoverTrigger = PopoverPrimitive.Trigger
+const PopoverTrigger = PopoverPrimitive.Trigger;
 
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
   <PopoverPrimitive.Portal>
     <PopoverPrimitive.Content
       ref={ref}
       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
+        '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
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
-export { Popover, PopoverTrigger, PopoverContent }
+export { Popover, PopoverContent, PopoverTrigger };

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

@@ -22,7 +22,7 @@ const Progress = React.forwardRef<
     <ProgressPrimitive.Indicator
       className={cn(
         'h-full w-full flex-1 rounded-full bg-primary transition-all',
-        indeterminate && 'animate-progress origin-left',
+        indeterminate && 'origin-left animate-progress',
       )}
       style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
     />

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

@@ -1,8 +1,8 @@
-import * as React from "react"
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
-import { Circle } from "lucide-react"
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { Circle } from 'lucide-react';
+import * as React from 'react';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
 const RadioGroup = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Root>,
@@ -10,13 +10,13 @@ const RadioGroup = React.forwardRef<
 >(({ className, ...props }, ref) => {
   return (
     <RadioGroupPrimitive.Root
-      className={cn("grid gap-2", className)}
+      className={cn('grid gap-2', className)}
       {...props}
       ref={ref}
     />
-  )
-})
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+  );
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
 
 const RadioGroupItem = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Item>,
@@ -26,8 +26,8 @@ const RadioGroupItem = React.forwardRef<
     <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
+        '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}
     >
@@ -35,8 +35,8 @@ const RadioGroupItem = React.forwardRef<
         <Circle className="h-2.5 w-2.5 fill-current text-current" />
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
-  )
-})
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 
-export { RadioGroup, RadioGroupItem }
+export { RadioGroup, RadioGroupItem };

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

@@ -24,7 +24,7 @@ const SelectTrigger = React.forwardRef<
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <ChevronDown className="w-4 h-4 opacity-50" />
+      <ChevronDown className="h-4 w-4 opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ));
@@ -42,7 +42,7 @@ const SelectScrollUpButton = React.forwardRef<
     )}
     {...props}
   >
-    <ChevronUp className="w-4 h-4" />
+    <ChevronUp className="h-4 w-4" />
   </SelectPrimitive.ScrollUpButton>
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
@@ -59,7 +59,7 @@ const SelectScrollDownButton = React.forwardRef<
     )}
     {...props}
   >
-    <ChevronDown className="w-4 h-4" />
+    <ChevronDown className="h-4 w-4" />
   </SelectPrimitive.ScrollDownButton>
 ));
 SelectScrollDownButton.displayName =
@@ -123,7 +123,7 @@ const SelectItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <SelectPrimitive.ItemIndicator>
-        <Check className="w-4 h-4" />
+        <Check className="h-4 w-4" />
       </SelectPrimitive.ItemIndicator>
     </span>
 
@@ -146,13 +146,13 @@ SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 export {
   Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
   SelectContent,
-  SelectLabel,
+  SelectGroup,
   SelectItem,
-  SelectSeparator,
-  SelectScrollUpButton,
+  SelectLabel,
   SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
 };

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

@@ -1,29 +1,29 @@
-import * as React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import * as React from 'react';
 
-import { cn } from "@/lib/utils"
+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
+    { 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
+        'shrink-0 bg-border',
+        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+        className,
       )}
       {...props}
     />
-  )
-)
-Separator.displayName = SeparatorPrimitive.Root.displayName
+  ),
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
 
-export { Separator }
+export { Separator };

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

@@ -21,7 +21,7 @@ const SheetOverlay = React.forwardRef<
 >(({ 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',
+      '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}
@@ -80,7 +80,7 @@ const SheetContent = React.forwardRef<
         {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" />
+            <X className="h-4 w-4" />
             <span className="sr-only">Close</span>
           </SheetPrimitive.Close>
         )}
@@ -150,13 +150,13 @@ SheetDescription.displayName = SheetPrimitive.Description.displayName;
 
 export {
   Sheet,
-  SheetPortal,
-  SheetOverlay,
-  SheetTrigger,
   SheetClose,
   SheetContent,
-  SheetHeader,
-  SheetFooter,
-  SheetTitle,
   SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger,
 };

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

@@ -0,0 +1,56 @@
+import { cn } from '@/lib/utils';
+import { type VariantProps, cva } from 'class-variance-authority';
+import { Loader2 } from 'lucide-react';
+import React from 'react';
+
+const spinnerVariants = cva('flex-col items-center justify-center', {
+  variants: {
+    show: {
+      true: 'flex',
+      false: 'hidden',
+    },
+  },
+  defaultVariants: {
+    show: true,
+  },
+});
+
+const loaderVariants = cva('animate-spin text-primary', {
+  variants: {
+    size: {
+      small: 'size-6',
+      medium: 'size-8',
+      large: 'size-12',
+    },
+  },
+  defaultVariants: {
+    size: 'medium',
+  },
+});
+
+interface SpinnerContentProps
+  extends VariantProps<typeof spinnerVariants>,
+    VariantProps<typeof loaderVariants> {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export function Spinner({
+  size,
+  show,
+  children,
+  className,
+}: SpinnerContentProps) {
+  return (
+    <span className={spinnerVariants({ show })}>
+      <Loader2
+        className={cn(
+          loaderVariants({ size }),
+          className,
+          'stroke-[#1e324b] dark:stroke-[#dfecf5]',
+        )}
+      />
+      {children}
+    </span>
+  );
+}

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

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

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

@@ -0,0 +1,53 @@
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
+      className,
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+      className,
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      className,
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsContent, TabsList, TabsTrigger };

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

@@ -1,13 +1,13 @@
-import * as React from "react"
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as React from 'react';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
-const TooltipProvider = TooltipPrimitive.Provider
+const TooltipProvider = TooltipPrimitive.Provider;
 
-const Tooltip = TooltipPrimitive.Root
+const Tooltip = TooltipPrimitive.Root;
 
-const TooltipTrigger = TooltipPrimitive.Trigger
+const TooltipTrigger = TooltipPrimitive.Trigger;
 
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
@@ -17,12 +17,12 @@ const TooltipContent = React.forwardRef<
     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
+      '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
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

dashboard/src/features/account/settings/components/CreatePATForm/CreatePATForm.tsx

@@ -11,10 +11,10 @@ import { Input } from '@/components/ui/v2/Input';
 import { Option } from '@/components/ui/v2/Option';
 import { Text } from '@/components/ui/v2/Text';
 import type { DialogFormProps } from '@/types/common';
+import { GetPersonalAccessTokensDocument } from '@/utils/__generated__/graphql';
 import { getToastStyleProps } from '@/utils/constants/settings';
 import { copy } from '@/utils/copy';
 import { getDateComponents } from '@/utils/getDateComponents';
-import { GetPersonalAccessTokensDocument } from '@/utils/__generated__/graphql';
 import { useApolloClient } from '@apollo/client';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useNhostClient } from '@nhost/nextjs';

dashboard/src/features/account/settings/components/DeleteAccount/DeleteAccount.tsx

@@ -4,11 +4,11 @@ import { Box } from '@/components/ui/v2/Box';
 import { Button } from '@/components/ui/v2/Button';
 import { Checkbox } from '@/components/ui/v2/Checkbox';
 import { Text } from '@/components/ui/v2/Text';
-import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import {
   useDeleteUserAccountMutation,
   useGetAllWorkspacesAndProjectsQuery,
 } from '@/utils/__generated__/graphql';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import { useSignOut, useUserData } from '@nhost/nextjs';
 import { useRouter } from 'next/router';
 import { useState } from 'react';

dashboard/src/features/account/settings/components/DisplayNameSetting/DisplayNameSetting.tsx

@@ -1,8 +1,8 @@
 import { Form } from '@/components/form/Form';
 import { SettingsContainer } from '@/components/layout/SettingsContainer';
 import { Input } from '@/components/ui/v2/Input';
-import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import { useUpdateUserDisplayNameMutation } from '@/utils/__generated__/graphql';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useUserData } from '@nhost/nextjs';
 import { FormProvider, useForm } from 'react-hook-form';