Version Packages (#4275)

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

.changeset/config.json

@@ -19,6 +19,8 @@
     "runtimes-node-module",
     "playground-web",
     "thirdweb-dashboard",
+    "wallet-ui",
+    "portal",
     "@thirdweb-dev/auth",
     "@thirdweb-dev/chains",
     "@thirdweb-dev/cli",

.github/CODEOWNERS

@@ -1,53 +1,56 @@
 # Order is important; the last matching pattern takes the most precedence.
 
-# Platform team owns everything by default
-
+# default ownership group
 - @jnsdls @joaquim-verges @MananTank @gregfromstl
 
 # legacy packages
 
-legacy_packages/auth/ @jnsdls
-legacy_packages/chains/ @jnsdls
-legacy_packages/cli/ @jnsdls
-legacy_packages/contracts-js/ @jnsdls
-legacy_packages/crypto/ @jnsdls
-legacy_packages/generated-abis/ @jnsdls
-legacy_packages/merkletree/ @jnsdls
-legacy_packages/pay/ @jnsdls
-legacy_packages/payments/ @jnsdls
-legacy_packages/react/ @MananTank @jnsdls
-legacy_packages/react-core/ @MananTank @jnsdls
-legacy_packages/react-native/ @jnsdls
-legacy_packages/react-native-compat/ @jnsdls
+legacy_packages/auth/ @jnsdls @joaquim-verges
+legacy_packages/chains/ @jnsdls @joaquim-verges
+legacy_packages/cli/ @jnsdls @joaquim-verges
+legacy_packages/contracts-js/ @jnsdls @joaquim-verges
+legacy_packages/crypto/ @jnsdls @joaquim-verges
+legacy_packages/generated-abis/ @jnsdls @joaquim-verges
+legacy_packages/merkletree/ @jnsdls @joaquim-verges
+legacy_packages/pay/ @jnsdls @joaquim-verges
+legacy_packages/payments/ @jnsdls @joaquim-verges
+legacy_packages/react/ @MananTank @jnsdls @joaquim-verges
+legacy_packages/react-core/ @MananTank @jnsdls @joaquim-verges
+legacy_packages/react-native/ @jnsdls @joaquim-verges
+legacy_packages/react-native-compat/ @jnsdls @joaquim-verges
 legacy_packages/sdk/ @joaquim-verges @jnsdls
-legacy_packages/storage/ @jnsdls
-legacy_packages/wallets/ @MananTank @jnsdls
+legacy_packages/storage/ @jnsdls @joaquim-verges
+legacy_packages/wallets/ @MananTank @jnsdls @joaquim-verges
 
 # legacy e2e
 
 legacy_e2e/ @jnsdls
 
 # packages
+packages/thirdweb/ @joaquim-verges @gregfromstl @jnsdls
 
 ## specific thirdweb pieces
+packages/thirdweb/src/react/ @joaquim-verges @gregfromstl @MananTank @jnsdls
+packages/thirdweb/src/reactive/ @joaquim-verges @gregfromstl @MananTank @jnsdls
+packages/thirdweb/src/gas/ @joaquim-verges @jnsdls
+packages/thirdweb/src/pay/ @joaquim-verges @gregfromstl @MananTank @jnsdls
+packages/typedoc-gen/ @MananTank @jnsdls @joaquim-verges
+packages/service-utils/ @arcoraven @jnsdls @joaquim-verges
+packages/eslint-config-thirdweb/ @jnsdls @joaquim-verges
+packages/tw-tsconfig/ @jnsdls @joaquim-verges
+packages/unity-js-bridge/ @joaquim-verges @0xFirekeeper @jnsdls
 
-packages/thirdweb/src/react/ @MananTank
-packages/thirdweb/src/reactive/ @MananTank
-packages/thirdweb/src/gas/ @joaquim-verges
-packages/thirdweb/src/pay/ @MananTank @IDubuque
-
-packages/typedoc-gen/ @MananTank
-
-# owned by phil for now
-
-packages/service-utils/ @arcoraven
-packages/eslint-config-thirdweb/ @jnsdls
-packages/tw-tsconfig/ @jnsdls
-packages/unity-js-bridge/ @joaquim-verges @0xFirekeeper
+# apps
+apps/ @jnsdls @joaquim-verges
+apps/dashboard/ @jnsdls @MananTank @joaquim-verges
+apps/playground-web/ @joaquim-verges @gregfromstl @jnsdls @joaquim-verges
+apps/wallet-ui/ @gregfromstl @jnsdls @joaquim-verges @MananTank
+apps/portal/ @gregfromstl @jnsdls @joaquim-verges @MananTank
 
 # .github folder + .changeset + turbo config is owned by jonas for now
+scripts/ @jnsdls @joaquim-verges
+.github/ @jnsdls @joaquim-verges
+.changeset/config.json @jnsdls @joaquim-verges
+turbo.json @jnsdls @joaquim-verges
+.vscode/ @jnsdls @joaquim-verges
 
-scripts/ @jnsdls
-.github/ @jnsdls
-.changeset/config.json @jnsdls
-turbo.json @jnsdls

.github/contributing.md

@@ -77,6 +77,21 @@ Many of the tests use forked versions of live chains like mainnet. We fork these
 
 If you need to use accounts in your tests, use the predefined accounts in `test/src/test-wallets.ts`. These are the default anvil accounts that are pre-funded on the local test forks.
 
+##### Mocking Network Calls
+
+If your test depends on a downstream network call, you must mock the call using `msw`. You can use one of the existing mocks in `test/src/mocks` or create your own. Once you've created a mock request, setup the server and add all your mocks like so:
+
+```ts
+import { setupServer } from "msw/node";
+import { downloadMock, uploadMock } from "../../../test/src/mocks/storage.js";
+
+const server = setupServer(uploadMock("HASH"), downloadMock({ name: "Test NFT" }));
+
+beforeAll(() => server.listen());
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());
+```
+
 #### Linting
 
 We use a linter to maintain best practices across projects. Once your changes are complete (or periodically while making changes), run the linter with the following command from the repo root:

.github/labeler.yml

@@ -11,3 +11,6 @@ legacy_packages:
 packages:
   - changed-files:
     - any-glob-to-any-file: "packages/**/*"
+portal:
+  - changed-files:
+    - any-glob-to-any-file: "apps/portal/**/*"

.github/pull_request_template.md

@@ -2,18 +2,3 @@
 
 Short description of the bug fixed or feature added
 
-## Changes made
-
-- [ ] Public API changes: list the public API changes made if any
-- [ ] Internal API changes: explain the internal logic changes
-
-## How to test
-
-- [ ] Automated tests: link to unit test file
-- [ ] Manual tests: step by step instructions on how to test
-
-## Contributor NFT
-
-Paste in your wallet address below and we will airdrop you a special NFT when your pull request is merged. 
-
-```Address: ```

.github/workflows/CI.yml

@@ -19,7 +19,21 @@ env:
   CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
 
 jobs:
+  optimize_ci:
+    runs-on: ubuntu-latest
+    outputs:
+      skip: ${{ steps.check_skip.outputs.skip }}
+    steps:
+      - name: Optimize CI
+        id: check_skip
+        uses: withgraphite/graphite-ci-action@main
+        with:
+          graphite_token: ${{ secrets.GRAPHITE_OMTIMIZE_TOKEN }}
+  
+
   build:
+    needs: optimize_ci
+    if: needs.optimize_ci.outputs.skip == 'false'
     runs-on: ubuntu-latest
     name: Build Packages
     steps:
@@ -33,6 +47,8 @@ jobs:
         run: pnpm build:packages
 
   lint:
+    needs: optimize_ci
+    if: needs.optimize_ci.outputs.skip == 'false'
     timeout-minutes: 15
     name: Lint Packages
     runs-on: ubuntu-latest
@@ -51,6 +67,8 @@ jobs:
       - run: pnpm lint
 
   test:
+    needs: optimize_ci
+    if: needs.optimize_ci.outputs.skip == 'false'
     timeout-minutes: 15
     name: Unit Tests
     runs-on: ubuntu-latest
@@ -65,6 +83,7 @@ jobs:
         uses: foundry-rs/foundry-toolchain@v1
         with:
           cache: false
+          version: nightly-c4a984fbf2c48b793c8cd53af84f56009dd1070c
 
       - run: pnpm test
 
@@ -76,6 +95,8 @@ jobs:
           verbose: true
 
   e2e:
+    needs: optimize_ci
+    if: needs.optimize_ci.outputs.skip == 'false'
     timeout-minutes: 15
     name: E2E Tests
     runs-on: ubuntu-latest
@@ -141,35 +162,11 @@ jobs:
             echo "Bundling failed"
             exit 1
           fi
-      
-
-  benchmark:
-    # cannot run benchmarks on merge group
-    if: github.event_name != 'merge_group'
-    timeout-minutes: 15
-    name: "Benchmarks"
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check out the code
-        uses: actions/checkout@v4
-
-      - name: Setup & Install
-        uses: ./.github/composite-actions/install
-
-      - name: Set up foundry
-        uses: foundry-rs/foundry-toolchain@v1
-        with:
-          cache: false
-
-      - name: Run benchmarks
-        uses: CodSpeedHQ/action@v2
-        with:
-          token: ${{ secrets.CODSPEED_TOKEN }}
-          run: "pnpm bench"
 
   size:
+    needs: optimize_ci
     # only run on pull requests
-    if: github.event_name == 'pull_request'
+    if:  github.event_name == 'pull_request' && needs.optimize_ci.outputs.skip == 'false'
     timeout-minutes: 15
     name: "Size"
     runs-on: ubuntu-latest

.github/workflows/CI_legacy.yml

@@ -27,7 +27,20 @@ env:
   CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
 
 jobs:
+  optimize_ci:
+    runs-on: ubuntu-latest
+    outputs:
+      skip: ${{ steps.check_skip.outputs.skip }}
+    steps:
+      - name: Optimize CI
+        id: check_skip
+        uses: withgraphite/graphite-ci-action@main
+        with:
+          graphite_token: ${{ secrets.GRAPHITE_OMTIMIZE_TOKEN }}
+
   build:
+    needs: optimize_ci
+    if: needs.optimize_ci.outputs.skip == 'false'
     runs-on: ubuntu-latest
     name: Build Packages
     steps:
@@ -41,6 +54,8 @@ jobs:
         run: pnpm build:legacy_packages
 
   lint:
+    needs: optimize_ci
+    if: needs.optimize_ci.outputs.skip == 'false'
     timeout-minutes: 15
     name: Lint Packages
     runs-on: ubuntu-latest
@@ -54,6 +69,8 @@ jobs:
       - run: pnpm lint:legacy
 
   test:
+    needs: optimize_ci
+    if: needs.optimize_ci.outputs.skip == 'false'
     timeout-minutes: 15
     name: Unit Tests
     runs-on: ubuntu-latest
@@ -74,6 +91,8 @@ jobs:
           verbose: true
 
   e2e:
+    needs: optimize_ci
+    if: needs.optimize_ci.outputs.skip == 'false'
     timeout-minutes: 15
     name: E2E Tests
     runs-on: ubuntu-latest

.github/workflows/release-artifacts.yml

@@ -1,75 +0,0 @@
-# On the Version Packages branch
-# Generate and Commit the Typedoc JSON files and the Snippets JSON files
-
-name: Commit Release Artifacts
-
-on:
-  push:
-    branches:
-      - changeset-release/main
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  # cancel any previous runs if they were started before this one
-  cancel-in-progress: true
-
-env:
-  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
-  TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
-  TW_SECRET_KEY: ${{ secrets.TW_SECRET_KEY }}
-
-jobs:
-  release-artifacts:
-    timeout-minutes: 60
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout branch
-        uses: actions/checkout@v4
-
-      # bun setup is required, because pnpm typdoc will run pnpm build and some packages uses bun for build
-      - name: Setup bun
-        uses: oven-sh/setup-bun@v1
-        with:
-          bun-version: 1.0.35
-
-      - name: Install
-        uses: ./.github/composite-actions/install
-
-      - name: Build
-        run: pnpm build
-
-      - name: Typedoc
-        run: pnpm typedoc
-
-      - name: Generate Docs
-        run: |
-          cd legacy_packages/sdk
-          pnpm generate-docs
-          cd ../react-core
-          pnpm generate-docs
-          cd ../react
-          pnpm generate-docs
-          cd ../..
-
-      - name: Generate Snippets
-        run: pnpm generate-snippets
-
-      - name: Commit changes
-        run: |
-          git config --local user.email "[email protected]"
-          git config --local user.name "GitHub Action"
-          git status
-          git add legacy_packages/react/typedoc/documentation.json.gz
-          git add legacy_packages/react-core/typedoc/documentation.json.gz
-          git add legacy_packages/react-native/typedoc/documentation.json.gz
-          git add legacy_packages/sdk/typedoc/documentation.json.gz
-          git add legacy_packages/storage/typedoc/documentation.json.gz
-          git add legacy_packages/wallets/typedoc/documentation.json.gz
-          git add packages/thirdweb/typedoc/documentation.json.gz
-          git add snippets/feature_snippets_react.json
-          git add snippets/feature_snippets_sdk.json
-          git add snippets/snippets.json
-          git commit -m "Commit Release Artifacts [skip ci]"
-          git push
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -14,7 +14,7 @@ public/dist
 .idea/
 .yalc/
 yalc.lock
-build/
+./build/
 playwright-report/
 .env/
 
@@ -25,4 +25,11 @@ legacy_packages/cli/artifacts/
 codecov
 
 # Remove sitemap files (generated at build time)
-sitemap*.xml
+sitemap*.xml
+
+# typedoc
+legacy_packages/*/typedoc/*
+packages/*/typedoc/*
+
+*storybook.log
+storybook-static

.vscode/settings.json

@@ -18,5 +18,8 @@
   },
   "[json]": {
     "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[markdown]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
 }

apps/dashboard/.env.example

@@ -40,6 +40,9 @@ NEXT_PUBLIC_STRIPE_KEY=
 
 NEXT_PUBLIC_STRIPE_PAYMENT_METHOD_CFG_ID=
 
+# Needed for contract analytics / blockchain data information
+CHAINSAW_API_KEY=
+
 #
 # Private (server)
 #
@@ -82,8 +85,12 @@ NEXT_TELEMETRY_DISABLED=1
 NEXT_PUBLIC_TRENCH_2_API_ENDPOINT=""
 
 # Unthread variables - only required for submitting the support form in /support
-NEXT_PUBLIC_UNTHREAD_TRIAGE_CHANNEL_ID=""
-NEXT_PUBLIC_UNTHREAD_EMAIL_INBOX_ID=""
-NEXT_PUBLIC_UNTHREAD_FREE_TIER_ID=""
-NEXT_PUBLIC_UNTHREAD_GROWTH_TIER_ID=""
-NEXT_PUBLIC_UNTHREAD_PRO_TIER_ID=""
+UNTHREAD_API_KEY=""
+UNTHREAD_TRIAGE_CHANNEL_ID=""
+UNTHREAD_EMAIL_INBOX_ID=""
+UNTHREAD_FREE_TIER_ID=""
+UNTHREAD_GROWTH_TIER_ID=""
+UNTHREAD_PRO_TIER_ID=""
+
+# Demo Engine
+NEXT_PUBLIC_DEMO_ENGINE_URL=""

apps/dashboard/.eslintrc.js

@@ -5,6 +5,7 @@ module.exports = {
     "plugin:import/typescript",
     "plugin:@next/next/recommended",
     "plugin:promise/recommended",
+    "plugin:storybook/recommended"
   ],
   rules: {
     "react-compiler/react-compiler": "error",
@@ -15,6 +16,21 @@ module.exports = {
         message:
           'Are you *sure* you need to use "useEffect" here? If you loading any async function prefer using "useQuery".',
       },
+      {
+        selector: "CallExpression[callee.name='defineChain']",
+        message:
+          "Use useV5DashboardChain instead if you are using it inside a component",
+      },
+      {
+        selector: "CallExpression[callee.name='defineDashboardChain']",
+        message:
+          "Use useV5DashboardChain instead if you are using it inside a component",
+      },
+      {
+        selector: "CallExpression[callee.name='mapV4ChainToV5Chain']",
+        message:
+          "Use useV5DashboardChain instead if you are using it inside a component",
+      },
     ],
     "no-restricted-imports": [
       "error",
@@ -65,6 +81,12 @@ module.exports = {
             message:
               "Import from `@chakra-ui/react` instead of `@chakra-ui/menu`.",
           },
+          {
+            name: "next/navigation",
+            importNames: ["useRouter"],
+            message:
+              'Use `import { useDashboardRouter } from "@/lib/DashboardRouter";` instead',
+          },
         ],
       },
     ],

apps/dashboard/.storybook/main.ts

@@ -0,0 +1,31 @@
+import { dirname, join } from "node:path";
+import type { StorybookConfig } from "@storybook/nextjs";
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): string {
+  return dirname(require.resolve(join(value, "package.json")));
+}
+const config: StorybookConfig = {
+  stories: ["../src/**/*.stories.tsx"],
+  addons: [
+    getAbsolutePath("@storybook/addon-onboarding"),
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@chromatic-com/storybook"),
+    getAbsolutePath("@storybook/addon-interactions"),
+  ],
+  framework: {
+    name: getAbsolutePath("@storybook/nextjs"),
+    options: {},
+  },
+  refs: {
+    "@chakra-ui/react": {
+      disable: true,
+    },
+  },
+  staticDirs: ["../public"],
+};
+export default config;

