modify design#5
Merged
Merged
Conversation
There was a problem hiding this comment.
Pull request overview
This PR updates the Admin app’s UI/design by migrating several components/layouts to shadcn/ui + Radix primitives, cleaning up legacy SCSS-based components, and aligning auth/session defaults with centralized account privilege/status constants.
Changes:
- Replace legacy Admin layout pieces (sidebar/header/footer/breadcrumb/sign-in) with shadcn/ui-based implementations.
- Centralize account status/privilege defaults via new constants and wire them into Better Auth session shaping.
- Update dependencies (Radix Collapsible, lucide-react, @types/*), remove
simplebar-react, and adjust CI/env templates for Better Auth.
Reviewed changes
Copilot reviewed 61 out of 64 changed files in this pull request and generated 13 comments.
Show a summary per file
| File | Description |
|---|---|
| yarn.lock | Dependency lock updates (types bumps, add Radix Collapsible, remove simplebar). |
| packages/db/package.json | Bump @types/node / @types/pg devDependencies. |
| apps/admin/src/types/app.ts | Add shared LoginUser type. |
| apps/admin/src/styles/globals.scss | Remove legacy global SCSS reset/styles. |
| apps/admin/src/server/domains/account.ts | Comment out getAccountList implementation. |
| apps/admin/src/proxy.ts | Remove inline security warning comments. |
| apps/admin/src/lib/auth.ts | Use centralized account status/privilege constants for defaults/session shaping. |
| apps/admin/src/constants/application.ts | Add DEFAULT_VIEW, normalize ACCOUNT_PRIVILEGE keys, add ACCOUNT_STATUS. |
| apps/admin/src/components/ui/sidebar.tsx | Modify sidebar layout class strings and sizing behavior. |
| apps/admin/src/components/ui/field.tsx | Add new shadcn-style Field components. |
| apps/admin/src/components/ui/collapsible.tsx | Add Radix Collapsible wrapper. |
| apps/admin/src/components/ui/button.tsx | Update shadcn Button implementation (variants + forwardRef). |
| apps/admin/src/components/divider/index.ts | Remove legacy Divider barrel export. |
| apps/admin/src/components/divider/divider.tsx | Remove legacy Divider component. |
| apps/admin/src/components/divider/divider.module.scss | Remove legacy Divider styles. |
| apps/admin/src/components/buttons/button/index.ts | Remove legacy nested button barrel export. |
| apps/admin/src/components/buttons/button/button.tsx | Remove legacy SCSS-based Button implementation. |
| apps/admin/src/components/buttons/button/button.module.scss | Remove legacy Button styles. |
| apps/admin/src/components/buttons/button.tsx | Add new wrapper Button using shadcn BaseButton + spinner. |
| apps/admin/src/components/breadcrumb/breadcrumb.tsx | Migrate Breadcrumb rendering to shadcn/ui breadcrumb components. |
| apps/admin/src/components/breadcrumb/breadcrumb.module.scss | Remove legacy breadcrumb SCSS. |
| apps/admin/src/components/breadcrumb/_routes.ts | Remove legacy breadcrumb route table. |
| apps/admin/src/components/badge/index.ts | Remove legacy Badge barrel export. |
| apps/admin/src/components/badge/badge.tsx | Remove legacy Badge component. |
| apps/admin/src/components/badge/badge.module.scss | Remove legacy Badge styles. |
| apps/admin/src/app/signout/page.tsx | Change sign-out redirect to window.location.href. |
| apps/admin/src/app/page.tsx | Use centralized constants; update auth layout + SignIn component import paths. |
| apps/admin/src/app/layout.tsx | Remove SimpleBar CSS import. |
| apps/admin/src/app/api/accounts/create-first-account/route.ts | Create first account with superAdmin privilege constant. |
| apps/admin/src/app/(auth)/signin/page.tsx | Make Sign-in page server component with metadata + Suspense boundary. |
| apps/admin/src/app/(auth)/signin/_lib/schemas.ts | Add zod schema/type for sign-in form input. |
| apps/admin/src/app/(auth)/signin/_lib/constants.ts | Add Better Auth error-message mapping. |
| apps/admin/src/app/(auth)/signin/_components/types.ts | Remove local LoginUser type (moved to shared types). |
| apps/admin/src/app/(auth)/signin/_components/signin/signin.tsx | Remove legacy SCSS-based SignIn implementation. |
| apps/admin/src/app/(auth)/signin/_components/signin/signin.module.scss | Remove legacy SignIn styles. |
| apps/admin/src/app/(auth)/signin/_components/signin/index.ts | Remove legacy SignIn barrel export. |
| apps/admin/src/app/(auth)/signin/_components/signin.tsx | Add new Card/Form-based SignIn component with toast handling. |
| apps/admin/src/app/(auth)/layout.tsx | Update AuthLayout import path. |
| apps/admin/src/app/(auth)/_layout/index.ts | Remove AuthLayout barrel export. |
| apps/admin/src/app/(auth)/_layout/auth-layout.tsx | Replace SCSS layout with Tailwind-based layout. |
| apps/admin/src/app/(auth)/_layout/auth-layout.module.scss | Remove legacy AuthLayout styles. |
| apps/admin/src/app/(app)/system/accounts/_components/account-list/condition/condition.tsx | Comment out “New” button in condition UI. |
| apps/admin/src/app/(app)/layout.tsx | Convert app layout to async session-aware layout + navigation filtering. |
| apps/admin/src/app/(app)/_layout/sidebar/sidebar.tsx | Remove legacy SimpleBar/SCSS sidebar implementation. |
| apps/admin/src/app/(app)/_layout/sidebar/sidebar.module.scss | Remove legacy sidebar styles. |
| apps/admin/src/app/(app)/_layout/sidebar/index.ts | Remove legacy sidebar barrel export. |
| apps/admin/src/app/(app)/_layout/sidebar/_nav.tsx | Remove legacy sidebar nav config. |
| apps/admin/src/app/(app)/_layout/sidebar.tsx | Add new shadcn/ui-based AppSidebar implementation. |
| apps/admin/src/app/(app)/_layout/protected-view.tsx | Use centralized account status constants. |
| apps/admin/src/app/(app)/_layout/index.tsx | Add new shadcn/ui-based AppLayout wrapper. |
| apps/admin/src/app/(app)/_layout/index.ts | Remove legacy AppLayout barrel export. |
| apps/admin/src/app/(app)/_layout/header/index.ts | Remove legacy header barrel export. |
| apps/admin/src/app/(app)/_layout/header/header.tsx | Remove legacy header implementation. |
| apps/admin/src/app/(app)/_layout/header/header.module.scss | Remove legacy header styles. |
| apps/admin/src/app/(app)/_layout/footer/index.ts | Remove legacy footer barrel export. |
| apps/admin/src/app/(app)/_layout/footer/footer.tsx | Remove legacy footer component. |
| apps/admin/src/app/(app)/_layout/footer/footer.module.scss | Remove legacy footer styles. |
| apps/admin/src/app/(app)/_layout/app-layout.tsx | Remove legacy app layout implementation. |
| apps/admin/src/app/(app)/_layout/app-layout.module.scss | Remove legacy app layout styles. |
| apps/admin/package.json | Add Radix Collapsible, bump lucide-react, remove simplebar-react, bump @types/node. |
| apps/admin/.prettierignore | Ignore shadcn/ui sources and backups. |
| apps/admin/.env.template | Add INTERNAL_API_URL variable. |
| .github/workflows/ci.yml | Add BETTER_AUTH_SECRET env var for admin build step. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
681
to
683
| <Skeleton | ||
| className="h-4 max-w-[--skeleton-width] flex-1" | ||
| className="h-4 max-w-(--skeleton-width) flex-1" | ||
| data-sidebar="menu-skeleton-text" |
There was a problem hiding this comment.
max-w-(--skeleton-width) is not valid Tailwind arbitrary value syntax and will be ignored. Use max-w-[--skeleton-width] (or max-w-[var(--skeleton-width)]) so the skeleton width respects the CSS var set in style.
Comment on lines
+5
to
+9
| const Collapsible = CollapsiblePrimitive.Root | ||
|
|
||
| const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger | ||
|
|
||
| const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent |
There was a problem hiding this comment.
@radix-ui/react-collapsible exports Root, Trigger, and Content (and the codebase’s other Radix wrappers use .Trigger/.Content). CollapsiblePrimitive.CollapsibleTrigger / .CollapsibleContent are not valid exports and will cause a runtime/TS error. Use CollapsiblePrimitive.Trigger and CollapsiblePrimitive.Content.
Comment on lines
+2
to
+3
| import { ACCOUNT_STATUS } from "@/constants/application"; | ||
| import { NAVIGATION, filterNavigationByPrivilege } from "@/constants/navigation"; |
There was a problem hiding this comment.
@/constants/navigation doesn’t exist in the current repo (only src/constants/application.ts is present), so this import will fail and the app won’t build. Add the missing module (with NAVIGATION and filterNavigationByPrivilege) or update the import to the correct existing path.
Suggested change
| import { ACCOUNT_STATUS } from "@/constants/application"; | |
| import { NAVIGATION, filterNavigationByPrivilege } from "@/constants/navigation"; | |
| import { ACCOUNT_STATUS, NAVIGATION, filterNavigationByPrivilege } from "@/constants/application"; |
Comment on lines
+7
to
+12
| export default async function AppLayout({ children }: { children: React.ReactNode }) { | ||
| const session = await getAppSession(); | ||
|
|
||
| if (session?.user.status !== ACCOUNT_STATUS.active) { | ||
| return null; | ||
| } |
There was a problem hiding this comment.
When getAppSession() returns null (unauthenticated), this layout returns null, which prevents the client-side ProtectedView from rendering and results in a blank page instead of redirecting. Consider using Next.js redirect() to the sign-in route (e.g. with a code=E401) or rendering a fallback that triggers navigation.
Comment on lines
+12
to
15
| BreadcrumbSeparator, | ||
| } from "@/components/ui/breadcrumb"; | ||
| import { BREADCRUMB_ROUTES } from "@/constants/navigation"; | ||
|
|
There was a problem hiding this comment.
@/constants/navigation is imported here but the module isn’t present in the repo, so this component won’t compile. Either add src/constants/navigation (exporting BREADCRUMB_ROUTES) or revert to the previous local routes source.
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
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.
No description provided.