Configuration

Dependency management

Dead dependency cleanup

The dashboard ships with some dependencies that are installed but unused. These slow down npm install, bloat node_modules, and confuse audits. The following can be safely removed:

Package	Savings
@dnd-kit/core	~800KB
@dnd-kit/sortable	~600KB
@dnd-kit/utilities	~200KB
date-fns	~500KB
@radix-ui/react-icons	~300KB
@hookform/resolvers	~100KB
zod	~200KB

Note

Packages like recharts, react-resizable-panels, vaul, react-day-picker, and react-hook-form have shadcn/ui wrappers in components/ui/ but no feature imports yet. Vite tree-shakes them from the bundle, so they only affect node_modules size. Keep them — they’re ready-to-use when features need them.

Radix UI consolidation

The project has both the combined radix-ui package (v1.4.3) and 15+ individual @radix-ui/react-* packages. To consolidate:

1. Migrate all imports from @radix-ui/react-* to radix-ui
2. Remove the individual packages from package.json

Files to update (all in src/components/ui/):

sidebar.tsx, form.tsx, collapsible.tsx, dropdown-menu.tsx, select.tsx, checkbox.tsx, separator.tsx, badge.tsx, dialog.tsx, radio-group.tsx, tooltip.tsx, label.tsx, scroll-area.tsx, sheet.tsx, tabs.tsx

Code formatting

Prettier

Create a .prettierrc.json in the frontend root to configure the installed plugins (@trivago/prettier-plugin-sort-imports and prettier-plugin-tailwindcss):

{
  "semi": false,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "trailingComma": "es5",
  "printWidth": 80,
  "tabWidth": 2,
  "plugins": [
    "@trivago/prettier-plugin-sort-imports",
    "prettier-plugin-tailwindcss"
  ],
  "importOrder": [
    "^react",
    "<THIRD_PARTY_MODULES>",
    "^@/components/(.*)$",
    "^@/(.*)$",
    "^[./]"
  ],
  "importOrderSeparation": false,
  "importOrderSortSpecifiers": true
}

These values match the existing code style (single quotes, no semicolons). The importOrder groups React first, then third-party, then aliases, then relative paths.

Static analysis

Knip

Knip is installed but needs configuration. Create knip.json:

{
  "entry": ["src/main.tsx"],
  "project": ["src/**/*.{ts,tsx}"],
  "ignore": ["src/components/ui/**", "src/routeTree.gen.ts"],
  "ignoreDependencies": [
    "@tailwindcss/vite",
    "@tanstack/router-plugin",
    "tw-animate-css",
    "@fontsource-variable/inter",
    "@fontsource-variable/manrope",
    "@fontsource/monaspace-krypton"
  ]
}

The ignore list excludes shadcn/ui wrappers (installed on-demand) and the auto-generated route tree. ignoreDependencies covers CSS-only and plugin dependencies that Knip can’t trace via imports.

Verification

After applying configuration changes:

Full check

cd pro/frontend
npm install
npx tsc -b --noEmit
npx vite build
npm run lint
npm run knip
npm run format:check

Quick check

cd pro/frontend
npx vite build && npm run lint