apps/dashboard/.storybook/preview.tsx

@@ -0,0 +1,46 @@
+import type { Preview } from "@storybook/react";
+import "@/styles/globals.css";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { Inter as interFont } from "next/font/google";
+// biome-ignore lint/correctness/noUnusedImports: <explanation>
+import React, { useEffect } from "react";
+import { cn } from "../src/@/lib/utils";
+
+// Note: Wrapping the Stoy with AppRouterProviders makes the storybook server time SUPER SLOW
+// so let's just not have it there - all stories should be independent from context anyway and just rely on props
+
+const queryClient = new QueryClient();
+
+const fontSans = interFont({
+  subsets: ["latin"],
+  variable: "--font-sans",
+});
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+
+  decorators: [
+    (Story) => {
+      useEffect(() => {
+        document.body.className = cn(
+          "font-sans antialiased",
+          fontSans.variable,
+        );
+      });
+      return (
+        <QueryClientProvider client={queryClient}>
+          <Story />
+        </QueryClientProvider>
+      );
+    },
+  ],
+};
+
+export default preview;

apps/dashboard/README.md

@@ -2,20 +2,13 @@
 
 This repo contains the full source for all of thirdweb.com and the thirdweb dashboard.
 
-## Building
+## Starting a local dev server
 
-### Install dependencies
-
-We use `pnpm`.
+Run from the root folder (thirdweb-dev/js):
 
 ```sh
-pnpm install
-```
-
-### Starting local dev server.
-
-```sh
-pnpm dev
+cd <path/to/thirdweb-dev/js>
+pnpm dashboard
 ```
 
 ### Building for production

apps/dashboard/next.config.js

