2e994abdd9
Migrate Dashboard module from hardcoded text to full internationalization
support with Chinese and English translations.
## Changes Made
### Dashboard Components i18n Implementation
- **Dashboard main page** (`index.tsx`): Added i18n for page title, welcome message,
search button, tab labels, and toast notifications
- **StatsCards** (`stats-cards.tsx`): Implemented i18n for 4 grouped cards with
8 data metrics (account data, usage stats, resource consumption, performance metrics)
- **Overview** (`overview.tsx`): Added i18n for chart titles, tooltips, and error states
- **ModelUsageChart** (`model-usage-chart.tsx`): Implemented i18n for chart content
and status messages
- **ModelMonitoringStats** (`model-monitoring-stats.tsx`): Added i18n for monitoring
statistics cards and descriptions
- **ModelMonitoringTable** (`model-monitoring-table.tsx`): Implemented i18n for table
headers, pagination, search functionality, and action menus
### Language Files Updates
- **Chinese** (`zh.json`): Added comprehensive Dashboard translations with proper
key structure and interpolation support
- **English** (`en.json`): Added complete English translations with consistent
terminology and interpolation variables
### Key Structure Improvements
- Organized i18n keys in logical hierarchy: `dashboard.stats.*`, `dashboard.overview.*`,
`dashboard.model_usage.*`, `dashboard.monitoring.*`, `dashboard.search.*`
- Added common UI elements to `common.*` namespace for reusability
- Support for interpolation variables (e.g., `{{name}}`, `{{count}}`, `{{percentage}}`)
### Bug Fixes
- **Fixed duplicate JSON keys**: Resolved conflicts between `dashboard.search` (string)
and `dashboard.search` (object) by renaming to `dashboard.search_button`
- **Fixed duplicate overview keys**: Resolved conflicts between `dashboard.overview`
(string) and `dashboard.overview` (object) by renaming to `dashboard.overview_tab`
- Updated component references to use corrected i18n keys
### Technical Features
- Full React i18next integration with `useTranslation` hook
- Maintains accessibility standards and semantic HTML structure
- Consistent error handling and loading states across all components
- Support for plural forms and complex interpolation scenarios
## Breaking Changes
None - All changes are additive and maintain backward compatibility.
## Testing
- ✅ JSON validation for both language files
- ✅ No linter errors in Dashboard components
- ✅ No duplicate keys in translation files
- ✅ All i18n keys properly referenced in components
Closes: Dashboard i18n migration task
Shadcn Admin Dashboard
Admin Dashboard UI crafted with Shadcn and Vite. Built with responsiveness and accessibility in mind.
I've been creating dashboard UIs at work and for my personal projects. I always wanted to make a reusable collection of dashboard UI for future projects; and here it is now. While I've created a few custom components, some of the code is directly adapted from ShadcnUI examples.
This is not a starter project (template) though. I'll probably make one in the future.
Features
- Light/dark mode
- Responsive
- Accessible
- With built-in Sidebar component
- Global search command
- 10+ pages
- Extra custom components
- RTL support
Customized Components (click to expand)
This project uses Shadcn UI components, but some have been slightly modified for better RTL (Right-to-Left) support and other improvements. These customized components differ from the original Shadcn UI versions.
If you want to update components using the Shadcn CLI (e.g., npx shadcn@latest add <component>), it's generally safe for non-customized components. For the listed customized ones, you may need to manually merge changes to preserve the project's modifications and avoid overwriting RTL support or other updates.
If you don't require RTL support, you can safely update the 'RTL Updated Components' via the Shadcn CLI, as these changes are primarily for RTL compatibility. The 'Modified Components' may have other customizations to consider.
Modified Components
- scroll-area
- sonner
- separator
RTL Updated Components
- alert-dialog
- calendar
- command
- dialog
- dropdown-menu
- select
- table
- sheet
- sidebar
- switch
Notes:
- Modified Components: These have general updates, potentially including RTL adjustments.
- RTL Updated Components: These have specific changes for RTL language support (e.g., layout, positioning).
- For implementation details, check the source files in
src/components/ui/. - All other Shadcn UI components in the project are standard and can be safely updated via the CLI.
Tech Stack
UI: ShadcnUI (TailwindCSS + RadixUI)
Build Tool: Vite
Routing: TanStack Router
Type Checking: TypeScript
Linting/Formatting: Eslint & Prettier
Icons: Lucide Icons, Tabler Icons (Brand icons only)
Auth (partial): Clerk
Run Locally
Clone the project
git clone https://github.com/satnaing/shadcn-admin.git
Go to the project directory
cd shadcn-admin
Install dependencies
pnpm install
Start the server
pnpm run dev
Sponsoring this project ❤️
If you find this project helpful or use this in your own work, consider sponsoring me to support development and maintenance. You can buy me a coffee as well. Don’t worry, every penny helps. Thank you! 🙏
For questions or sponsorship inquiries, feel free to reach out at contact@satnaing.dev.
Current Sponsor
- Clerk - for backing the implementation of Clerk in this project
Author
Crafted with 🤍 by @satnaing
License
Licensed under the MIT License