feat: migrate admin dashboard from Chakra UI to shadcn/ui + Tailwind CSS#605
Merged
Conversation
- Replace Chakra UI v2, Emotion, framer-motion, react-icons with Tailwind CSS v4, Radix primitives, lucide-react, and sonner - Add shadcn/ui component library (button, input, select, textarea, switch, table, dialog, sheet, card, badge, tooltip, separator, skeleton, dropdown-menu, accordion) - Add full TypeScript type safety with strict mode: define types.ts with User, Webhook, EmailTemplate, WebhookLog, pagination and GraphQL response interfaces - Eliminate all `any` types, `@ts-ignore`, and untyped props - Replace Menu.tsx with Sidebar.tsx using lucide-react icons - Use Sheet (slide-over) for edit forms, Dialog for confirmations - Use sonner toast notifications instead of Chakra useToast - Use Skeleton loading states instead of Spinner - Add Tailwind v4 with @tailwindcss/vite plugin and CSS-based config - Add cn() utility (clsx + tailwind-merge) for class composition
…dashboard-modernization
Update header to light & clean h1/subtitle design, swap pageLimits for pageLimitsExtended ([10, 25, 50]), and set default page limit to 10.
Run prettier --write on all dashboard source files for consistent formatting across the codebase.
1. Hide MobileNav on desktop — was overlapping content 2. Add proper padding to main content area (px-4 md:px-8 pb-8) 3. Add ViewUserModal — click any user row to see all details 4. Fix audit logs query — use nested pagination object per GraphQL schema 5. Fix MIME type errors — change vite base to /dashboard/build/ so lazy chunks load from the static handler instead of the HTML catch-all 6. Unlayer editor now loads correctly (was blocked by MIME type issue)
…able borders - Wrap Overview and AuditLogs pages in same container as other pages (m-5 rounded-md bg-white py-5 px-10) so content doesn't stick to sidebar - Change table row borders from black (border-b) to light gray (border-gray-100) for a cleaner look
- Remove shadow-sm from Card, dropdown-menu, tooltip components - Change all bare 'border' to 'border border-gray-100' across UI components - Remove shadow-sm from audit log filter selects - Soften pagination border in audit logs
Backend schema doesn't support actor_type as a query filter. Changed to client-side filtering on the loaded page data instead.
Add editor.unlayer.com to script-src, style-src, font-src and api.unlayer.com to connect-src. Add frame-src for the embedded editor.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Complete modernization of the admin dashboard (
web/dashboard/):anytypes and@ts-ignoredirectives, added proper interfaces for all GraphQL responses, component props, and data modelsreact-draft-wysiwyg, along with@emotion/react,@emotion/styled,framer-motion,react-icons,focus-visiblesrc/components/ui/built on Radix primitivesDependencies removed
@chakra-ui/react,@chakra-ui/icons,@emotion/react,@emotion/styled,framer-motion,react-draft-wysiwyg,react-icons,focus-visibleDependencies added
tailwindcss,@tailwindcss/vite,lucide-react,clsx,tailwind-merge,class-variance-authority,sonner, and Radix UI primitivesPreserved
All GraphQL queries/mutations, urql client, react-email-editor (Unlayer), react-dropzone, routing structure,
/dashboardbase pathVerification
npx tsc --noEmit— zero errors (strict mode)npm run build— passes (built in ~1s)anytypes or@ts-ignorein sourceTest plan