@@ -5,8 +5,8 @@ const ContentSecurityPolicy = `
   img-src * data: blob:;
   media-src * data: blob:;
   object-src 'none';
-  style-src 'self' 'unsafe-inline';
-  font-src 'self';
+  style-src 'self' 'unsafe-inline' https://vercel.live;
+  font-src 'self' https://vercel.live https://assets.vercel.com;
   frame-src * data:;
   script-src 'self' 'unsafe-eval' 'unsafe-inline' 'wasm-unsafe-eval' 'inline-speculation-rules' *.thirdweb.com *.thirdweb-dev.com vercel.live js.stripe.com pg.paper.xyz portal.usecontext.io;
   connect-src * data: blob:;

apps/dashboard/package.json

@@ -18,44 +18,46 @@
     "build:analyze": "ANALYZE=true pnpm run build",
     "knip": "knip",
     "playwright": "playwright test",
-    "update-checkly": "npx checkly deploy"
+    "update-checkly": "npx checkly deploy",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@chakra-ui/react": "^2.8.2",
     "@chakra-ui/styled-system": "^2.9.2",
     "@chakra-ui/theme-tools": "^2.1.2",
     "@coinbase/onchainkit": "^0.14.2",
-    "@emotion/react": "^11.11.4",
+    "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.5",
-    "@hookform/resolvers": "^3.6.0",
+    "@hookform/resolvers": "^3.9.0",
     "@n8tb1t/use-scroll-position": "^2.0.3",
+    "@radix-ui/react-alert-dialog": "^1.1.1",
     "@radix-ui/react-aspect-ratio": "^1.0.3",
-    "@radix-ui/react-checkbox": "^1.1.0",
+    "@radix-ui/react-checkbox": "^1.1.1",
+    "@radix-ui/react-dialog": "1.1.1",
+    "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-label": "^2.1.0",
-    "@radix-ui/react-popover": "^1.1.0",
+    "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-radio-group": "^1.2.0",
-    "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
-    "@radix-ui/react-toast": "^1.2.1",
-    "@radix-ui/react-tooltip": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.0",
+    "@radix-ui/react-toggle": "^1.1.0",
+    "@radix-ui/react-toggle-group": "^1.1.0",
+    "@radix-ui/react-tooltip": "1.1.2",
     "@react-icons/all-files": "^4.1.0",
-    "@sentry/nextjs": "^8.8.0",
-    "@stripe/react-stripe-js": "^2.7.1",
+    "@sentry/nextjs": "^8.26.0",
+    "@stripe/react-stripe-js": "^2.7.3",
     "@stripe/stripe-js": "^3.5.0",
-    "@tanstack/query-async-storage-persister": "^4.36.1",
     "@tanstack/react-query": "^4.36.1",
-    "@tanstack/react-query-persist-client": "^4.36.1",
     "@tanstack/react-table": "^8.17.3",
-    "@thirdweb-dev/chains": "workspace:*",
     "@thirdweb-dev/react": "workspace:*",
-    "@thirdweb-dev/react-core": "workspace:*",
     "@thirdweb-dev/sdk": "workspace:*",
     "@thirdweb-dev/service-utils": "workspace:*",
     "@thirdweb-dev/storage": "workspace:*",
-    "@thirdweb-dev/wallets": "workspace:*",
     "@vercel/og": "^0.6.2",
-    "abitype": "1.0.4",
+    "abitype": "1.0.5",
     "chakra-react-select": "^4.7.6",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
@@ -64,12 +66,13 @@
     "date-fns": "^3.6.0",
     "ethers": "^5.7.2",
     "flat": "^6.0.1",
-    "framer-motion": "^11.2.11",
-    "fuse.js": "^7.0.0",
-    "idb-keyval": "^6.2.1",
+    "framer-motion": "^11.2.12",
+    "fuse.js": "7.0.0",
+    "ioredis": "^5.4.1",
+    "ipaddr.js": "^2.2.0",
     "lottie-react": "^2.4.0",
-    "lucide-react": "^0.395.0",
-    "next": "14.2.4",
+    "lucide-react": "^0.399.0",
+    "next": "14.2.5",
     "next-plausible": "^3.12.0",
     "next-seo": "^6.5.0",
     "next-themes": "^0.3.0",
@@ -78,7 +81,6 @@
     "pluralize": "^8.0.0",
     "posthog-js": "1.128.3",
     "posthog-js-opensource": "npm:[email protected]",
-    "prettier": "^3.3.2",
     "prism-react-renderer": "^2.3.1",
     "prismjs": "^1.29.0",
     "qrcode": "^1.5.3",
@@ -98,23 +100,34 @@
     "recharts": "^2.12.7",
     "remark-gfm": "^4.0.0",
     "server-only": "^0.0.1",
+    "sonner": "^1.5.0",
     "spdx-correct": "^3.2.0",
     "swagger-ui-react": "^5.17.14",
-    "tailwind-merge": "^2.3.0",
+    "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
     "thirdweb": "workspace:*",
     "tiny-invariant": "^1.3.3",
     "use-debounce": "^10.0.1",
+    "vaul": "^0.9.1",
     "zksync-ethers": "5.9.0",
-    "zod": "^3.23.8"
+    "zod": "3.23.8"
   },
   "devDependencies": {
     "@chakra-ui/cli": "^2.4.1",
+    "@chromatic-com/storybook": "^1.5.0",
     "@next/bundle-analyzer": "^14.2.4",
     "@next/eslint-plugin-next": "^14.2.4",
-    "@playwright/test": "^1.44.1",
+    "@playwright/test": "1.44.1",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-interactions": "^8.2.9",
+    "@storybook/addon-links": "^8.2.9",
+    "@storybook/addon-onboarding": "^8.2.9",
+    "@storybook/blocks": "^8.2.9",
+    "@storybook/nextjs": "^8.2.9",
+    "@storybook/react": "^8.2.9",
+    "@storybook/test": "^8.2.9",
     "@types/color": "^3.0.6",
-    "@types/node": "^20.14.6",
+    "@types/node": "20.14.9",
     "@types/papaparse": "^5.3.14",
     "@types/pluralize": "^0.0.33",
     "@types/qrcode": "^1.5.5",
@@ -123,26 +136,22 @@
     "@types/react-table": "^7.7.20",
     "@types/spdx-correct": "^3.1.3",
     "@types/swagger-ui-react": "^4.18.3",
-    "@typescript-eslint/eslint-plugin": "^7.13.1",
-    "@typescript-eslint/parser": "^7.14.1",
+    "@typescript-eslint/eslint-plugin": "7.14.1",
+    "@typescript-eslint/parser": "7.14.1",
     "autoprefixer": "^10.4.19",
-    "checkly": "^4.6.3",
-    "dotenv": "^16.4.5",
-    "eslint": "^8.57.0",
+    "checkly": "^4.7.0",
+    "eslint": "8.57.0",
     "eslint-config-biome": "^1.7.3",
-    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-inclusive-language": "^2.2.1",
-    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-promise": "^6.2.0",
-    "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-react-compiler": "0.0.0-experimental-51a85ea-20240601",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "knip": "^5.22.0",
+    "eslint-plugin-storybook": "^0.8.0",
+    "knip": "^5.23.1",
     "next-sitemap": "^4.2.3",
     "next-unused": "^0.0.6",
-    "tailwindcss": "^3.4.4",
-    "typescript": "5.5.2"
+    "storybook": "^8.2.9",
+    "tailwindcss": "^3.4.10",
+    "typescript": "5.5.4"
   },
   "next-unused": {
     "alias": {},

apps/dashboard/public/.well-known/apple-app-site-association

@@ -0,0 +1,30 @@
+{
+  "applinks": {
+    "apps": ["XYHGSFAMHX.com.thirdweb.demo"],
+    "details": [
+      {
+        "appIDs": ["XYHGSFAMHX.com.thirdweb.demo"],
+        "components": [
+          {
+            "#": "no_universal_links",
+            "exclude": true,
+            "comment": "Matches any URL with a fragment that equals no_universal_links and instructs the system not to open it as a universal link."
+          },
+          {
+            "/": "/mobile-wallet-protocol",
+            "comment": "Matches any URL with a path that starts with /mobile-wallet-protocol for coinbase wallet mobile redirects."
+          },
+          {
+            "/": "/dashboard/*",
+            "exclude": true,
+            "comment": "no universal link for dashboard"
+          }
+        ]
+      }
+    ]
+  },
+  "webcredentials": {
+    "apps": ["XYHGSFAMHX.com.thirdweb.demo"]
+  },
+  "appclips": {}
+}

apps/dashboard/public/.well-known/assetlinks.json

@@ -0,0 +1,15 @@
+[
+  {
+    "relation": [
+      "delegate_permission/common.handle_all_urls",
+      "delegate_permission/common.get_login_creds"
+    ],
+    "target": {
+      "namespace": "android_app",
+      "package_name": "com.thirdweb.demo",
+      "sha256_cert_fingerprints": [
+        "40:EB:0D:96:57:F3:D8:1F:BA:87:B8:E4:26:E0:3A:DB:C8:35:96:A8:A2:B2:55:F0:B1:64:F1:39:F8:6F:7E:EB"
+      ]
+    }
+  }
+]

apps/dashboard/public/assets/login/background.svg

@@ -0,0 +1,17 @@
+<svg width="1073" height="504" viewBox="0 0 1073 504" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_48_35063" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="1351" height="840">
+<path d="M1350.46 0H0V840H1350.46V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_48_35063)">
+<path d="M4.77995 70.7069L4.77697 70.6996C-9.16164 36.4867 16.1683 1 51.6663 1H279.112C300.663 1 318.394 13.6646 325.999 32.6791L506.922 484.987L506.929 485.004L506.937 485.022C511.986 496.381 512.002 510.315 506.922 523.013L393.199 807.321L393.197 807.328L393.194 807.335C376.734 850.383 315.901 850.456 298.132 807.318C298.131 807.316 298.13 807.314 298.129 807.312L4.77995 70.7069ZM842.195 70.7069L842.192 70.6996C828.253 36.4867 853.583 1 889.081 1H1116.53C1138.08 1 1155.81 13.6646 1163.41 32.6791L1344.34 484.987L1344.34 485.004L1344.35 485.022C1349.4 496.381 1349.42 510.315 1344.34 523.013L1230.61 807.321L1230.61 807.328L1230.61 807.335C1214.15 850.382 1153.32 850.456 1135.55 807.32C1135.55 807.317 1135.55 807.314 1135.54 807.312L842.195 70.7069ZM444.192 69.4575C444.191 69.4542 444.19 69.451 444.189 69.4477C432.783 36.4753 456.887 1 492.355 1H691.37C712.903 1 731.93 14.9382 739.544 33.9578C739.546 33.9623 739.548 33.9669 739.549 33.9714L904.945 486.224C904.946 486.228 904.948 486.233 904.949 486.238C908.751 497.653 908.752 509.053 904.95 520.469C904.948 520.474 904.946 520.479 904.945 520.484L805.448 791.836C788.971 836.198 725.585 836.198 709.108 791.836L444.192 69.4575Z" stroke="url(#paint0_linear_48_35063)" stroke-width="2"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_48_35063" x1="-91.767" y1="269.743" x2="811.065" y2="1296.62" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F213A4"/>
+<stop offset="0.1517" stop-color="#E011A7"/>
+<stop offset="0.4554" stop-color="#B20DAF"/>
+<stop offset="0.8789" stop-color="#6806BB"/>
+<stop offset="1" stop-color="#5204BF"/>
+</linearGradient>
+</defs>
+</svg>

apps/dashboard/redirects.js

@@ -119,11 +119,6 @@ function redirects() {
       destination: "/template/erc721",
       permanent: false,
     },
-    {
-      source: "/abuse",
-      destination: "https://forms.gle/v9UJtHbVw8fXypcd7",
-      permanent: false,
-    },
     {
       source: "/create-api-key",
       destination: "/dashboard/settings/api-keys",
@@ -136,12 +131,17 @@ function redirects() {
     },
     {
       source: "/dashboard/connect",
-      destination: "/dashboard/connect/playground",
+      destination: "/dashboard/connect/in-app-wallets",
+      permanent: false,
+    },
+    {
+      source: "/dashboard/connect/playground",
+      destination: "https://playground.thirdweb.com/connect/sign-in/button",
       permanent: false,
     },
     {
       source: "/dashboard/wallet",
-      destination: "/dashboard/connect/playground",
+      destination: "https://playground.thirdweb.com/connect/sign-in/button",
       permanent: false,
     },
     {
@@ -166,7 +166,7 @@ function redirects() {
     },
     {
       source: "/dashboard/wallets",
-      destination: "/dashboard/connect/playground",
+      destination: "https://playground.thirdweb.com/connect/sign-in/button",
       permanent: false,
     },
     {
@@ -186,7 +186,7 @@ function redirects() {
     },
     {
       source: "/dashboard/wallets/connect",
-      destination: "/dashboard/connect/playground",
+      destination: "https://playground.thirdweb.com/connect/sign-in/button",
       permanent: false,
     },
     {
@@ -270,6 +270,25 @@ function redirects() {
       destination: "/in-app-wallets",
       permanent: false,
     },
+    {
+      source: "/dashboard/connect/ecosystem/:slug((?!create$)[^/]+)",
+      destination: "/dashboard/connect/ecosystem/:slug/permissions",
+      permanent: false,
+    },
+    // temporarily redirect cli login to support page
+    {
+      source: "/cli/login",
+      destination:
+        "https://support.thirdweb.com/troubleshooting-errors/7Y1BqKNvtLdBv5fZkRZZB3/issue-linking-device-on-the-authorization-page-via-thirdweb-cli/cn9LRA3ax7XCP6uxwRYdvx",
+      permanent: false,
+    },
+
+    // temporary redirect gas -> explore page
+    {
+      source: "/gas",
+      destination: "/explore",
+      permanent: false,
+    },
   ];
 }
 

apps/dashboard/src/@/api/projects.ts

@@ -0,0 +1,73 @@
+import "server-only";
+import { COOKIE_ACTIVE_ACCOUNT, COOKIE_PREFIX_TOKEN } from "@/constants/cookie";
+import { cookies } from "next/headers";
+
+const THIRDWEB_API_HOST =
+  process.env.NEXT_PUBLIC_THIRDWEB_API_HOST || "https://api.thirdweb.com";
+
+export type Project = {
+  id: string;
+  name: string;
+  createdAt: Date;
+  updatedAt: Date;
+  deletedAt: Date | null;
+  bannedAt: Date | null;
+  domains: string[];
+  bundleIds: string[];
+  redirectUrls: string[];
+  lastAccessedAt: Date | null;
+  slug: string;
+  teamId: string;
+  publishableKey: string;
+  // image: string; // TODO
+};
+
+export async function getProjects(teamSlug: string) {
+  const cookiesManager = cookies();
+  const activeAccount = cookiesManager.get(COOKIE_ACTIVE_ACCOUNT)?.value;
+  const token = activeAccount
+    ? cookiesManager.get(COOKIE_PREFIX_TOKEN + activeAccount)?.value
+    : null;
+
+  if (!token) {
+    return [];
+  }
+
+  const teamsRes = await fetch(
+    `${THIRDWEB_API_HOST}/v1/teams/${teamSlug}/projects`,
+    {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    },
+  );
+  if (teamsRes.ok) {
+    return (await teamsRes.json())?.result as Project[];
+  }
+  return [];
+}
+
+export async function getProject(teamSlug: string, projectSlug: string) {
+  const cookiesManager = cookies();
+  const activeAccount = cookiesManager.get(COOKIE_ACTIVE_ACCOUNT)?.value;
+  const token = activeAccount
+    ? cookiesManager.get(COOKIE_PREFIX_TOKEN + activeAccount)?.value
+    : null;
+
+  if (!token) {
+    return null;
+  }
+
+  const teamsRes = await fetch(
+    `${THIRDWEB_API_HOST}/v1/teams/${teamSlug}/projects/${projectSlug}`,
+    {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    },
+  );
+  if (teamsRes.ok) {
+    return (await teamsRes.json())?.result as Project;
+  }
+  return null;
+}

apps/dashboard/src/@/api/team-members.ts

@@ -0,0 +1,53 @@
+import "server-only";
+import { COOKIE_ACTIVE_ACCOUNT, COOKIE_PREFIX_TOKEN } from "@/constants/cookie";
+import { cookies } from "next/headers";
+
+const THIRDWEB_API_HOST =
+  process.env.NEXT_PUBLIC_THIRDWEB_API_HOST || "https://api.thirdweb.com";
+
+const TeamAccountRole = {
+  OWNER: "OWNER",
+  MEMBER: "MEMBER",
+} as const;
+
+export type TeamAccountRole =
+  (typeof TeamAccountRole)[keyof typeof TeamAccountRole];
+
+export type TeamMember = {
+  account: {
+    name: string;
+    email: string | null;
+  };
+} & {
+  deletedAt: Date | null;
+  accountId: string;
+  teamId: string;
+  createdAt: Date;
+  updatedAt: Date;
+  role: TeamAccountRole;
+};
+
+export async function getMembers(teamSlug: string) {
+  const cookiesManager = cookies();
+  const activeAccount = cookiesManager.get(COOKIE_ACTIVE_ACCOUNT)?.value;
+  const token = activeAccount
+    ? cookiesManager.get(COOKIE_PREFIX_TOKEN + activeAccount)?.value
+    : null;
+
+  if (!token) {
+    return [];
+  }
+
+  const teamsRes = await fetch(
+    `${THIRDWEB_API_HOST}/v1/teams/${teamSlug}/members`,
+    {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    },
+  );
+  if (teamsRes.ok) {
+    return (await teamsRes.json())?.result as TeamMember[];
+  }
+  return [];
+}

apps/dashboard/src/@/api/team.ts

@@ -0,0 +1,58 @@
+import "server-only";
+import { COOKIE_ACTIVE_ACCOUNT, COOKIE_PREFIX_TOKEN } from "@/constants/cookie";
+import { cookies } from "next/headers";
+
+const THIRDWEB_API_HOST =
+  process.env.NEXT_PUBLIC_THIRDWEB_API_HOST || "https://api.thirdweb.com";
+
+export type Team = {
+  name: string;
+  slug: string;
+  // image: string; // -> TODO
+  billingPlan: "pro" | "growth" | "free";
+  billingStatus: "validPayment" | (string & {}); // what's the other value?
+};
+
+export async function getTeamBySlug(slug: string) {
+  const cookiesManager = cookies();
+  const activeAccount = cookiesManager.get(COOKIE_ACTIVE_ACCOUNT)?.value;
+  const token = activeAccount
+    ? cookiesManager.get(COOKIE_PREFIX_TOKEN + activeAccount)?.value
+    : null;
+
+  if (!token) {
+    return null;
+  }
+
+  const teamRes = await fetch(`${THIRDWEB_API_HOST}/v1/teams/${slug}`, {
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  });
+  if (teamRes.ok) {
+    return (await teamRes.json())?.result as Team;
+  }
+  return null;
+}
+
+export async function getTeams() {
+  const cookiesManager = cookies();
+  const activeAccount = cookiesManager.get(COOKIE_ACTIVE_ACCOUNT)?.value;
+  const token = activeAccount
+    ? cookiesManager.get(COOKIE_PREFIX_TOKEN + activeAccount)?.value
+    : null;
+
+  if (!token) {
+    return [];
+  }
+
+  const teamsRes = await fetch(`${THIRDWEB_API_HOST}/v1/teams`, {
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  });
+  if (teamsRes.ok) {
+    return (await teamsRes.json())?.result as Team[];
+  }
+  return [];
+}

apps/dashboard/src/@/components/blocks/MobileSidebar.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
+import { useState } from "react";
+import { NavLink } from "../ui/NavLink";
+
+export function MobileSidebar(props: {
+  links?: { href: string; label: React.ReactNode }[];
+  footer?: React.ReactNode;
+  trigger: React.ReactNode;
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>{props.trigger}</DialogTrigger>
+      <DialogContent
+        className="p-4 rounded-t-xl rounded-b-none"
+        dialogCloseClassName="hidden"
+        onClick={(e) => {
+          if (e.target instanceof HTMLAnchorElement) {
+            setIsOpen(false);
+          }
+        }}
+      >
+        <div className="flex flex-col gap-2">
+          {props.links?.map((link) => {
+            return (
+              <Button size="sm" variant="ghost" asChild key={link.href}>
+                <NavLink
+                  href={link.href}
+                  className="!text-left justify-start flex gap-2 h-auto py-3"
+                  activeClassName="bg-accent"
+                >
+                  {link.label}
+                </NavLink>
+              </Button>
+            );
+          })}
+        </div>
+        {props.footer}
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/dashboard/src/@/components/blocks/Sidebar.tsx

@@ -0,0 +1,33 @@
+import type React from "react";
+import { cn } from "../../lib/utils";
+import { NavLink } from "../ui/NavLink";
+
+export type SidebarContentProps = {
+  header?: React.ReactNode;
+  links: { href: string; label: React.ReactNode }[];
+  className?: string;
+};
+
+export function Sidebar(props: SidebarContentProps) {
+  return (
+    <aside
+      className={cn("w-[240px] flex-shrink-0 hidden lg:block", props.className)}
+    >
+      <div className="sticky top-0 pt-8">
+        {props.header}
+        <div className="flex flex-col border-l-2 border-border">
+          {props.links?.map((link) => (
+            <NavLink
+              key={link.href}
+              href={link.href}
+              className="text-sm py-1.5 pl-4 text-muted-foreground hover:text-foreground border-l-2 ml-[-2px] border-transparent hover:border-foreground transition-colors"
+              activeClassName="text-foreground border-link-foreground"
+            >
+              {link.label}
+            </NavLink>
+          ))}
+        </div>
+      </div>
+    </aside>
+  );
+}

apps/dashboard/src/@/components/blocks/app-footer.tsx

@@ -0,0 +1,142 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { ThirdwebMiniLogo } from "app/components/ThirdwebMiniLogo";
+import Link from "next/link";
+import {
+  SiDiscord,
+  SiGithub,
+  SiInstagram,
+  SiLinkedin,
+  SiReddit,
+  SiTiktok,
+  SiX,
+  SiYoutube,
+} from "react-icons/si";
+
+type AppFooterProps = {
+  className?: string;
+};
+
+export function AppFooter(props: AppFooterProps) {
+  return (
+    <footer
+      className={cn(
+        "bg-background border-t border-border py-6 md:py-8 w-full",
+        props.className,
+      )}
+    >
+      <div className="container flex flex-col gap-4 md:gap-6">
+        {/* top row */}
+        <div className="flex flex-col md:flex-row gap-4 md:justify-between md:items-center">
+          <div className="flex flex-row gap-3 items-center">
+            <ThirdwebMiniLogo className="h-7" />
+            <p className="text-sm text-secondary-foreground">© 2024 thirdweb</p>
+          </div>
+          <div className="flex flex-row gap-3">
+            <Button size="icon" variant="ghost" asChild className="size-9">
+              <Link href="https://github.com/thirdweb-dev" target="_blank">
+                <SiGithub className="text-secondary-foreground size-5" />
+              </Link>
+            </Button>
+            <Button size="icon" variant="ghost" asChild className="size-9">
+              <Link href="https://www.tiktok.com/@thirdweb" target="_blank">
+                <SiTiktok className="text-secondary-foreground size-5" />
+              </Link>
+            </Button>
+            <Button size="icon" variant="ghost" asChild className="size-9">
+              <Link href="https://www.instagram.com/thirdweb/" target="_blank">
+                <SiInstagram className="text-secondary-foreground size-5" />
+              </Link>
+            </Button>
+            <Button size="icon" variant="ghost" asChild className="size-9">
+              <Link
+                href="hhttps://www.linkedin.com/company/third-web/"
+                target="_blank"
+              >
+                <SiLinkedin className="text-secondary-foreground size-5" />
+              </Link>
+            </Button>
+            <Button size="icon" variant="ghost" asChild className="size-9">
+              <Link href="https://www.youtube.com/@thirdweb_" target="_blank">
+                <SiYoutube className="text-secondary-foreground size-5" />
+              </Link>
+            </Button>
+            <Button size="icon" variant="ghost" asChild className="size-9">
+              <Link href="https://discord.gg/thirdweb" target="_blank">
+                <SiDiscord className="text-secondary-foreground size-5" />
+              </Link>
+            </Button>
+            <Button size="icon" variant="ghost" asChild className="size-9">
+              <Link href="https://www.reddit.com/r/thirdweb/" target="_blank">
+                <SiReddit className="text-secondary-foreground size-5" />
+              </Link>
+            </Button>
+            <Button size="icon" variant="ghost" asChild className="size-9">
+              <Link href="https://x.com/thirdweb" target="_blank">
+                <SiX className="text-secondary-foreground size-5" />
+              </Link>
+            </Button>
+          </div>
+        </div>
+        {/* bottom row */}
+        <div className="grid grid-rows-5 grid-cols-2 grid-flow-col gap-2 md:flex md:flex-row md:justify-between">
+          <Link
+            className="py-[6px] px-[10px] text-secondary-foreground text-sm hover:underline"
+            href="/"
+          >
+            Home
+          </Link>
+          <Link
+            className="py-[6px] px-[10px] text-secondary-foreground text-sm hover:underline"
+            href="https://blog.thirdweb.com"
+            target="_blank"
+          >
+            Blog
+          </Link>
+          <Link
+            className="py-[6px] px-[10px] text-secondary-foreground text-sm hover:underline"
+            href="https://portal.thirdweb.com/changelog"
+            target="_blank"
+          >
+            Changelog
+          </Link>
+          <Link
+            className="py-[6px] px-[10px] text-secondary-foreground text-sm hover:underline"
+            href="https://feedback.thirdweb.com/"
+            target="_blank"
+          >
+            Feedback
+          </Link>
+          <Link
+            className="py-[6px] px-[10px] text-secondary-foreground text-sm hover:underline"
+            href="https://thirdweb.com/privacy"
+            target="_blank"
+          >
+            Privacy Policy
+          </Link>
+          <Link
+            className="py-[6px] px-[10px] text-secondary-foreground text-sm hover:underline"
+            href="https://thirdweb.com/tos"
+            target="_blank"
+          >
+            Terms of Service
+          </Link>
+          <Link
+            className="py-[6px] px-[10px] text-secondary-foreground text-sm hover:underline"
+            href="https://thirdweb.com/gas"
+            target="_blank"
+          >
+            Gas Estimator
+          </Link>
+          <Link
+            className="py-[6px] px-[10px] text-secondary-foreground text-sm hover:underline"
+            href="https://thirdweb.com/chainlist"
+            target="_blank"
+          >
+            Chain List
+          </Link>
+        </div>
+      </div>
+    </footer>
+  );
+}

apps/dashboard/src/@/components/blocks/charts/area-chart.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { useMemo } from "react";
+
+export type ThirdwebAreaChartProps<TConfig extends ChartConfig> = {
+  // metadata
+  title: string;
+  description?: string;
+  // chart config
+  config: TConfig;
+  data: Array<Record<keyof TConfig, number> & { time: number | string | Date }>;
+  showLegend?: boolean;
+
+  // chart className
+  chartClassName?: string;
+};
+
+export function ThirdwebAreaChart<TConfig extends ChartConfig>(
+  props: ThirdwebAreaChartProps<TConfig>,
+) {
+  const configKeys = useMemo(() => Object.keys(props.config), [props.config]);
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{props.title}</CardTitle>
+        {props.description && (
+          <CardDescription>{props.description}</CardDescription>
+        )}
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={props.config} className={props.chartClassName}>
+          <AreaChart
+            accessibilityLayer
+            data={props.data}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="time"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => new Date(value).toLocaleDateString()}
+            />
+            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+            <defs>
+              {configKeys.map((key) => (
+                <linearGradient
+                  key={key}
+                  id={`fill_${key}`}
+                  x1="0"
+                  y1="0"
+                  x2="0"
+                  y2="1"
+                >
+                  <stop
+                    offset="5%"
+                    stopColor={`var(--color-${key})`}
+                    stopOpacity={0.8}
+                  />
+                  <stop
+                    offset="95%"
+                    stopColor={`var(--color-${key})`}
+                    stopOpacity={0.1}
+                  />
+                </linearGradient>
+              ))}
+            </defs>
+            {configKeys.map((key) => (
+              <Area
+                key={key}
+                dataKey={key}
+                type="natural"
+                fill={`url(#fill_${key})`}
+                fillOpacity={0.4}
+                stroke={`var(--color-${key})`}
+                stackId="a"
+              />
+            ))}
+
+            {props.showLegend && (
+              <ChartLegend content={<ChartLegendContent />} />
+            )}
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+}

apps/dashboard/src/@/components/blocks/charts/bar-chart.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { useMemo } from "react";
+
+export type ThirdwebBarChartProps<TConfig extends ChartConfig> = {
+  // metadata
+  title: string;
+  description?: string;
+  // chart config
+  config: TConfig;
+  data: Array<Record<keyof TConfig, number> & { time: number | string | Date }>;
+  showLegend?: boolean;
+  variant?: "stacked" | "grouped";
+  // chart className
+  chartClassName?: string;
+};
+
+export function ThirdwebBarChart<TConfig extends ChartConfig>(
+  props: ThirdwebBarChartProps<TConfig>,
+) {
+  const configKeys = useMemo(() => Object.keys(props.config), [props.config]);
+  // if there are more than 4 keys then we should stack them by default
+  const variant =
+    props.variant || configKeys.length > 4 ? "stacked" : "grouped";
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{props.title}</CardTitle>
+        {props.description && (
+          <CardDescription>{props.description}</CardDescription>
+        )}
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={props.config} className={props.chartClassName}>
+          <BarChart accessibilityLayer data={props.data}>
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="time"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={10}
+              tickFormatter={(value) => new Date(value).toLocaleDateString()}
+            />
+            <ChartTooltip content={<ChartTooltipContent hideLabel />} />
+            {props.showLegend && (
+              <ChartLegend content={<ChartLegendContent />} />
+            )}
+            {configKeys.map((key, idx) => (
+              <Bar
+                key={key}
+                dataKey={key}
+                // if stacked then they should all be the same stackId
+                // if grouped then they should all be unique stackId (so the key works great)
+                stackId={variant === "stacked" ? "a" : key}
+                fill={`var(--color-${key})`}
+                // if stacked then we need to figure out the radius based on the index in the array
+                // if grouped then we can just use the same radius for all
+                radius={
+                  variant === "stacked"
+                    ? idx === 0
+                      ? [0, 0, 4, 4]
+                      : idx === configKeys.length - 1
+                        ? [4, 4, 0, 0]
+                        : [0, 0, 0, 0]
+                    : [4, 4, 4, 4]
+                }
+              />
+            ))}
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+}

apps/dashboard/src/@/components/color-mode-toggle.tsx

@@ -1,31 +1,30 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
+import { ClientOnly } from "components/ClientOnly/ClientOnly";
 import { Moon, Sun } from "lucide-react";
 import { useTheme } from "next-themes";
-import * as React from "react";
-import { ClientOnly } from "../../components/ClientOnly/ClientOnly";
 import { Skeleton } from "./ui/skeleton";
 
 export function ColorModeToggle() {
   const { setTheme, theme } = useTheme();
 
   return (
-    <Button
-      variant="ghost"
-      size="icon"
-      onClick={() => {
-        setTheme(theme === "dark" ? "light" : "dark");
-      }}
-      aria-label="Toggle theme"
-    >
-      <ClientOnly ssr={<Skeleton className="size-6 bg-accent border" />}>
+    <ClientOnly ssr={<Skeleton className="size-10 bg-accent border" />}>
+      <Button
+        variant="ghost"
+        size="icon"
+        onClick={() => {
+          setTheme(theme === "dark" ? "light" : "dark");
+        }}
+        aria-label="Toggle theme"
+      >
         {theme === "light" ? (
           <Sun strokeWidth={1} className="size-6" />
         ) : (
           <Moon strokeWidth={1} className="size-6" />
         )}
-      </ClientOnly>
-    </Button>
+      </Button>
+    </ClientOnly>
   );
 }

apps/dashboard/src/@/components/theme-provider.tsx

@@ -1,9 +1,18 @@
 "use client";
 
-import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { ThemeProvider as NextThemesProvider, useTheme } from "next-themes";
 import type { ThemeProviderProps } from "next-themes/dist/types";
-import * as React from "react";
+import { useEffect } from "react";
 
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
   return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
 }
+
+export function useForceDarkTheme() {
+  const { setTheme } = useTheme();
+
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    setTheme("dark");
+  }, [setTheme]);
+}

apps/dashboard/src/@/components/ui/CodeBlock.tsx

@@ -0,0 +1,46 @@
+import { Highlight } from "prism-react-renderer";
+import { cn } from "../../lib/utils";
+import { CopyButton } from "./CopyButton";
+import { Card } from "./card";
+
+interface CodeBlockProps {
+  code: string;
+  language?: string;
+  className?: string;
+  canCopy?: boolean;
+}
+
+export const CodeBlock = ({
+  code,
+  language = "sh",
+  canCopy = true,
+}: CodeBlockProps) => {
+  return (
+    <Highlight code={code} language={language}>
+      {({ className, tokens, getLineProps, getTokenProps }) => (
+        <Card className={className}>
+          {canCopy && (
+            <CopyButton text={code} className="float-right p-2 m-2" />
+          )}
+
+          <div
+            className={cn(
+              "block font-mono text-sm whitespace-pre-wrap p-4 overflow-auto",
+              className,
+            )}
+          >
+            {tokens.map((line, i) => (
+              // biome-ignore lint/suspicious/noArrayIndexKey: index IS the key here
+              <div {...getLineProps({ line, key: i })} key={i}>
+                {line.map((token, key) => (
+                  // biome-ignore lint/suspicious/noArrayIndexKey: index IS the key here
+                  <span {...getTokenProps({ token, key })} key={key} />
+                ))}
+              </div>
+            ))}
+          </div>
+        </Card>
+      )}
+    </Highlight>
+  );
+};

apps/dashboard/src/@/components/ui/ConfirmationDialog.tsx

@@ -0,0 +1,64 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import type { buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import type { VariantProps } from "class-variance-authority";
+import type React from "react";
+
+export interface ConfirmationDialogProps
+  extends VariantProps<typeof buttonVariants> {
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  onSubmit?: () => void;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export function ConfirmationDialog({
+  title,
+  description,
+  onSubmit,
+  open,
+  onOpenChange,
+  children,
+  variant = "primary",
+  className,
+}: ConfirmationDialogProps) {
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogTrigger asChild>{children}</AlertDialogTrigger>
+
+      <AlertDialogContent className={cn("w-[90vw] sm:w-auto", className)}>
+        <AlertDialogHeader className="w-full sm:w-auto">
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          <AlertDialogDescription>{description}</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter className="w-full sm:w-auto">
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+
+          <AlertDialogAction
+            variant={variant}
+            type="submit"
+            onClick={() => {
+              onSubmit?.();
+              onOpenChange?.(false);
+            }}
+          >
+            Continue
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

apps/dashboard/src/@/components/ui/CopyAddressButton.tsx

@@ -1,10 +1,7 @@
 "use client";
 
-import { CheckIcon, CopyIcon } from "lucide-react";
-import { useState } from "react";
-import { cn } from "../../lib/utils";
-import { Button } from "./button";
-import { ToolTipLabel } from "./tooltip";
+import { cn } from "@/lib/utils";
+import { CopyTextButton } from "./CopyTextButton";
 
 export function CopyAddressButton(props: {
   address: string;
@@ -17,36 +14,18 @@ export function CopyAddressButton(props: {
     | "outline"
     | "secondary"
     | "ghost";
+  copyIconPosition: "left" | "right";
 }) {
-  const [isCopied, setIsCopied] = useState(false);
   const shortenedAddress = `${props.address.slice(0, 6)}...${props.address.slice(0, 4)}`;
 
   return (
-    <ToolTipLabel label="Copy address">
-      <Button
-        variant={props.variant || "outline"}
-        aria-label="Copy"
-        className={cn(
-          "h-auto w-auto px-2.5 py-1.5 flex gap-2 text-xs rounded-lg font-mono text-foreground",
-          props.className,
-        )}
-        onClick={() => {
-          navigator.clipboard.writeText(props.address);
-          setIsCopied(true);
-          setTimeout(() => setIsCopied(false), 1000);
-        }}
-      >
-        {isCopied ? (
-          <CheckIcon
-            className={cn("size-3 text-green-500", props.iconClassName)}
-          />
-        ) : (
-          <CopyIcon
-            className={cn("size-3 text-muted-foreground", props.iconClassName)}
-          />
-        )}
-        {shortenedAddress}
-      </Button>
-    </ToolTipLabel>
+    <CopyTextButton
+      textToCopy={props.address}
+      textToShow={shortenedAddress}
+      tooltip="Copy Address"
+      className={cn("font-mono text-sm", props.className)}
+      variant={props.variant}
+      copyIconPosition={props.copyIconPosition}
+    />
   );
 }

apps/dashboard/src/@/components/ui/CopyButton.tsx

@@ -1,8 +1,8 @@
 "use client";
 
+import { cn } from "@/lib/utils";
 import { CheckIcon, CopyIcon } from "lucide-react";
 import { useState } from "react";
-import { cn } from "../../lib/utils";
 import { Button } from "./button";
 import { ToolTipLabel } from "./tooltip";
 

apps/dashboard/src/@/components/ui/CopyTextButton.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { useState } from "react";
+import { Button } from "./button";
+import { ToolTipLabel } from "./tooltip";
+
+export function CopyTextButton(props: {
+  textToShow: string;
+  textToCopy: string;
+  tooltip: string;
+  className?: string;
+  iconClassName?: string;
+  variant?:
+    | "primary"
+    | "default"
+    | "destructive"
+    | "outline"
+    | "secondary"
+    | "ghost";
+  copyIconPosition: "left" | "right";
+}) {
+  const [isCopied, setIsCopied] = useState(false);
+  const copyButton = isCopied ? (
+    <CheckIcon
+      className={cn("size-3 text-green-500 shrink-0", props.iconClassName)}
+    />
+  ) : (
+    <CopyIcon
+      className={cn(
+        "size-3 text-muted-foreground shrink-0",
+        props.iconClassName,
+      )}
+    />
+  );
+
+  return (
+    <ToolTipLabel label={props.tooltip}>
+      <Button
+        variant={props.variant || "outline"}
+        aria-label={props.tooltip}
+        className={cn(
+          "h-auto w-auto px-2.5 py-1.5 flex gap-2 rounded-lg text-foreground font-normal",
+          props.className,
+        )}
+        onClick={() => {
+          navigator.clipboard.writeText(props.textToCopy);
+          setIsCopied(true);
+          setTimeout(() => setIsCopied(false), 1000);
+        }}
+      >
+        {props.copyIconPosition === "right" ? (
+          <>
+            <span className="truncate min-w-0"> {props.textToShow} </span>
+            {copyButton}
+          </>
+        ) : (
+          <>
+            {copyButton}
+            <span className="truncate min-w-0"> {props.textToShow} </span>
+          </>
+        )}
+      </Button>
+    </ToolTipLabel>
+  );
+}

apps/dashboard/src/@/components/ui/DatePickerWithRange.tsx

@@ -69,7 +69,7 @@ export function DatePickerWithRange(props: {
         <DynamicHeight>
           <div>
             {!isValid && (
-              <p className="text-sm pt-2 justify-center text-destructive-foreground text-center flex items-center gap-2">
+              <p className="text-sm pt-2 justify-center text-destructive-text text-center flex items-center gap-2">
                 <CalendarX2Icon className="h-4 w-4" />
                 Invalid date range
               </p>
@@ -113,9 +113,9 @@ export function DatePickerWithRange(props: {
                   }
                 }}
                 classNames={{
-                  day_range_start: "!bg-inverted",
+                  day_range_start: "!bg-inverted !text-inverted-foreground",
                   day_range_end:
-                    "!bg-inverted/20 !text-inverted pointer-events-none",
+                    "!bg-inverted/50 !text-inverted-foreground pointer-events-none",
                 }}
               />
             )}
@@ -135,9 +135,9 @@ export function DatePickerWithRange(props: {
                   }
                 }}
                 classNames={{
-                  day_range_end: "!bg-inverted",
+                  day_range_end: "!bg-inverted !text-inverted-foreground",
                   day_range_start:
-                    "!bg-inverted/20 !text-inverted pointer-events-none",
+                    "!bg-inverted/50 !text-inverted-foreground pointer-events-none",
                 }}
               />
             )}

apps/dashboard/src/@/components/ui/DynamicHeight.tsx

@@ -1,7 +1,8 @@
 "use client";
 
+import { useIsomorphicLayoutEffect } from "@/lib/useIsomorphicLayoutEffect";
 import type React from "react";
-import { useLayoutEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
 
 export function DynamicHeight(props: {
   children: React.ReactNode;
@@ -33,11 +34,11 @@ export function DynamicHeight(props: {
   );
 }
 
-export function useHeightObserver() {
+function useHeightObserver() {
   const elementRef = useRef<HTMLDivElement>(null);
   const [height, setHeight] = useState<number | undefined>();
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const element = elementRef.current;
     if (!element) {
       return;

apps/dashboard/src/@/components/ui/List/List.module.css

@@ -0,0 +1,25 @@
+.unorderedList,
+.orderedList {
+  @apply pl-5 leading-relaxed list-none text-secondary-foreground;
+}
+
+.unorderedList > li {
+  @apply pb-1 pl-2 list-disc;
+}
+
+.orderedList > li {
+  @apply pb-1 pl-2 list-decimal;
+}
+
+.unorderedList > li::marker {
+  @apply text-muted-foreground !m-0 text-left;
+}
+
+.orderedList > li::marker {
+  @apply text-muted-foreground text-left;
+}
+
+.unorderedList > li:hover::marker,
+.orderedList > li:hover::marker {
+  @apply text-foreground;
+}

apps/dashboard/src/@/components/ui/List/List.tsx

@@ -0,0 +1,9 @@
+import styles from "./List.module.css";
+
+export function UnorderedList(props: { children?: React.ReactNode }) {
+  return <ul className={styles.unorderedList}>{props.children}</ul>;
+}
+
+export function OrderedList(props: { children?: React.ReactNode }) {
+  return <ul className={styles.orderedList}>{props.children}</ul>;
+}

apps/dashboard/src/@/components/ui/NavLink.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+export type NavButtonProps = {
+  className?: string;
+  activeClassName?: string;
+  href: string;
+};
+
+export function NavLink(props: React.PropsWithChildren<NavButtonProps>) {
+  const pathname = usePathname();
+  const isActive = pathname ? pathname.startsWith(props.href) : false;
+  return (
+    <Link
+      href={props.href}
+      className={cn(props.className, isActive && props.activeClassName)}
+      target={props.href.startsWith("http") ? "_blank" : undefined}
+    >
+      {props.children}
+    </Link>
+  );
+}

apps/dashboard/src/@/components/ui/ScrollShadow/ScrollShadow.tsx

@@ -1,7 +1,8 @@
 "use client";
 
+import { useIsomorphicLayoutEffect } from "@/lib/useIsomorphicLayoutEffect";
 import { cn } from "@/lib/utils";
-import { useLayoutEffect, useRef } from "react";
+import { useRef } from "react";
 import styles from "./ScrollShadow.module.css";
 
 export function ScrollShadow(props: {
@@ -17,7 +18,7 @@ export function ScrollShadow(props: {
   const shadowRightEl = useRef<HTMLDivElement>(null);
   const wrapperEl = useRef<HTMLDivElement>(null);
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const content = scrollableEl.current;
     const shadowTop = shadowTopEl.current;
     const shadowBottom = shadowBottomEl.current;

apps/dashboard/src/@/components/ui/alert-dialog.tsx

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

apps/dashboard/src/@/components/ui/alert.tsx

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

apps/dashboard/src/@/components/ui/badge.tsx

@@ -4,20 +4,18 @@ import type * as React from "react";
 import { cn } from "@/lib/utils";
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 leading-4",
+  "inline-flex items-center rounded-full border border-border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 leading-4",
   {
     variants: {
       variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        default: "border-transparent bg-primary/[0.08] text-primary",
         secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+          "border-transparent bg-accent text-accent-foreground hover:bg-accent/80",
         destructive:
           "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
         warning: "border-transparent bg-warning text-warning-foreground",
         outline: "text-foreground",
-        success:
-          "border-transparent bg-success text-success-foreground hover:bg-success/80",
+        success: "border-transparent bg-success text-success-foreground",
       },
     },
     defaultVariants: {

apps/dashboard/src/@/components/ui/button.tsx

@@ -10,15 +10,15 @@ const buttonVariants = cva(
     variants: {
       variant: {
         primary:
-          "bg-primary text-primary-foreground hover:bg-primary/90 text-semibold",
+          "bg-primary hover:bg-primary/90 text-semibold text-primary-foreground ",
         default: "bg-foreground text-background hover:bg-foreground/90",
         destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90 text-semibold",
+          "bg-destructive hover:bg-destructive/90 text-semibold text-destructive-foreground ",
         outline:
           "border border-input bg-transaprent hover:bg-accent hover:text-accent-foreground text-semibold",
         secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80 text-semibold",
-        ghost: "hover:bg-accent hover:text-accent-foreground text-semibold",
+          "bg-secondary hover:bg-secondary/80 text-semibold text-secondary-foreground ",
+        ghost: "hover:bg-accent text-semibold hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline text-semibold",
       },
       size: {
@@ -44,10 +44,13 @@ export interface ButtonProps
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
+    const btnOnlyProps =
+      Comp === "button" ? { type: "button" as const } : undefined;
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
+        {...btnOnlyProps}
         {...props}
       />
     );

apps/dashboard/src/@/components/ui/card.tsx

@@ -9,7 +9,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      "rounded-lg border border-border bg-card text-card-foreground shadow-sm",
       className,
     )}
     {...props}

apps/dashboard/src/@/components/ui/chart.tsx

@@ -0,0 +1,368 @@
+"use client";
+
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+
+import { cn } from "@/lib/utils";
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const;
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  );
+};
+
+type ChartContextProps = {
+  config: ChartConfig;
+};
+
+const ChartContext = React.createContext<ChartContextProps | null>(null);
+
+function useChart() {
+  const context = React.useContext(ChartContext);
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />");
+  }
+
+  return context;
+}
+
+const ChartContainer = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    config: ChartConfig;
+    children: React.ComponentProps<
+      typeof RechartsPrimitive.ResponsiveContainer
+    >["children"];
+  }
+>(({ id, className, children, config, ...props }, ref) => {
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-chart={chartId}
+        ref={ref}
+        className={cn(
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          className,
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  );
+});
+ChartContainer.displayName = "Chart";
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    ([_, config]) => config.theme || config.color,
+  );
+
+  if (!colorConfig.length) {
+    return null;
+  }
+
+  return (
+    <style
+      // biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation>
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      itemConfig.color;
+    return color ? `  --color-${key}: ${color};` : null;
+  })
+  .join("\n")}
+}
+`,
+          )
+          .join("\n"),
+      }}
+    />
+  );
+};
+
+const ChartTooltip = RechartsPrimitive.Tooltip;
+
+const ChartTooltipContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+    React.ComponentProps<"div"> & {
+      hideLabel?: boolean;
+      hideIndicator?: boolean;
+      indicator?: "line" | "dot" | "dashed";
+      nameKey?: string;
+      labelKey?: string;
+    }
+>(
+  (
+    {
+      active,
+      payload,
+      className,
+      indicator = "dot",
+      hideLabel = false,
+      hideIndicator = false,
+      label,
+      labelFormatter,
+      labelClassName,
+      formatter,
+      color,
+      nameKey,
+      labelKey,
+    },
+    ref,
+  ) => {
+    const { config } = useChart();
+
+    const tooltipLabel = React.useMemo(() => {
+      if (hideLabel || !payload?.length) {
+        return null;
+      }
+
+      const [item] = payload;
+      const key = `${labelKey || item.dataKey || item.name || "value"}`;
+      const itemConfig = getPayloadConfigFromPayload(config, item, key);
+      const value =
+        !labelKey && typeof label === "string"
+          ? config[label as keyof typeof config]?.label || label
+          : itemConfig?.label;
+
+      if (labelFormatter) {
+        return (
+          <div className={cn("font-medium", labelClassName)}>
+            {labelFormatter(value, payload)}
+          </div>
+        );
+      }
+
+      if (!value) {
+        return null;
+      }
+
+      return <div className={cn("font-medium", labelClassName)}>{value}</div>;
+    }, [
+      label,
+      labelFormatter,
+      payload,
+      hideLabel,
+      labelClassName,
+      config,
+      labelKey,
+    ]);
+
+    if (!active || !payload?.length) {
+      return null;
+    }
+
+    const nestLabel = payload.length === 1 && indicator !== "dot";
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+          className,
+        )}
+      >
+        {!nestLabel ? tooltipLabel : null}
+        <div className="grid gap-1.5">
+          {payload.map((item, index) => {
+            const key = `${nameKey || item.name || item.dataKey || "value"}`;
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+            const indicatorColor = color || item.payload.fill || item.color;
+
+            return (
+              <div
+                key={item.dataKey}
+                className={cn(
+                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                  indicator === "dot" && "items-center",
+                )}
+              >
+                {formatter && item?.value !== undefined && item.name ? (
+                  formatter(item.value, item.name, item, index, item.payload)
+                ) : (
+                  <>
+                    {/* Icon */}
+                    {itemConfig?.icon ? (
+                      <itemConfig.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <div
+                          className={cn(
+                            "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+                            {
+                              "h-2.5 w-2.5": indicator === "dot",
+                              "w-1": indicator === "line",
+                              "w-0 border-[1.5px] border-dashed bg-transparent":
+                                indicator === "dashed",
+                              "my-0.5": nestLabel && indicator === "dashed",
+                            },
+                          )}
+                          style={
+                            {
+                              "--color-bg": indicatorColor,
+                              "--color-border": indicatorColor,
+                            } as React.CSSProperties
+                          }
+                        />
+                      )
+                    )}
+                    <div
+                      className={cn(
+                        "flex flex-1 gap-2 justify-between leading-none",
+                        nestLabel ? "items-end" : "items-center",
+                      )}
+                    >
+                      <div className="grid gap-1.5">
+                        {nestLabel ? tooltipLabel : null}
+                        <span className="text-muted-foreground">
+                          {itemConfig?.label || item.name}
+                        </span>
+                      </div>
+                      {item.value && (
+                        <span className="font-mono font-medium tabular-nums text-foreground">
+                          {item.value}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  },
+);
+ChartTooltipContent.displayName = "ChartTooltip";
+
+const ChartLegend = RechartsPrimitive.Legend;
+
+const ChartLegendContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> &
+    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+      hideIcon?: boolean;
+      nameKey?: string;
+    }
+>(
+  (
+    { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
+    ref,
+  ) => {
+    const { config } = useChart();
+
+    if (!payload?.length) {
+      return null;
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex items-center justify-center gap-4 overflow-x-auto",
+          verticalAlign === "top" ? "pb-3" : "pt-3",
+          className,
+        )}
+      >
+        {payload.map((item) => {
+          const key = `${nameKey || item.dataKey || "value"}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+          return (
+            <div
+              key={item.value}
+              className={cn(
+                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground",
+              )}
+            >
+              {itemConfig?.icon && !hideIcon ? (
+                <itemConfig.icon />
+              ) : (
+                <div
+                  className="h-2 w-2 shrink-0 rounded-[2px]"
+                  style={{
+                    backgroundColor: item.color,
+                  }}
+                />
+              )}
+              {itemConfig?.label}
+            </div>
+          );
+        })}
+      </div>
+    );
+  },
+);
+ChartLegendContent.displayName = "ChartLegend";
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string,
+) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined;
+  }
+
+  const payloadPayload =
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined;
+
+  let configLabelKey: string = key;
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === "string"
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string;
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string;
+  }
+
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key as keyof typeof config];
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+};

apps/dashboard/src/@/components/ui/checkbox.tsx

@@ -28,3 +28,19 @@ const Checkbox = React.forwardRef<
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
 export { Checkbox };
+
+export function CheckboxWithLabel(props: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <label
+      className={cn(
+        "flex gap-2 items-start text-secondary-foreground text-sm cursor-pointer select-none [&>button]:mt-0.5",
+        props.className,
+      )}
+    >
+      {props.children}
+    </label>
+  );
+}

apps/dashboard/src/@/components/ui/dialog.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 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}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    dialogOverlayClassName?: string;
+    dialogCloseClassName?: string;
+  }
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay className={props.dialogOverlayClassName} />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed grid w-full max-w-lg gap-4 border bg-background p-6 shadow-lg duration-300 rounded-t-xl md:rounded-lg border-border",
+        // on mobile - put the dialog at the bottom of the screen, animate - slide up and fade in
+        "bottom-0 left-0 right-0",
+        "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        // on desktop - vertically and horizontally center the dialog, animate - zoom and fade in
+        "md:bottom-auto md:left-[50%] md:top-[50%] md:translate-x-[-50%] md:translate-y-[-50%] ",
+        "md:data-[state=closed]:zoom-out-95 md:data-[state=open]:zoom-in-95 ",
+        "md:data-[state=closed]:slide-out-to-left-1/2 md:data-[state=closed]:slide-out-to-top-[48%] ",
+        "md:data-[state=open]:slide-in-from-left-1/2 md:data-[state=open]:slide-in-from-top-[48%] ",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close
+        className={cn(
+          "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
+          props.dialogCloseClassName,
+        )}
+      >
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("flex flex-col space-y-1.5 text-left", className)}
+    {...props}
+  />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className,
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};

apps/dashboard/src/@/components/ui/drawer.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import * as React from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
+
+import { cn } from "@/lib/utils";
+
+const Drawer = ({
+  shouldScaleBackground = true,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+  <DrawerPrimitive.Root
+    shouldScaleBackground={shouldScaleBackground}
+    {...props}
+  />
+);
+Drawer.displayName = "Drawer";
+
+const DrawerTrigger = DrawerPrimitive.Trigger;
+
+const DrawerPortal = DrawerPrimitive.Portal;
+
+const DrawerClose = DrawerPrimitive.Close;
+
+const DrawerOverlay = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay
+    ref={ref}
+    className={cn("fixed inset-0 z-50 bg-black/80", className)}
+    {...props}
+  />
+));
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+        className,
+      )}
+      {...props}
+    >
+      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+));
+DrawerContent.displayName = "DrawerContent";
+
+const DrawerHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+    {...props}
+  />
+);
+DrawerHeader.displayName = "DrawerHeader";
+
+const DrawerFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+    {...props}
+  />
+);
+DrawerFooter.displayName = "DrawerFooter";
+
+const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className,
+    )}
+    {...props}
+  />
+));
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
+
+const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+};

apps/dashboard/src/@/components/ui/dropdown-menu.tsx

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

apps/dashboard/src/@/components/ui/form.tsx

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

apps/dashboard/src/@/components/ui/image-upload.tsx

@@ -0,0 +1,63 @@
+"use client";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+import { UploadIcon } from "lucide-react";
+import Image from "next/image";
+import { useDropzone } from "react-dropzone";
+
+export interface ImageUploadProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  onUpload?: (files: File[]) => void;
+}
+
+const ImageUpload = React.forwardRef<HTMLInputElement, ImageUploadProps>(
+  ({ className, onUpload, ...props }, ref) => {
+    const [activeFile, setActiveFile] = React.useState<File | null>(null);
+    const onDrop = React.useCallback(
+      (acceptedFiles: File[]) => {
+        setActiveFile(acceptedFiles[0]);
+        onUpload?.(acceptedFiles);
+      },
+      [onUpload],
+    );
+
+    const { getRootProps, getInputProps, isDragActive } = useDropzone({
+      onDrop,
+    });
+
+    return (
+      <div className="flex items-start">
+        <div
+          {...getRootProps()}
+          className={cn(
+            "border bg-card relative group cursor-pointer hover:border-primary flex-col gap-1.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 overflow-hidden transition-all rounded-md flex items-center justify-center p-4 py-6 text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+            isDragActive ? "border-primary" : "border-input",
+            !activeFile ? "w-full" : "min-h-32 min-w-32",
+            className,
+          )}
+        >
+          <input ref={ref} {...getInputProps()} {...props} />
+          {activeFile ? (
+            <Image
+              className="object-contain object-center "
+              src={URL.createObjectURL(activeFile)}
+              fill
+              alt=""
+            />
+          ) : (
+            <>
+              <UploadIcon className="w-5 h-5 transition-all group-hover:scale-110" />
+              <p className="text-xs text-center">
+                Drag and drop a file or click to upload
+              </p>
+            </>
+          )}
+        </div>
+      </div>
+    );
+  },
+);
+ImageUpload.displayName = "Input";
+
+export { ImageUpload };

apps/dashboard/src/@/components/ui/input.tsx

@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-10 w-full rounded-md border border-input bg-card px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className,
         )}
         ref={ref}

apps/dashboard/src/@/components/ui/radio-group.tsx

@@ -5,6 +5,7 @@ import { Circle } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "@/lib/utils";
+import { Label } from "./label";
 
 const RadioGroup = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Root>,
@@ -41,4 +42,34 @@ const RadioGroupItem = React.forwardRef<
 });
 RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 
-export { RadioGroup, RadioGroupItem };
+// Displays the radio item as a button-like element
+const RadioGroupItemButton = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "cursor-pointer group flex items-center px-3 peer-hover:border-nonce py-4 space-x-3 space-y-0 border-2 rounded-md min-w-32 font-medium hover:border-foreground/25 transition-all data-[state=checked]:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <div className="flex items-center justify-center w-4 h-4 border-2 rounded-full transition-all group-data-[state=checked]:border-primary text-primary group-hover:border-foreground/25 aspect-square 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">
+        {/* Show on checked */}
+        <RadioGroupPrimitive.Indicator className="flex items-center justify-center transition-all rounded-full">
+          <Circle className="w-2 h-2 text-current fill-current" />
+        </RadioGroupPrimitive.Indicator>
+        {/* Show on hover */}
+        <div className="items-center justify-center hidden transition-all rounded-full text-foreground/25 group-hover:flex group-data-[state=checked]:hidden">
+          <Circle className="w-2 h-2 text-current fill-current" />
+        </div>
+      </div>
+      <Label className="cursor-pointer">{props.children}</Label>
+    </RadioGroupPrimitive.Item>
+  );
+});
+RadioGroupItemButton.displayName = RadioGroupPrimitive.Item.displayName;
+
+export { RadioGroup, RadioGroupItem, RadioGroupItemButton };

apps/dashboard/src/@/components/ui/select.tsx

@@ -19,7 +19,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex gap-2 h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex gap-2 h-10 w-full items-center justify-between rounded-md border border-input bg-card px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className,
     )}
     {...props}
@@ -73,9 +73,21 @@ const SelectContent = React.forwardRef<
 >(({ className, children, position = "popper", ...props }, ref) => (
   <SelectPrimitive.Portal>
     <SelectPrimitive.Content
-      ref={ref}
+      // Fixes https://github.com/radix-ui/primitives/issues/1658
+      ref={(instance) => {
+        if (typeof ref === "function") {
+          ref(instance);
+        } else if (ref) {
+          ref.current = instance;
+        }
+        if (!instance) return;
+
+        instance.ontouchstart = (e) => {
+          e.preventDefault();
+        };
+      }}
       className={cn(
-        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className,

apps/dashboard/src/@/components/ui/skeleton.tsx

@@ -25,14 +25,14 @@ function SkeletonContainer<T>(props: {
       style={props.style}
       aria-hidden={isLoading ? "true" : "false"}
       className={cn(
-        isLoading && "animate-pulse rounded-lg bg-muted",
+        isLoading && "animate-pulse rounded-lg bg-muted inline-block",
         props.className,
       )}
     >
       <div className={cn(isLoading && "invisible")}>
         <div
           className={cn(
-            "transitino-opacity duration-300",
+            "transition-opacity duration-300",
             isLoading ? "opacity-0" : "opacity-100",
           )}
         >

apps/dashboard/src/@/components/ui/sonner.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { Toaster as Sonner } from "sonner";
+
+type ToasterProps = React.ComponentProps<typeof Sonner>;
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg group-[.toaster]:border",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  );
+};
+
+export { Toaster };

apps/dashboard/src/@/components/ui/switch.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-foreground data-[state=unchecked]:bg-input",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };

apps/dashboard/src/@/components/ui/table.tsx

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

apps/dashboard/src/@/components/ui/tabs.tsx

@@ -1,29 +1,56 @@
+"use client";
+
+import { useIsomorphicLayoutEffect } from "@/lib/useIsomorphicLayoutEffect";
+import { cn } from "@/lib/utils";
 import Link from "next/link";
-import { useCallback, useLayoutEffect, useRef, useState } from "react";
-import { cn } from "../../lib/utils";
+import { useCallback, useRef, useState } from "react";
 import { ScrollShadow } from "./ScrollShadow/ScrollShadow";
 import { Button } from "./button";
 
+export type TabLink = {
+  name: string;
+  href: string;
+  isActive: boolean;
+  isEnabled?: boolean;
+};
+
 export function TabLinks(props: {
-  links: { name: string; href: string; isActive: boolean }[];
+  links: TabLink[];
+  className?: string;
+  tabContainerClassName?: string;
 }) {
   const { containerRef, lineRef, activeTabRef } =
     useUnderline<HTMLAnchorElement>();
 
   return (
-    <div className="relative">
+    <div className={cn("relative", props.className)}>
+      {/* Bottom line */}
+      <div className="h-[1px] bg-border absolute bottom-0 left-0 right-0" />
+
       <ScrollShadow scrollableClassName="pb-[8px] relative">
-        <div className="flex" ref={containerRef}>
+        <div
+          className={cn("flex", props.tabContainerClassName)}
+          ref={containerRef}
+        >
           {props.links.map((tab) => {
             return (
-              <Button asChild key={tab.name} variant="ghost">
+              <Button
+                asChild
+                key={tab.name}
+                disabled={!tab.isEnabled}
+                variant="ghost"
+              >
                 <Link
                   data-active={tab.isActive}
                   ref={tab.isActive ? activeTabRef : undefined}
                   href={tab.href}
+                  aria-disabled={!tab.isEnabled}
                   className={cn(
-                    "rounded-lg hover:bg-muted px-3 font-medium text-sm lg:text-base relative h-auto",
-                    !tab.isActive && "opacity-50 hover:opacity-100",
+                    "rounded-lg hover:bg-muted px-3 font-normal text-sm lg:text-sm relative h-auto",
+                    !tab.isActive &&
+                      tab.isEnabled &&
+                      "opacity-50 hover:opacity-100",
+                    !tab.isEnabled && "opacity-50 pointer-events-none",
                   )}
                 >
                   {tab.name}
@@ -36,11 +63,9 @@ export function TabLinks(props: {
         {/* Active line */}
         <div
           ref={lineRef}
-          className="absolute left-0 bottom-0 z-10 h-[2px] bg-foreground rounded-lg fade-in-0 animate-in"
+          className="absolute left-0 bottom-0 h-[2px] bg-foreground rounded-lg fade-in-0 animate-in"
         />
       </ScrollShadow>
-      {/* Bottom line */}
-      <div className="h-[1px] bg-border -translate-y-[2px]" />
     </div>
   );
 }
@@ -56,12 +81,16 @@ export function TabButtons(props: {
   tabClassName?: string;
   activeTabClassName?: string;
   tabContainerClassName?: string;
+  containerClassName?: string;
 }) {
   const { containerRef, lineRef, activeTabRef } =
     useUnderline<HTMLButtonElement>();
 
   return (
-    <div className="relative">
+    <div className={cn("relative", props.containerClassName)}>
+      {/* Bottom line */}
+      <div className="h-[1px] bg-border absolute bottom-0 left-0 right-0" />
+
       <ScrollShadow scrollableClassName="pb-[8px] relative">
         <div
           className={cn("flex", props.tabContainerClassName)}
@@ -93,11 +122,9 @@ export function TabButtons(props: {
         {/* Active line */}
         <div
           ref={lineRef}
-          className="absolute left-0 bottom-0 z-10 h-[2px] bg-foreground rounded-lg fade-in-0 animate-in"
+          className="absolute left-0 bottom-0 h-[2px] bg-foreground rounded-lg fade-in-0 animate-in"
         />
       </ScrollShadow>
-      {/* Bottom line */}
-      <div className="h-[1px] bg-border -translate-y-[2px]" />
     </div>
   );
 }
@@ -111,25 +138,34 @@ function useUnderline<El extends HTMLElement>() {
     setActiveTabEl(el);
   }, []);
 
-  useLayoutEffect(() => {
-    if (activeTabEl && containerRef.current && lineRef.current) {
-      const containerRect = containerRef.current.getBoundingClientRect();
-      const lineEl = lineRef.current;
-      const rect = activeTabEl.getBoundingClientRect();
-      lineEl.style.width = `${rect.width}px`;
-      lineEl.style.transform = `translateX(${
-        rect.left - containerRect.left
-      }px)`;
-      setTimeout(() => {
-        lineEl.style.transition = "transform 0.3s, width 0.3s";
-      }, 0);
+  useIsomorphicLayoutEffect(() => {
+    function update() {
+      if (activeTabEl && containerRef.current && lineRef.current) {
+        const containerRect = containerRef.current.getBoundingClientRect();
+        const lineEl = lineRef.current;
+        const rect = activeTabEl.getBoundingClientRect();
+        lineEl.style.width = `${rect.width}px`;
+        lineEl.style.transform = `translateX(${
+          rect.left - containerRect.left
+        }px)`;
+        setTimeout(() => {
+          lineEl.style.transition = "transform 0.3s, width 0.3s";
+        }, 0);
 
-      activeTabEl.scrollIntoView({
-        behavior: "smooth",
-        block: "nearest",
-        inline: "center",
-      });
+        activeTabEl.scrollIntoView({
+          behavior: "smooth",
+          block: "nearest",
+          inline: "center",
+        });
+      }
     }
+
+    update();
+    // add event listener for resize
+    window.addEventListener("resize", update);
+    return () => {
+      window.removeEventListener("resize", update);
+    };
   }, [activeTabEl]);
 
   return { containerRef, lineRef, activeTabRef };

apps/dashboard/src/@/components/ui/textarea.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Textarea.displayName = "Textarea";
+
+export { Textarea };

apps/dashboard/src/@/components/ui/toast.tsx

@@ -1,129 +0,0 @@
-"use client";
-
-import * as ToastPrimitives from "@radix-ui/react-toast";
-import { type VariantProps, cva } from "class-variance-authority";
-import { X } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const ToastProvider = ToastPrimitives.Provider;
-
-const ToastViewport = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Viewport>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Viewport
-    ref={ref}
-    className={cn(
-      "fixed top-0 z-[10000000] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px] gap-4",
-      className,
-    )}
-    {...props}
-  />
-));
-ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
-
-const toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
-  {
-    variants: {
-      variant: {
-        default: "border bg-background text-foreground",
-        destructive:
-          "destructive group border-destructive bg-destructive text-destructive-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
-
-const Toast = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
-    VariantProps<typeof toastVariants>
->(({ className, variant, ...props }, ref) => {
-  return (
-    <ToastPrimitives.Root
-      ref={ref}
-      className={cn(toastVariants({ variant }), className)}
-      {...props}
-    />
-  );
-});
-Toast.displayName = ToastPrimitives.Root.displayName;
-
-const ToastAction = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Action>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Action
-    ref={ref}
-    className={cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
-      className,
-    )}
-    {...props}
-  />
-));
-ToastAction.displayName = ToastPrimitives.Action.displayName;
-
-const ToastClose = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Close>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Close
-    ref={ref}
-    className={cn(
-      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
-      className,
-    )}
-    toast-close=""
-    {...props}
-  >
-    <X className="h-4 w-4" />
-  </ToastPrimitives.Close>
-));
-ToastClose.displayName = ToastPrimitives.Close.displayName;
-
-const ToastTitle = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Title>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Title
-    ref={ref}
-    className={cn("text-sm font-semibold", className)}
-    {...props}
-  />
-));
-ToastTitle.displayName = ToastPrimitives.Title.displayName;
-
-const ToastDescription = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Description>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Description
-    ref={ref}
-    className={cn("text-sm opacity-90", className)}
-    {...props}
-  />
-));
-ToastDescription.displayName = ToastPrimitives.Description.displayName;
-
-type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
-
-type ToastActionElement = React.ReactElement<typeof ToastAction>;
-
-export {
-  type ToastProps,
-  type ToastActionElement,
-  ToastProvider,
-  ToastViewport,
-  Toast,
-  ToastTitle,
-  ToastDescription,
-  ToastClose,
-  ToastAction,
-};

apps/dashboard/src/@/components/ui/toaster.tsx

@@ -1,31 +0,0 @@
-"use client";
-
-import {
-  Toast,
-  ToastClose,
-  ToastDescription,
-  ToastProvider,
-  ToastTitle,
-  ToastViewport,
-} from "@/components/ui/toast";
-import { useToast } from "@/components/ui/use-toast";
-
-export function Toaster() {
-  const { toasts } = useToast();
-
-  return (
-    <ToastProvider>
-      {toasts.map(({ id, title, description, action, ...props }) => (
-        <Toast key={id} {...props}>
-          <div className="grid gap-1 z-50">
-            {title && <ToastTitle>{title}</ToastTitle>}
-            {description && <ToastDescription>{description}</ToastDescription>}
-          </div>
-          {action}
-          <ToastClose />
-        </Toast>
-      ))}
-      <ToastViewport />
-    </ToastProvider>
-  );
-}

apps/dashboard/src/@/components/ui/toggle-group.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import type { VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { toggleVariants } from "@/components/ui/toggle";
+import { cn } from "@/lib/utils";
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants>
+>({
+  size: "default",
+  variant: "default",
+});
+
+const ToggleGroup = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, children, ...props }, ref) => (
+  <ToggleGroupPrimitive.Root
+    ref={ref}
+    className={cn("flex items-center justify-center gap-1", className)}
+    {...props}
+  >
+    <ToggleGroupContext.Provider value={{ variant, size }}>
+      {children}
+    </ToggleGroupContext.Provider>
+  </ToggleGroupPrimitive.Root>
+));
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
+
+const ToggleGroupItem = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+    VariantProps<typeof toggleVariants>
+>(({ className, children, variant, size, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext);
+
+  return (
+    <ToggleGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  );
+});
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+
+export { ToggleGroup, ToggleGroupItem };

apps/dashboard/src/@/components/ui/toggle.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { type VariantProps, cva } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground 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=on]:bg-accent data-[state=on]:text-accent-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-10 px-3",
+        sm: "h-9 px-2.5",
+        lg: "h-11 px-5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(toggleVariants({ variant, size, className }))}
+    {...props}
+  />
+));
+
+Toggle.displayName = TogglePrimitive.Root.displayName;
+
+export { Toggle, toggleVariants };

apps/dashboard/src/@/components/ui/tooltip.tsx

@@ -19,7 +19,7 @@ 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",
+      "z-50 overflow-hidden rounded-md border border-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}
@@ -31,15 +31,24 @@ export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
 
 export function ToolTipLabel(props: {
   children: React.ReactNode;
-  label: string;
+  label: React.ReactNode;
   rightIcon?: React.ReactNode;
   leftIcon?: React.ReactNode;
 }) {
+  if (!props.label) {
+    return props.children;
+  }
+
   return (
     <TooltipProvider>
       <Tooltip delayDuration={100} disableHoverableContent={true}>
-        <TooltipTrigger asChild>{props.children}</TooltipTrigger>
-        <TooltipContent sideOffset={10}>
+        <TooltipTrigger asChild className="!pointer-events-auto">
+          {props.children}
+        </TooltipTrigger>
+        <TooltipContent
+          sideOffset={10}
+          className="max-w-[400px] leading-relaxed whitespace-normal"
+        >
           <div className="p-2 text-sm flex items-center gap-1.5">
             {props.leftIcon}
             {props.label}

apps/dashboard/src/@/components/ui/tracked-link.tsx

@@ -0,0 +1,24 @@
+import { useTrack } from "hooks/analytics/useTrack";
+import Link from "next/link";
+import type React from "react";
+
+export type TrackedLinkProps = React.ComponentProps<typeof Link> & {
+  category: string;
+  label?: string;
+  trackingProps?: Record<string, string>;
+};
+
+export function TrackedLinkTW(props: TrackedLinkProps) {
+  const trackEvent = useTrack();
+  const { category, label, trackingProps, ...restProps } = props;
+
+  return (
+    <Link
+      onClick={(e) => {
+        trackEvent({ category, action: "click", label, ...trackingProps });
+        props.onClick?.(e);
+      }}
+      {...restProps}
+    />
+  );
+}