sam/fullstack-fuware
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor/i18n #4

Merged
sam merged 2 commits from refactor/i18n into main 2026-01-08 01:21:42 +00:00
Conversation 0 Commits 2 Files Changed 49 +897 -1066
49 changed files with 897 additions and 1066 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.vscode/extensions.json vendored Normal file
View File

@@ -0,0 +1,5 @@
{
"recommendations": [
"inlang.vs-code-extension"
]
}

62
messages/en.json Normal file
View File

@@ -0,0 +1,62 @@
{
"$schema": "https://inlang.com/schema/inlang-message-format",
"common_no_list": "Hiện tại chưa có dữ liệu nào!",
"common_is_required": "{field} is required.",
"role_tags_admin": "Administrator",
"role_tags_user": "User",
"role_tags_member": "Member",
"role_tags_owner": "Owner",
"ui_login_btn": "Sign in",
"ui_logout_btn": "Sign out",
"ui_cancel_btn": "Cancel",
"ui_close_btn": "Close",
"ui_confirm_btn": "Confirm",
"ui_signup_btn": "Sign up",
"ui_view_btn": "View",
"ui_save_btn": "Save",
"ui_update_btn": "Update",
"ui_view_all_notifications": "View All Notifications",
"ui_label_notifications": "Notifications",
"ui_change_password_btn": "Change password",
"nav_home": "Home",
"nav_dashboard": "Dashboard",
"nav_settings": "Settings",
"nav_add_new": "Add new",
"nav_edit": "Edit",
"nav_change_password": "Change password",
"nav_log": "Audit log",
"nav_roles": "Vai trò & quyền hạn",
"nav_box": "Box",
"nav_account": "Account",
"nav_profile": "Profile",
"login_page_form_email": "Email",
"login_page_form_password": "Password",
"login_page_ui_welcome_back": "Welcome back",
"login_page_ui_forgot_password": "Forgot your password?",
"login_page_ui_not_have_account": "Don't have an account?",
"login_page_messages_logout_success": "Sign out successfully!",
"login_page_messages_login_success": "Sign in successfully!",
"login_page_messages_email_invalid": "Email invalid!",
"sign_up_page_ui_title": "Sign up",
"sign_up_page_ui_create_account": "Create account",
"change_password_form_current_password": "Current password",
"change_password_form_new_password": "New password",
"change_password_form_confirm_password": "Confirm password",
"change_password_ui_title": "Change password",
"change_password_messages_password_not_match": "Password not match",
"change_password_messages_change_password_success": "Password changed successfully!",
"profile_form_name": "Name",
"profile_form_email": "Email",
"profile_form_role": "Role",
"profile_ui_title": "Profile",
"profile_messages_update_success": "Updated profile successfully!",
"settings_form_name": "Website name",
"settings_form_description": "Description",
"settings_form_keywords": "keywords",
"settings_form_language": "Language",
"settings_ui_title": "Settings",
"settings_messages_update_success": "Updated settings successfully!",
"settings_messages_update_fail": "Update fail!",
"backend_INVALID_EMAIL_OR_PASSWORD": "Email or password incorrect!",
"backend_INVALID_PASSWORD": "Password incorrect!"
}

62
messages/vi.json Normal file
View File

@@ -0,0 +1,62 @@
{
"$schema": "https://inlang.com/schema/inlang-message-format",
"common_no_list": "Hiện tại chưa có dữ liệu nào!",
"common_is_required": "{field} là bắt buộc.",
"role_tags_admin": "Quản lý",
"role_tags_user": "Người dùng",
"role_tags_member": "Thành viên",
"role_tags_owner": "Người sở hữu",
"ui_login_btn": "Đăng nhập",
"ui_logout_btn": "Đăng xuất",
"ui_cancel_btn": "Hủy",
"ui_close_btn": "Đóng",
"ui_confirm_btn": "Xác nhận",
"ui_signup_btn": "Đăng ký",
"ui_view_btn": "Xem",
"ui_save_btn": "Lưu",
"ui_update_btn": "Cập nhật",
"ui_view_all_notifications": "Xem tất cả thông báo",
"ui_label_notifications": "Thông báo",
"ui_change_password_btn": "Đổi mật khẩu",
"nav_home": "Trang chủ",
"nav_dashboard": "Bảng điều khiển",
"nav_settings": "Cài đặt",
"nav_add_new": "Thêm mới",
"nav_edit": "Chỉnh sửa",
"nav_change_password": "Đổi mật khẩu",
"nav_log": "Lịch sử",
"nav_roles": "Vai trò & quyền hạn",
"nav_box": "Hộp chứa",
"nav_account": "Tài khoản",
"nav_profile": "Hồ sơ",
"login_page_form_email": "Email",
"login_page_form_password": "Mật khẩu",
"login_page_ui_welcome_back": "Chào mừng trở lại",
"login_page_ui_forgot_password": "Quên mật khẩu?",
"login_page_ui_not_have_account": "Chưa có tài khoản!?",
"login_page_messages_logout_success": "Đăng xuất thành công!",
"login_page_messages_login_success": "Đăng nhập thành công!",
"login_page_messages_email_invalid": "Email không đúng định dạng!",
"sign_up_page_ui_title": "Đăng ký",
"sign_up_page_ui_create_account": "Tạo tài khoản",
"change_password_form_current_password": "Mật khẩu hiện tại",
"change_password_form_new_password": "Mật khẩu mới",
"change_password_form_confirm_password": "Nhập lại mật khẩu mới",
"change_password_ui_title": "Đổi mật khẩu",
"change_password_messages_password_not_match": "Mật khẩu không khớp",
"change_password_messages_change_password_success": "Đổi mật khẩu thành công!",
"profile_form_name": "Tên",
"profile_form_email": "Email",
"profile_form_role": "Vai trò",
"profile_ui_title": "Hồ sơ",
"profile_messages_update_success": "Cập nhật hồ sơ thành công!",
"settings_form_name": "Tên website",
"settings_form_description": "Mô tả website",
"settings_form_keywords": "Từ khóa",
"settings_form_language": "Ngôn ngữ",
"settings_ui_title": "Cài đặt",
"settings_messages_update_success": "Cập nhật cài đặt thành công!",
"settings_messages_update_fail": "Cập nhật cài đặt thất bại!",
"backend_INVALID_EMAIL_OR_PASSWORD": "Email hoặc mật khẩu không đúng!",
"backend_INVALID_PASSWORD": "Mật khẩu hiện tại không đúng!"
}

3
package.json
View File

@@ -37,13 +37,11 @@
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"i18next": "^25.7.3",
"i18next-browser-languagedetector": "^8.2.0",
"next-themes": "^0.4.6",
"prisma": "^7.1.0",
"radix-ui": "^1.4.3",
"react": "^19.2.0",
"react-dom": "^19.2.0",
"react-i18next": "^16.5.0",
"shadcn": "^3.6.1",
"sonner": "^2.0.7",
"tailwind-merge": "^3.0.2",
@@ -53,6 +51,7 @@
"zod": "^4.1.11"
},
"devDependencies": {
"@inlang/paraglide-js": "2.7.1",
"@tanstack/devtools-vite": "^0.3.11",
"@tanstack/eslint-config": "^0.3.0",
"@testing-library/dom": "^10.4.0",

199
pnpm-lock.yaml generated
View File

@@ -65,9 +65,6 @@ importers:
i18next:
specifier: ^25.7.3
version: 25.7.3(typescript@5.9.3)
i18next-browser-languagedetector:
specifier: ^8.2.0
version: 8.2.0
next-themes:
specifier: ^0.4.6
version: 0.4.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -83,9 +80,6 @@ importers:
react-dom:
specifier: ^19.2.0
version: 19.2.3(react@19.2.3)
react-i18next:
specifier: ^16.5.0
version: 16.5.0(i18next@25.7.3(typescript@5.9.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(typescript@5.9.3)
shadcn:
specifier: ^3.6.1
version: 3.6.2(@types/node@22.19.3)(hono@4.10.6)(typescript@5.9.3)
@@ -108,6 +102,9 @@ importers:
specifier: ^4.1.11
version: 4.2.1
devDependencies:
'@inlang/paraglide-js':
specifier: 2.7.1
version: 2.7.1
'@tanstack/devtools-vite':
specifier: ^0.3.11
version: 0.3.12(vite@7.3.0(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0))
@@ -683,6 +680,17 @@ packages:
resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
engines: {node: '>=18.18'}
'@inlang/paraglide-js@2.7.1':
resolution: {integrity: sha512-wCpnS9iRTRYMilvWBjB0ndf8+moon+AXz23Uh4wbpQjWhRJyvCytkGFzm7jeqAGggK4v3oeuyjva91TDMS+qhw==}
hasBin: true
'@inlang/recommend-sherlock@0.2.1':
resolution: {integrity: sha512-ckv8HvHy/iTqaVAEKrr+gnl+p3XFNwe5D2+6w6wJk2ORV2XkcRkKOJ/XsTUJbPSiyi4PI+p+T3bqbmNx/rDUlg==}
'@inlang/sdk@2.4.10':
resolution: {integrity: sha512-MLcYSb9ERwvyfxMsMXGjmAYfh6Bn/rkT58ffkibWxbFLiL3ejSdmLGP8Wl7118dMo6nj2PXTcEPzUw+2YPQ62Q==}
engines: {node: '>=18.0.0'}
'@inquirer/ansi@1.0.2':
resolution: {integrity: sha512-S8qNSZiYzFd0wAcyG5AXCvUHC5Sr7xpZ9wZ2py9XR88jUz8wooStVx5M6dRzczbBWjic9NP7+rY0Xi7qqK/aMQ==}
engines: {node: '>=18'}
@@ -742,6 +750,13 @@ packages:
'@jridgewell/trace-mapping@0.3.31':
resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
'@lix-js/sdk@0.4.7':
resolution: {integrity: sha512-pRbW+joG12L0ULfMiWYosIW0plmW4AsUdiPCp+Z8rAsElJ+wJ6in58zhD3UwUcd4BNcpldEGjg6PdA7e0RgsDQ==}
engines: {node: '>=18'}
'@lix-js/server-protocol-schema@0.1.1':
resolution: {integrity: sha512-jBeALB6prAbtr5q4vTuxnRZZv1M2rKe8iNqRQhFJ4Tv7150unEa0vKyz0hs8Gl3fUGsWaNJBh3J8++fpbrpRBQ==}
'@modelcontextprotocol/sdk@1.25.1':
resolution: {integrity: sha512-yO28oVFFC7EBoiKdAn+VqRm+plcfv4v0xp6osG/VsCB0NlPZWi87ajbCZZ8f/RvOFLEu7//rSRmuZZ7lMoe3gQ==}
engines: {node: '>=18'}
@@ -1694,6 +1709,9 @@ packages:
'@sec-ant/readable-stream@0.4.1':
resolution: {integrity: sha512-831qok9r2t8AlxLko40y2ebgSDhenenCatLVeW/uBtnHPyhHOvG0C7TvfgecV+wHzIm5KUICgzmVpWS+IMEAeg==}
'@sinclair/typebox@0.31.28':
resolution: {integrity: sha512-/s55Jujywdw/Jpan+vsy6JZs1z2ZTGxTmbZTPiuSL2wz9mfzA2gN1zzaqmvfi4pq+uOt7Du85fkiwv5ymW84aQ==}
'@sindresorhus/merge-streams@4.0.0':
resolution: {integrity: sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==}
engines: {node: '>=18'}
@@ -1728,6 +1746,10 @@ packages:
peerDependencies:
solid-js: ^1.6.12
'@sqlite.org/sqlite-wasm@3.48.0-build4':
resolution: {integrity: sha512-hI6twvUkzOmyGZhQMza1gpfqErZxXRw6JEsiVjUbo7tFanVD+8Oil0Ih3l2nGzHdxPI41zFmfUQG7GHqhciKZQ==}
hasBin: true
'@standard-schema/spec@1.1.0':
resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
@@ -2388,6 +2410,9 @@ packages:
aria-query@5.3.0:
resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
array-timsort@1.0.3:
resolution: {integrity: sha512-/+3GRL7dDAGEfM6TseQk/U+mi18TU2Ms9I3UlLdUMhz2hbvGNTKdj9xniwXfUqgYhHxRx0+8UnKkvlNwVU+cWQ==}
assertion-error@2.0.1:
resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
engines: {node: '>=12'}
@@ -2619,6 +2644,10 @@ packages:
resolution: {integrity: sha512-TywoWNNRbhoD0BXs1P3ZEScW8W5iKrnbithIl0YH+uCmBd0QpPOA8yc82DS3BIE5Ma6FnBVUsJ7wVUDz4dvOWQ==}
engines: {node: '>=20'}
comment-json@4.5.1:
resolution: {integrity: sha512-taEtr3ozUmOB7it68Jll7s0Pwm+aoiHyXKrEC8SEodL4rNpdfDLqa7PfBlrgFoCNNdR8ImL+muti5IGvktJAAg==}
engines: {node: '>= 6'}
comment-parser@1.4.1:
resolution: {integrity: sha512-buhp5kePrmda3vhc5B9t7pUQXAb2Tnd0qgpkIhPhkHXxJpiPJ11H0ZEU0oBpJ2QztSbzG/ZxMj/CHsYJqRHmyg==}
engines: {node: '>= 12.0.0'}
@@ -2629,6 +2658,10 @@ packages:
confbox@0.2.2:
resolution: {integrity: sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==}
consola@3.4.0:
resolution: {integrity: sha512-EiPU8G6dQG0GFHNR8ljnZFki/8a+cQwEQ+7wpxdChl02Q8HXlwEZWD5lqAF8vC2sEC3Tehr8hy7vErz88LHyUA==}
engines: {node: ^14.18.0 || >=16.10.0}
consola@3.4.2:
resolution: {integrity: sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==}
engines: {node: ^14.18.0 || >=16.10.0}
@@ -2659,6 +2692,9 @@ packages:
resolution: {integrity: sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==}
engines: {node: '>=18'}
core-util-is@1.0.3:
resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
cors@2.8.5:
resolution: {integrity: sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==}
engines: {node: '>= 0.10'}
@@ -2719,6 +2755,14 @@ packages:
decimal.js@10.6.0:
resolution: {integrity: sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==}
dedent@1.5.1:
resolution: {integrity: sha512-+LxW+KLWxu3HW3M2w2ympwtqPrqYRzU8fqi6Fhd18fBALe15blJPI/I4+UHveMVG6lJqB4JNd4UG0S5cnVHwIg==}
peerDependencies:
babel-plugin-macros: ^3.1.0
peerDependenciesMeta:
babel-plugin-macros:
optional: true
dedent@1.7.1:
resolution: {integrity: sha512-9JmrhGZpOlEgOLdQgSm0zxFaYoQon408V1v49aqTWuXENVlnCuY9JBZcXZiCsZQWDjTm5Qf/nIvAy77mXDAjEg==}
peerDependencies:
@@ -3246,9 +3290,6 @@ packages:
resolution: {integrity: sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==}
engines: {node: '>=18'}
html-parse-stringify@3.0.1:
resolution: {integrity: sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==}
htmlparser2@10.0.0:
resolution: {integrity: sha512-TwAZM+zE5Tq3lrEHvOlvwgj1XLWQCtaaibSN11Q+gGBAS7Y1uZSWwXXRe4iF6OXnaq1riyQAPFOBtYc77Mxq0g==}
@@ -3267,6 +3308,10 @@ packages:
resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
engines: {node: '>= 14'}
human-id@4.1.3:
resolution: {integrity: sha512-tsYlhAYpjCKa//8rXZ9DqKEawhPoSytweBC2eNvcaDK+57RZLHGqNs3PZTQO6yekLFSuvA6AlnAfrw1uBvtb+Q==}
hasBin: true
human-signals@2.1.0:
resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
engines: {node: '>=10.17.0'}
@@ -3275,9 +3320,6 @@ packages:
resolution: {integrity: sha512-eKCa6bwnJhvxj14kZk5NCPc6Hb6BdsU9DZcOnmQKSnO1VKrfV0zCvtttPZUsBvjmNDn8rpcJfpwSYnHBjc95MQ==}
engines: {node: '>=18.18.0'}
i18next-browser-languagedetector@8.2.0:
resolution: {integrity: sha512-P+3zEKLnOF0qmiesW383vsLdtQVyKtCNA9cjSoKCppTKPQVfKd2W8hbVo5ZhNJKDqeM7BOcvNoKJOjpHh4Js9g==}
i18next@25.7.3:
resolution: {integrity: sha512-2XaT+HpYGuc2uTExq9TVRhLsso+Dxym6PWaKpn36wfBmTI779OQ7iP/XaZHzrnGyzU4SHpFrTYLKfVyBfAhVNA==}
peerDependencies:
@@ -3420,6 +3462,9 @@ packages:
jose@6.1.3:
resolution: {integrity: sha512-0TpaTfihd4QMNwrz/ob2Bp7X04yuxJkjRGi4aKmOqwhov54i6u79oCv7T+C7lo70MKH6BesI3vscD1yb/yzKXQ==}
js-sha256@0.11.1:
resolution: {integrity: sha512-o6WSo/LUvY2uC4j7mO50a2ms7E/EAdbP0swigLV+nzHKTTaYnaLIWJ02VdXrsJX0vGedDESQnLsOekr94ryfjg==}
js-tokens@4.0.0:
resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
@@ -3481,6 +3526,10 @@ packages:
resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
engines: {node: '>=6'}
kysely@0.27.6:
resolution: {integrity: sha512-FIyV/64EkKhJmjgC0g2hygpBv5RNWVPyNCqSAD7eTCv6eFWNIi4PN1UvdSJGicN/o35bnevgis4Y0UDC0qi8jQ==}
engines: {node: '>=14.0.0'}
kysely@0.28.9:
resolution: {integrity: sha512-3BeXMoiOhpOwu62CiVpO6lxfq4eS6KMYfQdMsN/2kUCRNuF2YiEr7u0HLHaQU+O4Xu8YXE3bHVkwaQ85i72EuA==}
engines: {node: '>=20.0.0'}
@@ -4037,22 +4086,6 @@ packages:
peerDependencies:
react: ^19.2.3
react-i18next@16.5.0:
resolution: {integrity: sha512-IMpPTyCTKxEj8klCrLKUTIUa8uYTd851+jcu2fJuUB9Agkk9Qq8asw4omyeHVnOXHrLgQJGTm5zTvn8HpaPiqw==}
peerDependencies:
i18next: '>= 25.6.2'
react: '>= 16.8.0'
react-dom: '*'
react-native: '*'
typescript: ^5
peerDependenciesMeta:
react-dom:
optional: true
react-native:
optional: true
typescript:
optional: true
react-is@17.0.2:
resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
@@ -4290,6 +4323,11 @@ packages:
resolution: {integrity: sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==}
engines: {node: '>= 10.x'}
sqlite-wasm-kysely@0.3.0:
resolution: {integrity: sha512-TzjBNv7KwRw6E3pdKdlRyZiTmUIE0UttT/Sl56MVwVARl/u5gp978KepazCJZewFUnlWHz9i3NQd4kOtP/Afdg==}
peerDependencies:
kysely: '*'
sqlstring@2.3.3:
resolution: {integrity: sha512-qC9iz2FlN7DQl3+wjwn3802RTyjCx7sDvfQEXchwa6CWOx07/WVfh91gBmQ9fahw8snwGEWU3xGzOt4tFyHLxg==}
engines: {node: '>= 0.6'}
@@ -4549,6 +4587,9 @@ packages:
uri-js@4.4.1:
resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
urlpattern-polyfill@10.1.0:
resolution: {integrity: sha512-IGjKp/o0NL3Bso1PymYURCJxMPNAf/ILOpendP9f5B6e1rTJgdgiOvgfoT8VxCAdY+Wisb9uhGaJJf3yZ2V9nw==}
use-callback-ref@1.3.3:
resolution: {integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==}
engines: {node: '>=10'}
@@ -4577,6 +4618,10 @@ packages:
util-deprecate@1.0.2:
resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
uuid@10.0.0:
resolution: {integrity: sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==}
hasBin: true
valibot@1.2.0:
resolution: {integrity: sha512-mm1rxUsmOxzrwnX5arGS+U4T25RdvpPjPN4yR0u9pUBov9+zGVtO84tif1eY4r6zWxVxu3KzIyknJy3rxfRZZg==}
peerDependencies:
@@ -4678,10 +4723,6 @@ packages:
jsdom:
optional: true
void-elements@3.1.0:
resolution: {integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==}
engines: {node: '>=0.10.0'}
vue-eslint-parser@10.2.0:
resolution: {integrity: sha512-CydUvFOQKD928UzZhTp4pr2vWz1L+H99t7Pkln2QSPdvmURT0MoC4wUccfCnuEaihNsu9aYYyk+bep8rlfkUXw==}
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -5340,6 +5381,32 @@ snapshots:
'@humanwhocodes/retry@0.4.3': {}
'@inlang/paraglide-js@2.7.1':
dependencies:
'@inlang/recommend-sherlock': 0.2.1
'@inlang/sdk': 2.4.10
commander: 11.1.0
consola: 3.4.0
json5: 2.2.3
unplugin: 2.3.11
urlpattern-polyfill: 10.1.0
transitivePeerDependencies:
- babel-plugin-macros
'@inlang/recommend-sherlock@0.2.1':
dependencies:
comment-json: 4.5.1
'@inlang/sdk@2.4.10':
dependencies:
'@lix-js/sdk': 0.4.7
'@sinclair/typebox': 0.31.28
kysely: 0.27.6
sqlite-wasm-kysely: 0.3.0(kysely@0.27.6)
uuid: 10.0.0
transitivePeerDependencies:
- babel-plugin-macros
'@inquirer/ansi@1.0.2': {}
'@inquirer/confirm@5.1.21(@types/node@22.19.3)':
@@ -5393,6 +5460,20 @@ snapshots:
'@jridgewell/resolve-uri': 3.1.2
'@jridgewell/sourcemap-codec': 1.5.5
'@lix-js/sdk@0.4.7':
dependencies:
'@lix-js/server-protocol-schema': 0.1.1
dedent: 1.5.1
human-id: 4.1.3
js-sha256: 0.11.1
kysely: 0.27.6
sqlite-wasm-kysely: 0.3.0(kysely@0.27.6)
uuid: 10.0.0
transitivePeerDependencies:
- babel-plugin-macros
'@lix-js/server-protocol-schema@0.1.1': {}
'@modelcontextprotocol/sdk@1.25.1(hono@4.10.6)(zod@3.25.76)':
dependencies:
'@hono/node-server': 1.19.7(hono@4.10.6)
@@ -6397,6 +6478,8 @@ snapshots:
'@sec-ant/readable-stream@0.4.1': {}
'@sinclair/typebox@0.31.28': {}
'@sindresorhus/merge-streams@4.0.0': {}
'@solid-primitives/event-listener@2.4.3(solid-js@1.9.10)':
@@ -6433,6 +6516,8 @@ snapshots:
dependencies:
solid-js: 1.9.10
'@sqlite.org/sqlite-wasm@3.48.0-build4': {}
'@standard-schema/spec@1.1.0': {}
'@stylistic/eslint-plugin@5.6.1(eslint@9.39.2(jiti@2.6.1))':
@@ -7232,6 +7317,8 @@ snapshots:
dependencies:
dequal: 2.0.3
array-timsort@1.0.3: {}
assertion-error@2.0.1: {}
ast-types@0.16.1:
@@ -7468,12 +7555,20 @@ snapshots:
commander@14.0.2: {}
comment-json@4.5.1:
dependencies:
array-timsort: 1.0.3
core-util-is: 1.0.3
esprima: 4.0.1
comment-parser@1.4.1: {}
concat-map@0.0.1: {}
confbox@0.2.2: {}
consola@3.4.0: {}
consola@3.4.2: {}
content-disposition@1.0.1: {}
@@ -7490,6 +7585,8 @@ snapshots:
cookie@1.1.1: {}
core-util-is@1.0.3: {}
cors@2.8.5:
dependencies:
object-assign: 4.1.1
@@ -7548,6 +7645,8 @@ snapshots:
decimal.js@10.6.0: {}
dedent@1.5.1: {}
dedent@1.7.1: {}
deep-eql@5.0.2: {}
@@ -8113,10 +8212,6 @@ snapshots:
dependencies:
whatwg-encoding: 3.1.1
html-parse-stringify@3.0.1:
dependencies:
void-elements: 3.1.0
htmlparser2@10.0.0:
dependencies:
domelementtype: 2.3.0
@@ -8148,14 +8243,12 @@ snapshots:
transitivePeerDependencies:
- supports-color
human-id@4.1.3: {}
human-signals@2.1.0: {}
human-signals@8.0.1: {}
i18next-browser-languagedetector@8.2.0:
dependencies:
'@babel/runtime': 7.28.4
i18next@25.7.3(typescript@5.9.3):
dependencies:
'@babel/runtime': 7.28.4
@@ -8247,6 +8340,8 @@ snapshots:
jose@6.1.3: {}
js-sha256@0.11.1: {}
js-tokens@4.0.0: {}
js-tokens@9.0.1: {}
@@ -8312,6 +8407,8 @@ snapshots:
kleur@4.1.5: {}
kysely@0.27.6: {}
kysely@0.28.9: {}
launch-editor@2.12.0:
@@ -8874,17 +8971,6 @@ snapshots:
react: 19.2.3
scheduler: 0.27.0
react-i18next@16.5.0(i18next@25.7.3(typescript@5.9.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(typescript@5.9.3):
dependencies:
'@babel/runtime': 7.28.4
html-parse-stringify: 3.0.1
i18next: 25.7.3(typescript@5.9.3)
react: 19.2.3
use-sync-external-store: 1.6.0(react@19.2.3)
optionalDependencies:
react-dom: 19.2.3(react@19.2.3)
typescript: 5.9.3
react-is@17.0.2: {}
react-refresh@0.18.0: {}
@@ -9165,6 +9251,11 @@ snapshots:
split2@4.2.0: {}
sqlite-wasm-kysely@0.3.0(kysely@0.27.6):
dependencies:
'@sqlite.org/sqlite-wasm': 3.48.0-build4
kysely: 0.27.6
sqlstring@2.3.3: {}
srvx@0.9.8: {}
@@ -9397,6 +9488,8 @@ snapshots:
dependencies:
punycode: 2.3.1
urlpattern-polyfill@10.1.0: {}
use-callback-ref@1.3.3(@types/react@19.2.7)(react@19.2.3):
dependencies:
react: 19.2.3
@@ -9418,6 +9511,8 @@ snapshots:
util-deprecate@1.0.2: {}
uuid@10.0.0: {}
valibot@1.2.0(typescript@5.9.3):
optionalDependencies:
typescript: 5.9.3
@@ -9517,8 +9612,6 @@ snapshots:
- tsx
- yaml
void-elements@3.1.0: {}
vue-eslint-parser@10.2.0(eslint@9.39.2(jiti@2.6.1)):
dependencies:
debug: 4.4.3

5
prisma/data.ts
View File

@@ -1,9 +1,4 @@
export const settingsData = [
{
key: 'site_language',
value: 'en',
description: 'The language of the site',
},
{
key: 'site_name',
value: 'Fuware',

16
prisma/seed.ts
View File

@@ -11,6 +11,7 @@ const prisma = new PrismaClient({ adapter });
async function main() {
console.log('🌱 Seeding database...');
let admin;
// check mail exists
const mailExists = await prisma.user.findFirst({
@@ -20,7 +21,7 @@ async function main() {
});
if (!mailExists) {
// add admin user
await auth.api.createUser({
admin = await auth.api.createUser({
body: {
email: 'luu.dat.tham@gmail.com',
password: 'Th@m!S@m!040390',
@@ -33,10 +34,21 @@ async function main() {
console.log('---------------Created admin user-----------------');
await prisma.setting.deleteMany();
const listSettings = [
...settingsData,
{
key: admin ? (admin?.user?.id as string) : (mailExists?.id as string),
value: 'en',
description: 'User Settings',
relation: 'user',
},
];
await prisma.setting.createMany({
data: settingsData,
data: listSettings,
skipDuplicates: true,
});
console.log('---------------Created settings-----------------');
// // Clear existing todos
// await prisma.todo.deleteMany()

1
project.inlang/.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
cache

1
project.inlang/project_id Normal file
View File

@@ -0,0 +1 @@
7QuMkVtKjVPs6zTX3s

16
project.inlang/settings.json Normal file
View File

@@ -0,0 +1,16 @@
{
"$schema": "https://inlang.com/schema/project-settings",
"baseLocale": "en",
"locales": ["en", "vi"],
"modules": [
"https://cdn.jsdelivr.net/npm/@inlang/plugin-message-format@4/dist/index.js",
"https://cdn.jsdelivr.net/npm/@inlang/plugin-m-function-matcher@2/dist/index.js",
"https://cdn.jsdelivr.net/npm/@inlang/plugin-i18next@latest/dist/index.js"
],
"plugin.inlang.messageFormat": {
"pathPattern": "./messages/{locale}.json"
},
"plugin.inlang.i18next": {
"pathPattern": "./messages/{locale}.json"
}
}

11
src/components/Header.tsx
View File

@@ -1,7 +1,7 @@
import { useSession } from '@/lib/auth-client';
import { m } from '@/paraglide/messages';
import { Separator } from '@base-ui/react/separator';
import { BellIcon } from '@phosphor-icons/react';
import { useTranslation } from 'react-i18next';
import { useAuth } from './auth/auth-provider';
import RouterBreadcrumb from './sidebar/RouterBreadcrumb';
import { Badge } from './ui/badge';
import { Button } from './ui/button';
@@ -17,8 +17,7 @@ import {
import { SidebarTrigger } from './ui/sidebar';
export default function Header() {
const { t } = useTranslation();
const { data: session } = useSession();
const { data: session } = useAuth();
return (
<>
@@ -50,7 +49,7 @@ export default function Header() {
</DropdownMenuTrigger>
<DropdownMenuContent className="w-sm min-w-56 rounded-lg">
<DropdownMenuLabel className="font-bold text-black">
{t('ui.label_notifications')}
{m.ui_label_notifications()}
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuGroup>
@@ -66,7 +65,7 @@ export default function Header() {
<DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuItem>
{t('ui.view_all_notifications')}
{m.ui_view_all_notifications()}
</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>

5
src/components/auth/AdminShow.tsx
View File

@@ -1,8 +1,7 @@
import { useSession } from '@/lib/auth-client';
import { useAuth } from './auth-provider';
const AdminShow = ({ children }: { children: React.ReactNode }) => {
const { data } = useSession();
const isAdmin = data?.user?.role ? data?.user?.role === 'admin' : false;
const { isAdmin } = useAuth();
return isAdmin && children;
};

5
src/components/auth/AuthShow.tsx
View File

@@ -1,8 +1,7 @@
import { useSession } from '@/lib/auth-client';
import { useAuth } from './auth-provider';
const AuthShow = ({ children }: { children: React.ReactNode }) => {
const { data } = useSession();
const isAuth = !!data;
const { isAuth } = useAuth();
return isAuth && children;
};

40
src/components/auth/auth-provider.tsx Normal file
View File

@@ -0,0 +1,40 @@
import { ClientSession, useSession } from '@/lib/auth-client';
import { BetterFetchError } from 'better-auth/client';
import { createContext, useContext, useMemo } from 'react';
export type UserContext = {
data: ClientSession;
isAuth: boolean;
isAdmin: boolean;
isPending: boolean;
error: BetterFetchError | null;
};
const AuthContext = createContext<UserContext | null>(null);
export function AuthProvider({ children }: { children: React.ReactNode }) {
const { data: session, isPending, error } = useSession();
const contextSession: UserContext = useMemo(
() => ({
data: session as ClientSession,
isPending,
error,
isAuth: !!session,
isAdmin: session?.user?.role ? session.user.role === 'admin' : false,
}),
[session],
);
return (
<AuthContext.Provider value={contextSession}>
{children}
</AuthContext.Provider>
);
}
export function useAuth() {
const ctx = useContext(AuthContext);
if (!ctx) {
throw new Error('useAuth must be used within an AuthProvider');
}
return ctx;
}

8
src/components/avatar/AvatarUser.tsx
View File

@@ -1,5 +1,5 @@
import { useSession } from '@/lib/auth-client';
import { cn } from '@/lib/utils';
import { useAuth } from '../auth/auth-provider';
import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar';
import RoleRing from './RoleRing';
@@ -9,10 +9,12 @@ interface AvatarUserProps {
}
const AvatarUser = ({ className, textSize = 'md' }: AvatarUserProps) => {
const { data: session } = useSession();
const { data: session } = useAuth();
const imagePath = session?.user?.image
? `./data/avatar/${session?.user?.image}`
? new URL(`../../../data/avatar/${session?.user?.image}`, import.meta.url)
.href
: undefined;
const shortName = session?.user?.name
?.split(' ')
.slice(0, 2)

12
src/components/avatar/RoleBadge.tsx
View File

@@ -1,5 +1,5 @@
import { m } from '@/paraglide/messages';
import { VariantProps } from 'class-variance-authority';
import { useTranslation } from 'react-i18next';
import { Badge, badgeVariants } from '../ui/badge';
type BadgeVariant = VariantProps<typeof badgeVariants>['variant'];
@@ -10,8 +10,6 @@ type RoleProps = {
};
const RoleBadge = ({ type, className }: RoleProps) => {
const { t } = useTranslation();
// List all valid badge variant keys
const validBadgeVariants: BadgeVariant[] = [
'default',
@@ -27,10 +25,10 @@ const RoleBadge = ({ type, className }: RoleProps) => {
];
const LABEL_VALUE = {
admin: t('roleTags.admin'),
user: t('roleTags.user'),
member: t('roleTags.member'),
owner: t('roleTags.owner'),
admin: m.role_tags_admin(),
user: m.role_tags_user(),
member: m.role_tags_member(),
owner: m.role_tags_owner(),
};
// Determine the actual variant to apply.

99
src/components/form/change-password-form.tsx
View File

@@ -1,30 +1,30 @@
import { authClient } from '@/lib/auth-client'
import i18n from '@/lib/i18n'
import { KeyIcon } from '@phosphor-icons/react'
import { useForm } from '@tanstack/react-form'
import { useTranslation } from 'react-i18next'
import { toast } from 'sonner'
import z from 'zod'
import { Button } from '../ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '../ui/card'
import { Field, FieldError, FieldGroup, FieldLabel } from '../ui/field'
import { Input } from '../ui/input'
import { authClient } from '@/lib/auth-client';
import { m } from '@/paraglide/messages';
import { KeyIcon } from '@phosphor-icons/react';
import { useForm } from '@tanstack/react-form';
import i18next from 'i18next';
import { toast } from 'sonner';
import z from 'zod';
import { Button } from '../ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
import { Field, FieldError, FieldGroup, FieldLabel } from '../ui/field';
import { Input } from '../ui/input';
const ChangePasswordFormSchema = z
.object({
currentPassword: z.string().nonempty(
i18n.t('changePassword.messages.is_required', {
field: i18n.t('changePassword.form.current_password'),
m.common_is_required({
field: m.change_password_form_current_password(),
}),
),
newPassword: z.string().nonempty(
i18n.t('changePassword.messages.is_required', {
field: i18n.t('changePassword.form.new_password'),
m.common_is_required({
field: m.change_password_form_new_password(),
}),
),
confirmPassword: z.string().nonempty(
i18n.t('changePassword.messages.is_required', {
field: i18n.t('changePassword.form.confirm_password'),
m.common_is_required({
field: m.change_password_form_confirm_password(),
}),
),
})
@@ -33,22 +33,20 @@ const ChangePasswordFormSchema = z
ctx.addIssue({
path: ['confirmPassword'],
code: z.ZodIssueCode.custom,
message: i18n.t('changePassword.messages.password_not_match'),
})
message: m.change_password_messages_password_not_match(),
});
}
})
});
type ChangePassword = z.infer<typeof ChangePasswordFormSchema>
type ChangePassword = z.infer<typeof ChangePasswordFormSchema>;
const defaultValues: ChangePassword = {
currentPassword: '',
newPassword: '',
confirmPassword: '',
}
};
const ChangePasswordForm = () => {
const { t } = useTranslation()
const form = useForm({
defaultValues,
validators: {
@@ -64,33 +62,40 @@ const ChangePasswordForm = () => {
},
{
onSuccess: () => {
form.reset()
toast.success(t('changePassword.messages.change_password_success'))
form.reset();
toast.success(
m.change_password_messages_change_password_success(),
{
richColors: true,
},
);
},
onError: (ctx) => {
console.log(ctx.error.code)
toast.error(t(`backend.${ctx.error.code}` as any))
console.log(ctx.error.code);
toast.error(i18next.t(`backend_${ctx.error.code}` as any), {
richColors: true,
});
},
},
)
);
},
})
});
return (
<Card className="@container/card">
<CardHeader>
<CardTitle className="text-xl flex items-center gap-2">
<KeyIcon size={20} />
{t('changePassword.ui.title')}
{m.change_password_ui_title()}
</CardTitle>
</CardHeader>
<CardContent>
<form
id="change-password-form"
onSubmit={(e) => {
e.preventDefault()
e.stopPropagation()
form.handleSubmit()
e.preventDefault();
e.stopPropagation();
form.handleSubmit();
}}
>
<FieldGroup>
@@ -98,11 +103,11 @@ const ChangePasswordForm = () => {
name="currentPassword"
children={(field) => {
const isInvalid =
field.state.meta.isTouched && !field.state.meta.isValid
field.state.meta.isTouched && !field.state.meta.isValid;
return (
<Field data-invalid={isInvalid}>
<FieldLabel htmlFor={field.name}>
{t('changePassword.form.current_password')}:
{m.change_password_form_current_password()}:
</FieldLabel>
<Input
id={field.name}
@@ -117,18 +122,18 @@ const ChangePasswordForm = () => {
<FieldError errors={field.state.meta.errors} />
)}
</Field>
)
);
}}
/>
<form.Field
name="newPassword"
children={(field) => {
const isInvalid =
field.state.meta.isTouched && !field.state.meta.isValid
field.state.meta.isTouched && !field.state.meta.isValid;
return (
<Field data-invalid={isInvalid}>
<FieldLabel htmlFor={field.name}>
{t('changePassword.form.new_password')}:
{m.change_password_form_new_password()}:
</FieldLabel>
<Input
id={field.name}
@@ -143,18 +148,18 @@ const ChangePasswordForm = () => {
<FieldError errors={field.state.meta.errors} />
)}
</Field>
)
);
}}
/>
<form.Field
name="confirmPassword"
children={(field) => {
const isInvalid =
field.state.meta.isTouched && !field.state.meta.isValid
field.state.meta.isTouched && !field.state.meta.isValid;
return (
<Field data-invalid={isInvalid}>
<FieldLabel htmlFor={field.name}>
{t('changePassword.form.confirm_password')}:
{m.change_password_form_confirm_password()}:
</FieldLabel>
<Input
id={field.name}
@@ -169,17 +174,17 @@ const ChangePasswordForm = () => {
<FieldError errors={field.state.meta.errors} />
)}
</Field>
)
);
}}
/>
<Field>
<Button type="submit">{t('ui.change_password_btn')}</Button>
<Button type="submit">{m.ui_change_password_btn()}</Button>
</Field>
</FieldGroup>
</form>
</CardContent>
</Card>
)
}
);
};
export default ChangePasswordForm
export default ChangePasswordForm;

27
src/components/form/profile-form.tsx
View File

@@ -1,12 +1,14 @@
import { authClient, useSession } from '@/lib/auth-client';
import { authClient } from '@/lib/auth-client';
import { m } from '@/paraglide/messages';
import { uploadProfileImage } from '@/service/profile.api';
import { ProfileInput, profileUpdateSchema } from '@/service/profile.schema';
import { UserCircleIcon } from '@phosphor-icons/react';
import { useForm } from '@tanstack/react-form';
import { useQueryClient } from '@tanstack/react-query';
import i18next from 'i18next';
import { useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { toast } from 'sonner';
import { useAuth } from '../auth/auth-provider';
import AvatarUser from '../avatar/AvatarUser';
import RoleBadge from '../avatar/RoleBadge';
import { Button } from '../ui/button';
@@ -20,9 +22,8 @@ const defaultValues: ProfileInput = {
};
const ProfileForm = () => {
const { t } = useTranslation();
const fileInputRef = useRef<HTMLInputElement>(null);
const { data: session, isPending } = useSession();
const { data: session, isPending } = useAuth();
const queryClient = useQueryClient();
const form = useForm({
@@ -61,10 +62,14 @@ const ProfileForm = () => {
queryClient.refetchQueries({
queryKey: ['auth', 'session'],
});
toast.success(t('profile.messages.update_success'));
toast.success(m.profile_messages_update_success(), {
richColors: true,
});
},
onError: (ctx) => {
toast.error(t(`backend.${ctx.error.code}` as any));
toast.error(i18next.t(`backend.${ctx.error.code}` as any), {
richColors: true,
});
},
},
);
@@ -80,7 +85,7 @@ const ProfileForm = () => {
<CardHeader>
<CardTitle className="text-xl flex items-center gap-2">
<UserCircleIcon size={20} />
{t('profile.ui.title')}
{m.profile_ui_title()}
</CardTitle>
</CardHeader>
<CardContent>
@@ -130,7 +135,7 @@ const ProfileForm = () => {
return (
<Field data-invalid={isInvalid}>
<FieldLabel htmlFor={field.name}>
{t('profile.form.name')}
{m.profile_form_name()}
</FieldLabel>
<Input
id={field.name}
@@ -148,7 +153,7 @@ const ProfileForm = () => {
}}
/>
<Field>
<FieldLabel htmlFor="name">{t('profile.form.email')}</FieldLabel>
<FieldLabel htmlFor="name">{m.profile_form_email()}</FieldLabel>
<Input
id="email"
name="email"
@@ -158,13 +163,13 @@ const ProfileForm = () => {
/>
</Field>
<Field>
<FieldLabel htmlFor="name">{t('profile.form.role')}</FieldLabel>
<FieldLabel htmlFor="name">{m.profile_form_role()}</FieldLabel>
<div className="flex gap-2">
<RoleBadge type={session?.user?.role} />
</div>
</Field>
<Field>
<Button type="submit">{t('ui.update_btn')}</Button>
<Button type="submit">{m.ui_update_btn()}</Button>
</Field>
</FieldGroup>
</form>

33
src/components/form/settings-form.tsx
View File

@@ -1,33 +1,24 @@
import { m } from '@/paraglide/messages';
import { settingQueries } from '@/service/queries';
import { updateSettings } from '@/service/setting.api';
import { settingSchema, SettingsInput } from '@/service/setting.schema';
import { GearIcon } from '@phosphor-icons/react';
import { useForm } from '@tanstack/react-form';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { useTranslation } from 'react-i18next';
import { toast } from 'sonner';
import { Button } from '../ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
import { Field, FieldError, FieldGroup, FieldLabel } from '../ui/field';
import { Input } from '../ui/input';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '../ui/select';
import { Textarea } from '../ui/textarea';
const defaultValues: SettingsInput = {
site_language: '',
site_name: '',
site_description: '',
site_keywords: '',
};
const SettingsForm = () => {
const { t } = useTranslation();
const queryClient = useQueryClient();
const { data: settings } = useQuery(settingQueries.list());
@@ -35,8 +26,11 @@ const SettingsForm = () => {
const updateMutation = useMutation({
mutationFn: updateSettings,
onSuccess: () => {
// setLocale(variables.data.site_language as Locale);
queryClient.invalidateQueries({ queryKey: settingQueries.all });
toast.success(t('settings.messages.update_success'));
toast.success(m.settings_messages_update_success(), {
richColors: true,
});
},
});
@@ -46,7 +40,6 @@ const SettingsForm = () => {
site_name: settings?.site_name?.value || '',
site_description: settings?.site_description?.value || '',
site_keywords: settings?.site_keywords?.value || '',
site_language: settings?.site_language?.value || '',
},
validators: {
onSubmit: settingSchema,
@@ -62,7 +55,7 @@ const SettingsForm = () => {
<CardHeader>
<CardTitle className="text-xl flex items-center gap-2">
<GearIcon size={20} />
{t('settings.ui.title')}
{m.settings_ui_title()}
</CardTitle>
</CardHeader>
<CardContent>
@@ -83,7 +76,7 @@ const SettingsForm = () => {
return (
<Field data-invalid={isInvalid} className="col-span-2">
<FieldLabel htmlFor={field.name}>
{t('settings.form.name')}
{m.settings_form_name()}
</FieldLabel>
<Input
id={field.name}
@@ -108,7 +101,7 @@ const SettingsForm = () => {
return (
<Field data-invalid={isInvalid} className="col-span-2">
<FieldLabel htmlFor={field.name}>
{t('settings.form.description')}
{m.settings_form_description()}
</FieldLabel>
<Textarea
id={field.name}
@@ -134,7 +127,7 @@ const SettingsForm = () => {
return (
<Field data-invalid={isInvalid} className="col-span-2">
<FieldLabel htmlFor={field.name}>
{t('settings.form.keywords')}
{m.settings_form_keywords()}
</FieldLabel>
<Textarea
id={field.name}
@@ -152,7 +145,7 @@ const SettingsForm = () => {
);
}}
/>
<form.Field
{/* <form.Field
name="site_language"
children={(field) => {
const isInvalid =
@@ -160,7 +153,7 @@ const SettingsForm = () => {
return (
<Field data-invalid={isInvalid} className="col-span-2">
<FieldLabel htmlFor={field.name}>
{t('settings.form.language')}
{m.settings_form_language()}
</FieldLabel>
<Select
name={field.name}
@@ -182,9 +175,9 @@ const SettingsForm = () => {
</Field>
);
}}
/>
/> */}
<Field>
<Button type="submit">{t('ui.update_btn')}</Button>
<Button type="submit">{m.ui_update_btn()}</Button>
</Field>
</FieldGroup>
</form>

87
src/components/form/signin-form.tsx
View File

@@ -1,38 +1,33 @@
import { authClient } from '@/lib/auth-client'
import i18n from '@/lib/i18n'
import { useForm } from '@tanstack/react-form'
import { useQueryClient } from '@tanstack/react-query'
import { createLink, useNavigate } from '@tanstack/react-router'
import { useTranslation } from 'react-i18next'
import { toast } from 'sonner'
import z from 'zod'
import { Button } from '../ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '../ui/card'
import { Field, FieldError, FieldGroup, FieldLabel } from '../ui/field'
import { Input } from '../ui/input'
import { authClient } from '@/lib/auth-client';
import { m } from '@/paraglide/messages';
import { useForm } from '@tanstack/react-form';
import { useQueryClient } from '@tanstack/react-query';
import { createLink, useNavigate } from '@tanstack/react-router';
import i18next from 'i18next';
import { toast } from 'sonner';
import z from 'zod';
import { Button } from '../ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
import { Field, FieldError, FieldGroup, FieldLabel } from '../ui/field';
import { Input } from '../ui/input';
const SignInFormSchema = z.object({
email: z
.string()
.nonempty(
i18n.t('loginPage.messages.is_required', {
field: i18n.t('loginPage.form.email'),
}),
)
.email(i18n.t('loginPage.messages.email_invalid')),
.nonempty(m.common_is_required({ field: m.login_page_form_email }))
.email(m.login_page_messages_email_invalid()),
password: z.string().nonempty(
i18n.t('loginPage.messages.is_required', {
field: i18n.t('loginPage.form.password'),
m.common_is_required({
field: m.login_page_form_password(),
}),
),
})
});
const ButtonLink = createLink(Button)
const ButtonLink = createLink(Button);
const SignInForm = () => {
const { t } = useTranslation()
const navigate = useNavigate()
const queryClient = useQueryClient()
const navigate = useNavigate();
const queryClient = useQueryClient();
const form = useForm({
defaultValues: {
email: '',
@@ -50,24 +45,28 @@ const SignInForm = () => {
},
{
onSuccess: () => {
navigate({ to: '/' })
navigate({ to: '/' });
queryClient.invalidateQueries({ queryKey: ['auth', 'session'] });
toast.success(t('loginPage.messages.login_success'))
toast.success(m.login_page_messages_login_success(), {
richColors: true,
});
},
onError: (ctx) => {
toast.error(t(`backend.${ctx.error.code}` as any))
toast.error(i18next.t(`backend.${ctx.error.code}` as any), {
richColors: true,
});
},
},
)
);
},
})
});
return (
<div className="flex flex-col gap-6">
<Card>
<CardHeader className="text-center">
<CardTitle className="text-xl">
{t('loginPage.ui.welcome_back')}
{m.login_page_ui_welcome_back()}
</CardTitle>
{/* <CardDescription>Login with your Google account</CardDescription> */}
</CardHeader>
@@ -75,8 +74,8 @@ const SignInForm = () => {
<form
id="sign-in-form"
onSubmit={(e) => {
e.preventDefault()
form.handleSubmit()
e.preventDefault();
form.handleSubmit();
}}
>
<FieldGroup>
@@ -96,11 +95,11 @@ const SignInForm = () => {
name="email"
children={(field) => {
const isInvalid =
field.state.meta.isTouched && !field.state.meta.isValid
field.state.meta.isTouched && !field.state.meta.isValid;
return (
<Field data-invalid={isInvalid}>
<FieldLabel htmlFor={field.name}>
{t('loginPage.form.email')}
{m.login_page_form_email()}
</FieldLabel>
<Input
id={field.name}
@@ -117,18 +116,18 @@ const SignInForm = () => {
<FieldError errors={field.state.meta.errors} />
)}
</Field>
)
);
}}
/>
<form.Field
name="password"
children={(field) => {
const isInvalid =
field.state.meta.isTouched && !field.state.meta.isValid
field.state.meta.isTouched && !field.state.meta.isValid;
return (
<Field data-invalid={isInvalid}>
<FieldLabel htmlFor={field.name}>
{t('loginPage.form.password')}
{m.login_page_form_password()}
</FieldLabel>
<Input
id={field.name}
@@ -143,13 +142,13 @@ const SignInForm = () => {
<FieldError errors={field.state.meta.errors} />
)}
</Field>
)
);
}}
/>
<Field>
<Button type="submit">{t('ui.login_btn')}</Button>
<Button type="submit">{m.ui_login_btn()}</Button>
<ButtonLink to="/" variant="outline">
{t('ui.cancel_btn')}
{m.ui_cancel_btn()}
</ButtonLink>
{/* <FieldDescription className="text-center">
{t('loginPage.ui.not_have_account')}{' '}
@@ -165,7 +164,7 @@ const SignInForm = () => {
and <a href="#">Privacy Policy</a>.
</FieldDescription> */}
</div>
)
}
);
};
export default SignInForm
export default SignInForm;

25
src/components/form/signup-form.tsx
View File

@@ -1,20 +1,19 @@
import { createLink, Link } from '@tanstack/react-router'
import { useTranslation } from 'react-i18next'
import { Button } from '../ui/button'
import { m } from '@/paraglide/messages';
import { createLink, Link } from '@tanstack/react-router';
import { Button } from '../ui/button';
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from '../ui/card'
import { Field, FieldDescription, FieldGroup, FieldLabel } from '../ui/field'
import { Input } from '../ui/input'
} from '../ui/card';
import { Field, FieldDescription, FieldGroup, FieldLabel } from '../ui/field';
import { Input } from '../ui/input';
const ButtonLink = createLink(Button)
const ButtonLink = createLink(Button);
const SignupForm = () => {
const { t } = useTranslation()
return (
<div className="flex flex-col gap-6">
<Card>
@@ -59,11 +58,11 @@ const SignupForm = () => {
<Field>
<Button type="submit">Create Account</Button>
<ButtonLink to="/" variant="outline">
{t('ui.cancel_btn')}
{m.ui_cancel_btn()}
</ButtonLink>
<FieldDescription className="text-center">
Already have an account?{' '}
<Link to="/sign-in">{t('ui.login_btn')}</Link>
<Link to="/sign-in">{m.ui_login_btn()}</Link>
</FieldDescription>
</Field>
</FieldGroup>
@@ -75,7 +74,7 @@ const SignupForm = () => {
and <a href="#">Privacy Policy</a>.
</FieldDescription> */}
</div>
)
}
);
};
export default SignupForm
export default SignupForm;

15
src/components/sidebar/RouterBreadcrumb.tsx
View File

@@ -17,24 +17,27 @@ export type BreadcrumbValue =
const RouterBreadcrumb = () => {
const matches = useMatches()
console.log(matches);
const breadcrumbs = matches.flatMap((match) => {
const staticData = match.staticData
if (!staticData?.breadcrumb) return []
const staticData = match.staticData;
console.log(staticData);
if (!staticData?.breadcrumb) return [];
const breadcrumbValue =
typeof staticData.breadcrumb === 'function'
? staticData.breadcrumb(match)
: staticData.breadcrumb
: staticData.breadcrumb;
const items = Array.isArray(breadcrumbValue)
? breadcrumbValue
: [breadcrumbValue]
: [breadcrumbValue];
return items.map((item) => ({
label: item,
path: match.pathname,
}))
})
}));
});
return (
<Breadcrumb>

16
src/components/sidebar/nav-main.tsx
View File

@@ -1,6 +1,6 @@
import { m } from '@/paraglide/messages';
import { GaugeIcon, GearIcon, HouseIcon } from '@phosphor-icons/react';
import { createLink } from '@tanstack/react-router';
import { useTranslation } from 'react-i18next';
import AdminShow from '../auth/AdminShow';
import AuthShow from '../auth/AuthShow';
import {
@@ -13,8 +13,6 @@ import {
const SidebarMenuButtonLink = createLink(SidebarMenuButton);
const NavMain = () => {
const { t } = useTranslation();
return (
<SidebarGroup>
<SidebarMenu>
@@ -22,28 +20,28 @@ const NavMain = () => {
<SidebarMenuButtonLink
to="/"
className="cursor-pointer"
tooltip={t('nav.home')}
tooltip={m.nav_home()}
>
<HouseIcon size={24} />
{t('nav.home')}
{m.nav_home()}
</SidebarMenuButtonLink>
<AuthShow>
<SidebarMenuButtonLink
to="/dashboard"
className="cursor-pointer"
tooltip={t('nav.dashboard')}
tooltip={m.nav_dashboard()}
>
<GaugeIcon size={24} />
{t('nav.dashboard')}
{m.nav_dashboard()}
</SidebarMenuButtonLink>
<AdminShow>
<SidebarMenuButtonLink
to="/settings"
className="cursor-pointer"
tooltip={t('nav.settings')}
tooltip={m.nav_settings()}
>
<GearIcon size={24} />
{t('nav.settings')}
{m.nav_settings()}
</SidebarMenuButtonLink>
</AdminShow>
</AuthShow>

52
src/components/sidebar/nav-user.tsx
View File

@@ -1,4 +1,5 @@
import { authClient, useSession } from '@/lib/auth-client';
import { authClient } from '@/lib/auth-client';
import { m } from '@/paraglide/messages';
import {
DotsThreeVerticalIcon,
KeyIcon,
@@ -8,8 +9,9 @@ import {
} from '@phosphor-icons/react';
import { useQueryClient } from '@tanstack/react-query';
import { createLink, Link, useNavigate } from '@tanstack/react-router';
import { useTranslation } from 'react-i18next';
import i18next from 'i18next';
import { toast } from 'sonner';
import { useAuth } from '../auth/auth-provider';
import AvatarUser from '../avatar/AvatarUser';
import RoleBadge from '../avatar/RoleBadge';
import {
@@ -31,11 +33,10 @@ import {
const SidebarMenuButtonLink = createLink(SidebarMenuButton);
const NavUser = () => {
const { t } = useTranslation();
const navigate = useNavigate();
const { isMobile } = useSidebar();
const queryClient = useQueryClient();
const { data: session } = useSession();
const { data: session } = useAuth();
const signout = async () => {
await authClient.signOut({
@@ -43,10 +44,14 @@ const NavUser = () => {
onSuccess: () => {
navigate({ to: '/' });
queryClient.invalidateQueries({ queryKey: ['auth', 'session'] });
toast.success(t('loginPage.messages.logout_success'));
toast.success(m.login_page_messages_login_success(), {
richColors: true,
});
},
onError: (ctx) => {
toast.error(t(`backend.${ctx.error.code}` as any));
toast.error(i18next.t(`backend_${ctx.error.code}` as any), {
richColors: true,
});
},
},
});
@@ -62,7 +67,7 @@ const NavUser = () => {
tooltip="Sign In"
>
<SignInIcon size={28} />
{t('ui.login_btn')}
{m.ui_login_btn()}
</SidebarMenuButtonLink>
</SidebarMenuItem>
</SidebarMenu>
@@ -76,14 +81,14 @@ const NavUser = () => {
<SidebarMenuButton
size="lg"
className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground cursor-pointer"
tooltip={session?.user?.name}
tooltip={session.user.name}
>
<AvatarUser className="h-8 w-8" />
<div className="grid flex-1 text-left text-sm leading-tight">
<span className="truncate font-medium">
{session?.user?.name}
{session.user.name}
</span>
<span className="truncate text-xs">{session?.user?.email}</span>
<span className="truncate text-xs">{session.user.email}</span>
</div>
<DotsThreeVerticalIcon size={28} />
</SidebarMenuButton>
@@ -101,31 +106,38 @@ const NavUser = () => {
<div className="grid flex-1 text-left text-sm leading-tight">
<div className="flex gap-2 items-center">
<span className="truncate font-medium">
{session?.user?.name}
{session.user.name}
</span>
<RoleBadge
type={session?.user?.role}
type={session.user.role}
className="text-[10px] px-2 py-0 leading-0.5 h-4"
/>
</div>
<span className="truncate text-xs">
{session?.user?.email}
</span>
<span className="truncate text-xs">{session.user.email}</span>
</div>
</div>
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem className="cursor-pointer" asChild>
<Link to="/profile">
<Link to="/account/profile">
<UserCircleIcon size={28} />
{t('nav.account')}
{m.nav_account()}
</Link>
</DropdownMenuItem>
<DropdownMenuItem className="cursor-pointer" asChild>
<Link to="/change-password">
<Link to="/account/change-password">
<KeyIcon size={28} />
{t('nav.change_password')}
{m.nav_change_password()}
</Link>
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem className="cursor-pointer" asChild>
<Link to="/account/settings">
<UserCircleIcon size={28} />
{m.nav_settings()}
</Link>
</DropdownMenuItem>
</DropdownMenuGroup>
@@ -133,7 +145,7 @@ const NavUser = () => {
<DropdownMenuGroup>
<DropdownMenuItem onSelect={signout} className="cursor-pointer">
<SignOutIcon size={28} />
{t('ui.logout_btn')}
{m.ui_logout_btn()}
</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>

70
src/components/ui/breadcrumb.tsx
View File

@@ -1,10 +1,10 @@
import * as React from "react"
import { Slot } from "radix-ui"
import { Slot } from 'radix-ui';
import * as React from 'react';
import { cn } from "@/lib/utils"
import { CaretRightIcon, DotsThreeIcon } from "@phosphor-icons/react"
import { cn } from '@/lib/utils';
import { CaretRightIcon, DotsThreeIcon } from '@phosphor-icons/react';
function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
function Breadcrumb({ className, ...props }: React.ComponentProps<'nav'>) {
return (
<nav
aria-label="breadcrumb"
@@ -12,112 +12,108 @@ function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
className={cn(className)}
{...props}
/>
)
);
}
function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {
return (
<ol
data-slot="breadcrumb-list"
className={cn(
"text-muted-foreground gap-1.5 text-xs/relaxed flex flex-wrap items-center break-words",
className
'text-muted-foreground gap-1.5 text-xs/relaxed flex flex-wrap items-center wrap-break-word',
className,
)}
{...props}
/>
)
);
}
function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {
return (
<li
data-slot="breadcrumb-item"
className={cn("gap-1 inline-flex items-center", className)}
className={cn('gap-1 inline-flex items-center', className)}
{...props}
/>
)
);
}
function BreadcrumbLink({
asChild,
className,
...props
}: React.ComponentProps<"a"> & {
asChild?: boolean
}: React.ComponentProps<'a'> & {
asChild?: boolean;
}) {
const Comp = asChild ? Slot.Root : "a"
const Comp = asChild ? Slot.Root : 'a';
return (
<Comp
data-slot="breadcrumb-link"
className={cn("hover:text-foreground transition-colors", className)}
className={cn('hover:text-foreground transition-colors', className)}
{...props}
/>
)
);
}
function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {
return (
<span
data-slot="breadcrumb-page"
role="link"
aria-disabled="true"
aria-current="page"
className={cn("text-foreground font-normal", className)}
className={cn('text-foreground font-normal', className)}
{...props}
/>
)
);
}
function BreadcrumbSeparator({
children,
className,
...props
}: React.ComponentProps<"li">) {
}: React.ComponentProps<'li'>) {
return (
<li
data-slot="breadcrumb-separator"
role="presentation"
aria-hidden="true"
className={cn("[&>svg]:size-3.5", className)}
className={cn('[&>svg]:size-3.5', className)}
{...props}
>
{children ?? (
<CaretRightIcon
/>
)}
{children ?? <CaretRightIcon />}
</li>
)
);
}
function BreadcrumbEllipsis({
className,
...props
}: React.ComponentProps<"span">) {
}: React.ComponentProps<'span'>) {
return (
<span
data-slot="breadcrumb-ellipsis"
role="presentation"
aria-hidden="true"
className={cn(
"size-4 [&>svg]:size-3.5 flex items-center justify-center",
className
'size-4 [&>svg]:size-3.5 flex items-center justify-center',
className,
)}
{...props}
>
<DotsThreeIcon
/>
<DotsThreeIcon />
<span className="sr-only">More</span>
</span>
)
);
}
export {
Breadcrumb,
BreadcrumbList,
BreadcrumbEllipsis,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
BreadcrumbEllipsis,
}
};

10
src/components/ui/dropdown-menu.tsx
View File

@@ -74,7 +74,7 @@ function DropdownMenuItem({
data-inset={inset}
data-variant={variant}
className={cn(
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
className,
)}
{...props}
@@ -92,7 +92,7 @@ function DropdownMenuCheckboxItem({
<DropdownMenuPrimitive.CheckboxItem
data-slot="dropdown-menu-checkbox-item"
className={cn(
"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
className,
)}
checked={checked}
@@ -131,7 +131,7 @@ function DropdownMenuRadioItem({
<DropdownMenuPrimitive.RadioItem
data-slot="dropdown-menu-radio-item"
className={cn(
"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
className,
)}
{...props}
@@ -161,7 +161,7 @@ function DropdownMenuLabel({
data-slot="dropdown-menu-label"
data-inset={inset}
className={cn(
'text-muted-foreground px-2 py-1.5 text-xs data-[inset]:pl-8',
'text-muted-foreground px-2 py-1.5 text-xs data-inset:pl-8',
className,
)}
{...props}
@@ -217,7 +217,7 @@ function DropdownMenuSubTrigger({
data-slot="dropdown-menu-sub-trigger"
data-inset={inset}
className={cn(
"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs [&_svg:not([class*='size-'])]:size-3.5 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs [&_svg:not([class*='size-'])]:size-3.5 flex cursor-default items-center outline-hidden select-none data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
className,
)}
{...props}

149
src/components/ui/field.tsx
View File

@@ -1,69 +1,77 @@
import { useMemo } from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cva, type VariantProps } from 'class-variance-authority';
import { useMemo } from 'react';
import { cn } from "@/lib/utils"
import { Label } from "@/components/ui/label"
import { Separator } from "@/components/ui/separator"
import { Label } from '@/components/ui/label';
import { Separator } from '@/components/ui/separator';
import { cn } from '@/lib/utils';
function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
function FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>) {
return (
<fieldset
data-slot="field-set"
className={cn("gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col", className)}
className={cn(
'gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col',
className,
)}
{...props}
/>
)
);
}
function FieldLegend({
className,
variant = "legend",
variant = 'legend',
...props
}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
}: React.ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {
return (
<legend
data-slot="field-legend"
data-variant={variant}
className={cn("mb-2 font-medium data-[variant=label]:text-xs/relaxed data-[variant=legend]:text-sm", className)}
className={cn(
'mb-2 font-medium data-[variant=label]:text-xs/relaxed data-[variant=legend]:text-sm',
className,
)}
{...props}
/>
)
);
}
function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
function FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {
return (
<div
data-slot="field-group"
className={cn(
"gap-4 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4 group/field-group @container/field-group flex w-full flex-col",
className
'gap-4 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4 group/field-group @container/field-group flex w-full flex-col',
className,
)}
{...props}
/>
)
);
}
const fieldVariants = cva("data-[invalid=true]:text-destructive gap-2 group/field flex w-full", {
variants: {
orientation: {
vertical:
"flex-col [&>*]:w-full [&>.sr-only]:w-auto",
horizontal:
"flex-row items-center [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
responsive:
"flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
const fieldVariants = cva(
'data-[invalid=true]:text-destructive gap-2 group/field flex w-full',
{
variants: {
orientation: {
vertical: 'flex-col [&>*]:w-full [&>.sr-only]:w-auto',
horizontal:
'flex-row items-center [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
responsive:
'flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
},
},
defaultVariants: {
orientation: 'vertical',
},
},
defaultVariants: {
orientation: "vertical",
},
})
);
function Field({
className,
orientation = "vertical",
orientation = 'vertical',
...props
}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
}: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>) {
return (
<div
role="group"
@@ -72,20 +80,20 @@ function Field({
className={cn(fieldVariants({ orientation }), className)}
{...props}
/>
)
);
}
function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
function FieldContent({ className, ...props }: React.ComponentProps<'div'>) {
return (
<div
data-slot="field-content"
className={cn(
"gap-0.5 group/field-content flex flex-1 flex-col leading-snug",
className
'gap-0.5 group/field-content flex flex-1 flex-col leading-snug',
className,
)}
{...props}
/>
)
);
}
function FieldLabel({
@@ -96,55 +104,58 @@ function FieldLabel({
<Label
data-slot="field-label"
className={cn(
"has-data-checked:bg-primary/5 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-2 group/field-label peer/field-label flex w-fit leading-snug",
"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
className
'has-data-checked:bg-primary/5 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-2 group/field-label peer/field-label flex w-fit leading-snug',
'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col',
className,
)}
{...props}
/>
)
);
}
function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
function FieldTitle({ className, ...props }: React.ComponentProps<'div'>) {
return (
<div
data-slot="field-label"
className={cn(
"gap-2 text-xs/relaxed font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug",
className
'gap-2 text-xs/relaxed font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug',
className,
)}
{...props}
/>
)
);
}
function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
function FieldDescription({ className, ...props }: React.ComponentProps<'p'>) {
return (
<p
data-slot="field-description"
className={cn(
"text-muted-foreground text-left text-xs/relaxed [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
"last:mt-0 nth-last-2:-mt-1",
"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
className
'text-muted-foreground text-left text-xs/relaxed [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-data-[orientation=horizontal]/field:text-balance',
'last:mt-0 nth-last-2:-mt-1',
'[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
className,
)}
{...props}
/>
)
);
}
function FieldSeparator({
children,
className,
...props
}: React.ComponentProps<"div"> & {
children?: React.ReactNode
}: React.ComponentProps<'div'> & {
children?: React.ReactNode;
}) {
return (
<div
data-slot="field-separator"
data-content={!!children}
className={cn("-my-2 h-5 text-xs/relaxed group-data-[variant=outline]/field-group:-mb-2 relative", className)}
className={cn(
'-my-2 h-5 text-xs/relaxed group-data-[variant=outline]/field-group:-mb-2 relative',
className,
)}
{...props}
>
<Separator className="absolute inset-0 top-1/2" />
@@ -157,7 +168,7 @@ function FieldSeparator({
</span>
)}
</div>
)
);
}
function FieldError({
@@ -165,61 +176,61 @@ function FieldError({
children,
errors,
...props
}: React.ComponentProps<"div"> & {
errors?: Array<{ message?: string } | undefined>
}: React.ComponentProps<'div'> & {
errors?: Array<{ message?: string } | undefined>;
}) {
const content = useMemo(() => {
if (children) {
return children
return children;
}
if (!errors?.length) {
return null
return null;
}
const uniqueErrors = [
...new Map(errors.map((error) => [error?.message, error])).values(),
]
];
if (uniqueErrors?.length == 1) {
return uniqueErrors[0]?.message
return uniqueErrors[0]?.message;
}
return (
<ul className="ml-4 flex list-disc flex-col gap-1">
{uniqueErrors.map(
(error, index) =>
error?.message && <li key={index}>{error.message}</li>
error?.message && <li key={index}>{error.message}</li>,
)}
</ul>
)
}, [children, errors])
);
}, [children, errors]);
if (!content) {
return null
return null;
}
return (
<div
role="alert"
data-slot="field-error"
className={cn("text-destructive text-xs/relaxed font-normal", className)}
className={cn('text-destructive text-xs/relaxed font-normal', className)}
{...props}
>
{content}
</div>
)
);
}
export {
Field,
FieldLabel,
FieldContent,
FieldDescription,
FieldError,
FieldGroup,
FieldLabel,
FieldLegend,
FieldSeparator,
FieldSet,
FieldContent,
FieldTitle,
}
};

2
src/components/ui/sidebar.tsx
View File

@@ -288,7 +288,7 @@ function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
onClick={toggleSidebar}
title="Toggle Sidebar"
className={cn(
'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-0.5 sm:flex',
'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
'[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
'hover:group-data-[collapsible=offExamples]:bg-sidebar group-data-[collapsible=offExamples]:translate-x-0 group-data-[collapsible=offExamples]:after:left-full',

44
src/lib/i18n.ts
View File

@@ -1,44 +0,0 @@
import { createIsomorphicFn } from '@tanstack/react-start';
import { getCookie } from '@tanstack/react-start/server';
import i18n from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import { initReactI18next } from 'react-i18next';
import enTranslations from '../locales/en.json';
import viTranslations from '../locales/vi.json';
export const resources = {
en: {
translation: enTranslations,
},
vi: {
translation: viTranslations,
},
} as const;
export const defaultNS = 'translation';
const i18nCookieName = 'i18nextLng';
i18n
.use(LanguageDetector)
.use(initReactI18next)
.init({
resources,
defaultNS,
fallbackLng: 'vi',
supportedLngs: ['en', 'vi'],
detection: {
order: ['cookie'],
lookupCookie: i18nCookieName,
caches: ['cookie'],
cookieMinutes: 60 * 24 * 365,
},
interpolation: { escapeValue: false },
});
export const setSSRLanguage = createIsomorphicFn().server(async () => {
const language = getCookie(i18nCookieName);
await i18n.changeLanguage(language || 'vi');
});
export default i18n;

273
src/locales/en.json
View File

@@ -1,273 +0,0 @@
{
"common": {
"page_show": "{count, selectordinal, =1 {Hiện chỉ có # dữ liệu} other {Hiển thị {start} tới {end} của # dữ liệu}}",
"no_list": "Hiện tại chưa có dữ liệu nào!"
},
"roleTags": {
"admin": "Administrator",
"user": "User",
"member": "Member",
"owner": "Owner"
},
"ui": {
"login_btn": "Sign in",
"logout_btn": "Sign out",
"cancel_btn": "Cancel",
"close_btn": "Close",
"confirm_btn": "Confirm",
"view_btn": "View",
"signup_btn": "Sign up",
"save_btn": "Save",
"update_btn": "Update",
"view_all_notifications": "View All Notifications",
"label_notifications": "Notifications",
"change_password_btn": "Change password"
},
"nav": {
"home": "Home",
"dashboard": "Dashboard",
"settings": "Settings",
"add_new": "Add new",
"edit": "Edit",
"change_password": "Change password",
"log": "Audit log",
"roles": "Vai trò & quyền hạn",
"box": "Box",
"account": "Account",
"profile": "Profile"
},
"loginPage": {
"form": {
"email": "Email",
"password": "Password"
},
"ui": {
"welcome_back": "Welcome back",
"forgot_password": "Forgot your password?",
"not_have_account": "Don&apos;t have an account?"
},
"messages": {
"logout_success": "logout successfully!",
"login_success": "Sign in successfully!",
"is_required": "{{field}} is required.",
"email_invalid": "Email invalid!"
}
},
"signUpPage": {
"form": {},
"ui": {
"title": "Sign up",
"create_account": "Create account"
},
"messages": {}
},
"changePassword": {
"form": {
"current_password": "Current password",
"new_password": "New password",
"confirm_password": "Confirm password"
},
"ui": {
"title": "Change password"
},
"messages": {
"is_required": "{{field}} is required.",
"password_not_match": "Password not match",
"change_password_success": "Password changed successfully!"
}
},
"profile": {
"form": {
"name": "Name",
"email": "Email",
"role": "Role"
},
"ui": {
"title": "Profile"
},
"messages": {
"is_required": "{{field}} is required.",
"update_success": "Updated successfully!"
}
},
"settings": {
"form": {
"name": "Website name",
"description": "Description",
"keywords": "keywords",
"language": "Language"
},
"ui": {
"title": "Settings"
},
"messages": {
"is_required": "{{field}} is required.",
"update_success": "Updated successfully!",
"update_fail": "Update fail!"
}
},
"kanri": {
"settings": "Cài đặt",
"settings_desc": "Cài đặt hệ thống.",
"users": "Người dùng",
"users_desc": "Quản lý người dùng!",
"change_password": "Đổi mật khẩu",
"change_password_desc": "Thay đổi mật khẩu của bạn.",
"log": "Lịch sử",
"log_desc": "Ghi lại lịch sử hoạt động của người dùng.",
"access": "Truy cập",
"admin_panel": "Quản lý dữ liệu",
"roles": "Vai trò & quyền hạn",
"roles_desc": "Quản lý vai trò và quyền hạn",
"box": "Hộp chứa",
"box_desc": "Quản lý hộp chứa"
},
"users": {
"users": "Người dùng",
"add_new": "Thêm người dùng",
"edit_user": "Chỉnh sửa người dùng",
"change_password_user": "Đổi mật khẩu",
"search_user": "Tìm kiếm người dùng",
"form_role": "Vai trò",
"form_current_pass": "Mật khẩu hiện tại",
"form_password": "Mật khẩu",
"form_password_confirm": "Nhập lại mật khẩu",
"is_required": "{field} là bắt buộc.",
"email_invalid": "Email không đúng định dạng!",
"option_user": "Người dùng",
"option_admin": "Quản Lý",
"btn_add": "Thêm",
"btn_update": "Cập nhật",
"saving": "Đang lưu....",
"cancel": "Hủy",
"table_username": "Tên",
"table_email": "Email",
"table_banned": "Đã khóa?",
"table_created_at": "Ngày tạo",
"table_actions": "Tương tác",
"tip_edit": "Chỉnh sửa",
"tip_change_pass": "Đổi mật khẩu",
"tip_ban": "Khóa người dùng",
"tip_unban": "Mở khóa Người dùng",
"banned": "Khóa",
"unbanned": "Mở Khóa",
"success_unbanned": "Mở khóa người dùng thành công!",
"success_banned": "Khóa người dùng thành công!",
"unban_failed": "Mở khóa người dùng không thành công",
"ban_failed": "Khóa người dùng không thành công",
"warning_message": "Bạn có muốn <important>{type}</important> người dùng tên <important>\"{name}\"</important> không?",
"added": "Đã thêm",
"added_success": "Thêm thành công!",
"add_fail": "Thêm thất bại!",
"password_not_match": "Mật khẩu không khớp",
"updated": "Đã cập nhật",
"update_success": "Cập nhật thành công!",
"update_fail": "Cập nhật thất bại!"
},
"audit": {
"title": "Lịch sử hoạt động",
"view_detail_title": "Xem chi tiết lịch sử",
"search_log": "Tìm kiếm lịch sử",
"table_user": "Người tác động",
"table_table": "Bảng",
"table_action": "Hành động",
"table_old_value": "Giá trị cũ",
"table_new_value": "Giá trị mới",
"table_created_at": "Ngày tạo",
"table_actions": "Tương tác",
"tip_view": "Xem",
"enum_action": "{action, select, create {Thêm mới} update {Cập nhật} delete {Xóa} login {Đăng nhập} logout {Đăng xuất} ban {Khóa} unban {Mở khóa} other {chưa rõ}}"
},
"roles": {
"title": "Vai trò & quyền hạn",
"title_add_type": "Thêm {type}",
"title_edit_type": "Chỉnh sửa {type}",
"title_view_detail_type": "Xem chi tiết {type}",
"tab_roles": "Vai trò",
"tab_permissions": "Quyền hạn",
"role": "vai trò",
"permission": "quyền hạn",
"add_new_type": "Thêm mới {type}",
"search_keyword": "Tìm kiếm {keyword}...",
"table_name": "Tên",
"table_desc": "Mô Tả",
"table_created_at": "Ngày tạo",
"table_actions": "Tương tác",
"tip_view": "Xem",
"tip_edit": "Sửa",
"tip_delete": "Xóa",
"label_page": "Trang",
"label_action": "Hành động",
"is_required": "{field} là bắt buộc.",
"form_name": "Tên",
"form_color": "Màu sắc",
"form_description": "Mô Tả",
"form_permissions": "Quyền hạn",
"form_select_all": "Chọn tất cả",
"btn_add": "Thêm",
"btn_update": "Cập nhật",
"saving": "Đang lưu....",
"cancel": "Hủy",
"place_name": "Nhâp tên {type}...",
"place_desc": "Nhập mô tả {type}...",
"delete_confirm_title": "Cảnh báo khi xóa vai trò",
"invalid_color_code": "Mã màu không hợp lệ!",
"warning_message": "Bạn có muốn <important>Xóa</important> {type} tên là <important>\"{name}\"</important> không?",
"added": "Đã thêm",
"added_success": "Thêm thành công!",
"add_fail": "Thêm thất bại!",
"updated": "Đã cập nhật",
"update_success": "Cập nhật thành công!",
"update_fail": "Cập nhật thất bại!",
"no_unique_type": "{type} phải là duy nhất.",
"deleted": "Xóa",
"success_deleted": "Xóa thành công!",
"deleted_failed": "Xóa thất bại!"
},
"box": {
"title": "Hộp chứa",
"title_add": "Thêm hộp chứa",
"title_edit": "Chỉnh sửa hộp chứa",
"title_view_detail": "Xem chi tiết hộp chứa",
"tab_info": "Thông tin",
"tab_permissions": "Quyền hạn",
"add_new": "Thêm mới hộp chứa",
"search_keyword": "Tìm kiếm hộp chứa...",
"table_name": "Tên",
"table_desc": "Mô Tả",
"table_count": "Đồ trong hộp",
"table_created_at": "Ngày tạo",
"table_actions": "Tương tác",
"tip_view": "Xem",
"tip_edit": "Sửa",
"tip_delete": "Xóa",
"label_page": "Trang",
"label_action": "Hành động",
"label_detail_list": "Danh sách đồ trong hộp",
"label_detail_qrcode": "QR Code",
"label_detail_print": "In ra",
"is_required": "{field} là bắt buộc.",
"form_name": "Tên",
"form_color": "Màu sắc",
"form_description": "Mô Tả",
"form_permissions": "Quyền hạn",
"form_select_all": "Chọn tất cả",
"btn_add": "Thêm",
"btn_update": "Cập nhật",
"saving": "Đang lưu....",
"cancel": "Hủy",
"place_name": "Nhâp tên hộp chứa...",
"place_desc": "Nhập mô tả hộp chứa...",
"delete_confirm_title": "Cảnh báo khi xóa hộp chứa",
"invalid_color_code": "Mã màu không hợp lệ!",
"page_show": "{count, selectordinal, =1 {Hiện chỉ có # vai trò} other {Hiển thị {start} tới {end} của # hộp}}"
},
"backend": {
"INVALID_EMAIL_OR_PASSWORD": "Email or password incorrect!",
"INVALID_PASSWORD": "Password incorrect!"
}
}

273
src/locales/vi.json
View File

@@ -1,273 +0,0 @@
{
"common": {
"page_show": "{count, selectordinal, =1 {Hiện chỉ có # dữ liệu} other {Hiển thị {start} tới {end} của # dữ liệu}}",
"no_list": "Hiện tại chưa có dữ liệu nào!"
},
"roleTags": {
"admin": "Quản lý",
"user": "Người dùng",
"member": "Thành viên",
"owner": "Người sở hữu"
},
"ui": {
"login_btn": "Đăng nhập",
"logout_btn": "Đăng xuất",
"cancel_btn": "Hủy",
"close_btn": "Đóng",
"confirm_btn": "Xác nhận",
"signup_btn": "Đăng ký",
"view_btn": "Xem",
"save_btn": "Lưu",
"update_btn": "Cập nhật",
"view_all_notifications": "Xem tất cả thông báo",
"label_notifications": "Thông báo",
"change_password_btn": "Đổi mật khẩu"
},
"nav": {
"home": "Trang chủ",
"dashboard": "Bảng điều khiển",
"settings": "Cài đặt",
"add_new": "Thêm mới",
"edit": "Chỉnh sửa",
"change_password": "Đổi mật khẩu",
"log": "Lịch sử",
"roles": "Vai trò & quyền hạn",
"box": "Hộp chứa",
"account": "Tài khoản",
"profile": "Hồ sơ"
},
"loginPage": {
"form": {
"email": "Email",
"password": "Mật khẩu"
},
"ui": {
"welcome_back": "Chào mừng trở lại",
"forgot_password": "Quên mật khẩu?",
"not_have_account": "Chưa có tài khoản!?"
},
"messages": {
"logout_success": "Đăng xuất thành công!",
"login_success": "Đăng nhập thành công!",
"is_required": "{{field}} là bắt buộc.",
"email_invalid": "Email không đúng định dạng!"
}
},
"signUpPage": {
"form": {},
"ui": {
"title": "Đăng ký",
"create_account": "Tạo tài khoản"
},
"messages": {}
},
"changePassword": {
"form": {
"current_password": "Mật khẩu hiện tại",
"new_password": "Mật khẩu mới",
"confirm_password": "Nhập lại mật khẩu mới"
},
"ui": {
"title": "Đổi mật khẩu"
},
"messages": {
"is_required": "{{field}} là bắt buộc.",
"password_not_match": "Mật khẩu không khớp",
"change_password_success": "Đổi mật khẩu thành công!"
}
},
"profile": {
"form": {
"name": "Tên",
"email": "Email",
"role": "Vai trò"
},
"ui": {
"title": "Hồ sơ"
},
"messages": {
"is_required": "{{field}} là bắt buộc.",
"update_success": "Cập nhật thành công!"
}
},
"settings": {
"form": {
"name": "Tên website",
"description": "Mô tả website",
"keywords": "Từ khóa",
"language": "Ngôn ngữ"
},
"ui": {
"title": "Cài đặt"
},
"messages": {
"is_required": "{{field}} là bắt buộc.",
"update_success": "Cập nhật thành công!",
"update_fail": "Cập nhật thất bại!"
}
},
"kanri": {
"settings": "Cài đặt",
"settings_desc": "Cài đặt hệ thống.",
"users": "Người dùng",
"users_desc": "Quản lý người dùng!",
"change_password": "Đổi mật khẩu",
"change_password_desc": "Thay đổi mật khẩu của bạn.",
"log": "Lịch sử",
"log_desc": "Ghi lại lịch sử hoạt động của người dùng.",
"access": "Truy cập",
"admin_panel": "Quản lý dữ liệu",
"roles": "Vai trò & quyền hạn",
"roles_desc": "Quản lý vai trò và quyền hạn",
"box": "Hộp chứa",
"box_desc": "Quản lý hộp chứa"
},
"users": {
"users": "Người dùng",
"add_new": "Thêm người dùng",
"edit_user": "Chỉnh sửa người dùng",
"change_password_user": "Đổi mật khẩu",
"search_user": "Tìm kiếm người dùng",
"form_role": "Vai trò",
"form_current_pass": "Mật khẩu hiện tại",
"form_password": "Mật khẩu",
"form_password_confirm": "Nhập lại mật khẩu",
"is_required": "{field} là bắt buộc.",
"email_invalid": "Email không đúng định dạng!",
"option_user": "Người dùng",
"option_admin": "Quản Lý",
"btn_add": "Thêm",
"btn_update": "Cập nhật",
"saving": "Đang lưu....",
"cancel": "Hủy",
"table_username": "Tên",
"table_email": "Email",
"table_banned": "Đã khóa?",
"table_created_at": "Ngày tạo",
"table_actions": "Tương tác",
"tip_edit": "Chỉnh sửa",
"tip_change_pass": "Đổi mật khẩu",
"tip_ban": "Khóa người dùng",
"tip_unban": "Mở khóa Người dùng",
"banned": "Khóa",
"unbanned": "Mở Khóa",
"success_unbanned": "Mở khóa người dùng thành công!",
"success_banned": "Khóa người dùng thành công!",
"unban_failed": "Mở khóa người dùng không thành công",
"ban_failed": "Khóa người dùng không thành công",
"warning_message": "Bạn có muốn <important>{type}</important> người dùng tên <important>\"{name}\"</important> không?",
"added": "Đã thêm",
"added_success": "Thêm thành công!",
"add_fail": "Thêm thất bại!",
"password_not_match": "Mật khẩu không khớp",
"updated": "Đã cập nhật",
"update_success": "Cập nhật thành công!",
"update_fail": "Cập nhật thất bại!"
},
"audit": {
"title": "Lịch sử hoạt động",
"view_detail_title": "Xem chi tiết lịch sử",
"search_log": "Tìm kiếm lịch sử",
"table_user": "Người tác động",
"table_table": "Bảng",
"table_action": "Hành động",
"table_old_value": "Giá trị cũ",
"table_new_value": "Giá trị mới",
"table_created_at": "Ngày tạo",
"table_actions": "Tương tác",
"tip_view": "Xem",
"enum_action": "{action, select, create {Thêm mới} update {Cập nhật} delete {Xóa} login {Đăng nhập} logout {Đăng xuất} ban {Khóa} unban {Mở khóa} other {chưa rõ}}"
},
"roles": {
"title": "Vai trò & quyền hạn",
"title_add_type": "Thêm {type}",
"title_edit_type": "Chỉnh sửa {type}",
"title_view_detail_type": "Xem chi tiết {type}",
"tab_roles": "Vai trò",
"tab_permissions": "Quyền hạn",
"role": "vai trò",
"permission": "quyền hạn",
"add_new_type": "Thêm mới {type}",
"search_keyword": "Tìm kiếm {keyword}...",
"table_name": "Tên",
"table_desc": "Mô Tả",
"table_created_at": "Ngày tạo",
"table_actions": "Tương tác",
"tip_view": "Xem",
"tip_edit": "Sửa",
"tip_delete": "Xóa",
"label_page": "Trang",
"label_action": "Hành động",
"is_required": "{field} là bắt buộc.",
"form_name": "Tên",
"form_color": "Màu sắc",
"form_description": "Mô Tả",
"form_permissions": "Quyền hạn",
"form_select_all": "Chọn tất cả",
"btn_add": "Thêm",
"btn_update": "Cập nhật",
"saving": "Đang lưu....",
"cancel": "Hủy",
"place_name": "Nhâp tên {type}...",
"place_desc": "Nhập mô tả {type}...",
"delete_confirm_title": "Cảnh báo khi xóa vai trò",
"invalid_color_code": "Mã màu không hợp lệ!",
"warning_message": "Bạn có muốn <important>Xóa</important> {type} tên là <important>\"{name}\"</important> không?",
"added": "Đã thêm",
"added_success": "Thêm thành công!",
"add_fail": "Thêm thất bại!",
"updated": "Đã cập nhật",
"update_success": "Cập nhật thành công!",
"update_fail": "Cập nhật thất bại!",
"no_unique_type": "{type} phải là duy nhất.",
"deleted": "Xóa",
"success_deleted": "Xóa thành công!",
"deleted_failed": "Xóa thất bại!"
},
"box": {
"title": "Hộp chứa",
"title_add": "Thêm hộp chứa",
"title_edit": "Chỉnh sửa hộp chứa",
"title_view_detail": "Xem chi tiết hộp chứa",
"tab_info": "Thông tin",
"tab_permissions": "Quyền hạn",
"add_new": "Thêm mới hộp chứa",
"search_keyword": "Tìm kiếm hộp chứa...",
"table_name": "Tên",
"table_desc": "Mô Tả",
"table_count": "Đồ trong hộp",
"table_created_at": "Ngày tạo",
"table_actions": "Tương tác",
"tip_view": "Xem",
"tip_edit": "Sửa",
"tip_delete": "Xóa",
"label_page": "Trang",
"label_action": "Hành động",
"label_detail_list": "Danh sách đồ trong hộp",
"label_detail_qrcode": "QR Code",
"label_detail_print": "In ra",
"is_required": "{field} là bắt buộc.",
"form_name": "Tên",
"form_color": "Màu sắc",
"form_description": "Mô Tả",
"form_permissions": "Quyền hạn",
"form_select_all": "Chọn tất cả",
"btn_add": "Thêm",
"btn_update": "Cập nhật",
"saving": "Đang lưu....",
"cancel": "Hủy",
"place_name": "Nhâp tên hộp chứa...",
"place_desc": "Nhập mô tả hộp chứa...",
"delete_confirm_title": "Cảnh báo khi xóa hộp chứa",
"invalid_color_code": "Mã màu không hợp lệ!",
"page_show": "{count, selectordinal, =1 {Hiện chỉ có # vai trò} other {Hiển thị {start} tới {end} của # hộp}}"
},
"backend": {
"INVALID_EMAIL_OR_PASSWORD": "Email hoặc mật khẩu không đúng!",
"INVALID_PASSWORD": "Mật khẩu hiện tại không đúng!"
}
}

147
src/routeTree.gen.ts
View File

@@ -16,9 +16,12 @@ import { Route as authSignInRouteImport } from './routes/(auth)/sign-in'
import { Route as appauthRouteRouteImport } from './routes/(app)/(auth)/route'
import { Route as ApiAuthSplatRouteImport } from './routes/api/auth.$'
import { Route as appauthSettingsRouteImport } from './routes/(app)/(auth)/settings'
import { Route as appauthProfileRouteImport } from './routes/(app)/(auth)/profile'
import { Route as appauthDashboardRouteImport } from './routes/(app)/(auth)/dashboard'
import { Route as appauthChangePasswordRouteImport } from './routes/(app)/(auth)/change-password'
import { Route as appauthAccountRouteRouteImport } from './routes/(app)/(auth)/account/route'
import { Route as appauthAccountIndexRouteImport } from './routes/(app)/(auth)/account/index'
import { Route as appauthAccountSettingsRouteImport } from './routes/(app)/(auth)/account/settings'
import { Route as appauthAccountProfileRouteImport } from './routes/(app)/(auth)/account/profile'
import { Route as appauthAccountChangePasswordRouteImport } from './routes/(app)/(auth)/account/change-password'
const appRouteRoute = appRouteRouteImport.update({
id: '/(app)',
@@ -53,41 +56,62 @@ const appauthSettingsRoute = appauthSettingsRouteImport.update({
path: '/settings',
getParentRoute: () => appauthRouteRoute,
} as any)
const appauthProfileRoute = appauthProfileRouteImport.update({
id: '/profile',
path: '/profile',
getParentRoute: () => appauthRouteRoute,
} as any)
const appauthDashboardRoute = appauthDashboardRouteImport.update({
id: '/dashboard',
path: '/dashboard',
getParentRoute: () => appauthRouteRoute,
} as any)
const appauthChangePasswordRoute = appauthChangePasswordRouteImport.update({
id: '/change-password',
path: '/change-password',
const appauthAccountRouteRoute = appauthAccountRouteRouteImport.update({
id: '/account',
path: '/account',
getParentRoute: () => appauthRouteRoute,
} as any)
const appauthAccountIndexRoute = appauthAccountIndexRouteImport.update({
id: '/',
path: '/',
getParentRoute: () => appauthAccountRouteRoute,
} as any)
const appauthAccountSettingsRoute = appauthAccountSettingsRouteImport.update({
id: '/settings',
path: '/settings',
getParentRoute: () => appauthAccountRouteRoute,
} as any)
const appauthAccountProfileRoute = appauthAccountProfileRouteImport.update({
id: '/profile',
path: '/profile',
getParentRoute: () => appauthAccountRouteRoute,
} as any)
const appauthAccountChangePasswordRoute =
appauthAccountChangePasswordRouteImport.update({
id: '/change-password',
path: '/change-password',
getParentRoute: () => appauthAccountRouteRoute,
} as any)
export interface FileRoutesByFullPath {
'/sign-in': typeof authSignInRoute
'/sign-up': typeof authSignUpRoute
'/': typeof appIndexRoute
'/change-password': typeof appauthChangePasswordRoute
'/account': typeof appauthAccountRouteRouteWithChildren
'/dashboard': typeof appauthDashboardRoute
'/profile': typeof appauthProfileRoute
'/settings': typeof appauthSettingsRoute
'/api/auth/$': typeof ApiAuthSplatRoute
'/account/change-password': typeof appauthAccountChangePasswordRoute
'/account/profile': typeof appauthAccountProfileRoute
'/account/settings': typeof appauthAccountSettingsRoute
'/account/': typeof appauthAccountIndexRoute
}
export interface FileRoutesByTo {
'/sign-in': typeof authSignInRoute
'/sign-up': typeof authSignUpRoute
'/': typeof appIndexRoute
'/change-password': typeof appauthChangePasswordRoute
'/dashboard': typeof appauthDashboardRoute
'/profile': typeof appauthProfileRoute
'/settings': typeof appauthSettingsRoute
'/api/auth/$': typeof ApiAuthSplatRoute
'/account/change-password': typeof appauthAccountChangePasswordRoute
'/account/profile': typeof appauthAccountProfileRoute
'/account/settings': typeof appauthAccountSettingsRoute
'/account': typeof appauthAccountIndexRoute
}
export interface FileRoutesById {
__root__: typeof rootRouteImport
@@ -96,11 +120,14 @@ export interface FileRoutesById {
'/(auth)/sign-in': typeof authSignInRoute
'/(auth)/sign-up': typeof authSignUpRoute
'/(app)/': typeof appIndexRoute
'/(app)/(auth)/change-password': typeof appauthChangePasswordRoute
'/(app)/(auth)/account': typeof appauthAccountRouteRouteWithChildren
'/(app)/(auth)/dashboard': typeof appauthDashboardRoute
'/(app)/(auth)/profile': typeof appauthProfileRoute
'/(app)/(auth)/settings': typeof appauthSettingsRoute
'/api/auth/$': typeof ApiAuthSplatRoute
'/(app)/(auth)/account/change-password': typeof appauthAccountChangePasswordRoute
'/(app)/(auth)/account/profile': typeof appauthAccountProfileRoute
'/(app)/(auth)/account/settings': typeof appauthAccountSettingsRoute
'/(app)/(auth)/account/': typeof appauthAccountIndexRoute
}
export interface FileRouteTypes {
fileRoutesByFullPath: FileRoutesByFullPath
@@ -108,21 +135,26 @@ export interface FileRouteTypes {
| '/sign-in'
| '/sign-up'
| '/'
| '/change-password'
| '/account'
| '/dashboard'
| '/profile'
| '/settings'
| '/api/auth/$'
| '/account/change-password'
| '/account/profile'
| '/account/settings'
| '/account/'
fileRoutesByTo: FileRoutesByTo
to:
| '/sign-in'
| '/sign-up'
| '/'
| '/change-password'
| '/dashboard'
| '/profile'
| '/settings'
| '/api/auth/$'
| '/account/change-password'
| '/account/profile'
| '/account/settings'
| '/account'
id:
| '__root__'
| '/(app)'
@@ -130,11 +162,14 @@ export interface FileRouteTypes {
| '/(auth)/sign-in'
| '/(auth)/sign-up'
| '/(app)/'
| '/(app)/(auth)/change-password'
| '/(app)/(auth)/account'
| '/(app)/(auth)/dashboard'
| '/(app)/(auth)/profile'
| '/(app)/(auth)/settings'
| '/api/auth/$'
| '/(app)/(auth)/account/change-password'
| '/(app)/(auth)/account/profile'
| '/(app)/(auth)/account/settings'
| '/(app)/(auth)/account/'
fileRoutesById: FileRoutesById
}
export interface RootRouteChildren {
@@ -195,13 +230,6 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof appauthSettingsRouteImport
parentRoute: typeof appauthRouteRoute
}
'/(app)/(auth)/profile': {
id: '/(app)/(auth)/profile'
path: '/profile'
fullPath: '/profile'
preLoaderRoute: typeof appauthProfileRouteImport
parentRoute: typeof appauthRouteRoute
}
'/(app)/(auth)/dashboard': {
id: '/(app)/(auth)/dashboard'
path: '/dashboard'
@@ -209,27 +237,70 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof appauthDashboardRouteImport
parentRoute: typeof appauthRouteRoute
}
'/(app)/(auth)/change-password': {
id: '/(app)/(auth)/change-password'
path: '/change-password'
fullPath: '/change-password'
preLoaderRoute: typeof appauthChangePasswordRouteImport
'/(app)/(auth)/account': {
id: '/(app)/(auth)/account'
path: '/account'
fullPath: '/account'
preLoaderRoute: typeof appauthAccountRouteRouteImport
parentRoute: typeof appauthRouteRoute
}
'/(app)/(auth)/account/': {
id: '/(app)/(auth)/account/'
path: '/'
fullPath: '/account/'
preLoaderRoute: typeof appauthAccountIndexRouteImport
parentRoute: typeof appauthAccountRouteRoute
}
'/(app)/(auth)/account/settings': {
id: '/(app)/(auth)/account/settings'
path: '/settings'
fullPath: '/account/settings'
preLoaderRoute: typeof appauthAccountSettingsRouteImport
parentRoute: typeof appauthAccountRouteRoute
}
'/(app)/(auth)/account/profile': {
id: '/(app)/(auth)/account/profile'
path: '/profile'
fullPath: '/account/profile'
preLoaderRoute: typeof appauthAccountProfileRouteImport
parentRoute: typeof appauthAccountRouteRoute
}
'/(app)/(auth)/account/change-password': {
id: '/(app)/(auth)/account/change-password'
path: '/change-password'
fullPath: '/account/change-password'
preLoaderRoute: typeof appauthAccountChangePasswordRouteImport
parentRoute: typeof appauthAccountRouteRoute
}
}
}
interface appauthAccountRouteRouteChildren {
appauthAccountChangePasswordRoute: typeof appauthAccountChangePasswordRoute
appauthAccountProfileRoute: typeof appauthAccountProfileRoute
appauthAccountSettingsRoute: typeof appauthAccountSettingsRoute
appauthAccountIndexRoute: typeof appauthAccountIndexRoute
}
const appauthAccountRouteRouteChildren: appauthAccountRouteRouteChildren = {
appauthAccountChangePasswordRoute: appauthAccountChangePasswordRoute,
appauthAccountProfileRoute: appauthAccountProfileRoute,
appauthAccountSettingsRoute: appauthAccountSettingsRoute,
appauthAccountIndexRoute: appauthAccountIndexRoute,
}
const appauthAccountRouteRouteWithChildren =
appauthAccountRouteRoute._addFileChildren(appauthAccountRouteRouteChildren)
interface appauthRouteRouteChildren {
appauthChangePasswordRoute: typeof appauthChangePasswordRoute
appauthAccountRouteRoute: typeof appauthAccountRouteRouteWithChildren
appauthDashboardRoute: typeof appauthDashboardRoute
appauthProfileRoute: typeof appauthProfileRoute
appauthSettingsRoute: typeof appauthSettingsRoute
}
const appauthRouteRouteChildren: appauthRouteRouteChildren = {
appauthChangePasswordRoute: appauthChangePasswordRoute,
appauthAccountRouteRoute: appauthAccountRouteRouteWithChildren,
appauthDashboardRoute: appauthDashboardRoute,
appauthProfileRoute: appauthProfileRoute,
appauthSettingsRoute: appauthSettingsRoute,
}

8
src/routes/(app)/(auth)/change-password.tsx → src/routes/(app)/(auth)/account/change-password.tsx
View File

@@ -1,16 +1,16 @@
import ChangePasswordForm from '@/components/form/change-password-form';
import i18n from '@/lib/i18n';
import { m } from '@/paraglide/messages';
import { createFileRoute } from '@tanstack/react-router';
export const Route = createFileRoute('/(app)/(auth)/change-password')({
export const Route = createFileRoute('/(app)/(auth)/account/change-password')({
component: RouteComponent,
staticData: { breadcrumb: i18n.t('nav.change_password') },
staticData: { breadcrumb: () => m.nav_change_password() },
});
function RouteComponent() {
return (
<div className="@container/main flex flex-1 flex-col gap-2 p-4">
<div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card *:data-[slot=card]:bg-gradient-to-br *:data-[slot=card]:shadow-xs grid grid-cols-1 @xl/main:grid-cols-2 @5xl/main:grid-cols-3 gap-4">
<div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card *:data-[slot=card]:bg-linear-to-br *:data-[slot=card]:shadow-xs grid grid-cols-1 @xl/main:grid-cols-2 @5xl/main:grid-cols-3 gap-4">
<ChangePasswordForm />
</div>
</div>

9
src/routes/(app)/(auth)/account/index.tsx Normal file
View File

@@ -0,0 +1,9 @@
import { createFileRoute } from '@tanstack/react-router';
export const Route = createFileRoute('/(app)/(auth)/account/')({
component: RouteComponent,
});
function RouteComponent() {
return <div>Hello "/(app)/(auth)/account/"!</div>;
}

8
src/routes/(app)/(auth)/profile.tsx → src/routes/(app)/(auth)/account/profile.tsx
View File

@@ -1,16 +1,16 @@
import ProfileForm from '@/components/form/profile-form';
import i18n from '@/lib/i18n';
import { m } from '@/paraglide/messages';
import { createFileRoute } from '@tanstack/react-router';
export const Route = createFileRoute('/(app)/(auth)/profile')({
export const Route = createFileRoute('/(app)/(auth)/account/profile')({
component: RouteComponent,
staticData: { breadcrumb: i18n.t('nav.profile') },
staticData: { breadcrumb: () => m.nav_profile() },
});
function RouteComponent() {
return (
<div className="@container/main flex flex-1 flex-col gap-2 p-4">
<div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card *:data-[slot=card]:bg-gradient-to-br *:data-[slot=card]:shadow-xs grid grid-cols-1 @xl/main:grid-cols-2 @5xl/main:grid-cols-3 gap-4">
<div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card *:data-[slot=card]:bg-linear-to-br *:data-[slot=card]:shadow-xs grid grid-cols-1 @xl/main:grid-cols-2 @5xl/main:grid-cols-3 gap-4">
<ProfileForm />
</div>
</div>

6
src/routes/(app)/(auth)/account/route.tsx Normal file
View File

@@ -0,0 +1,6 @@
import { m } from '@/paraglide/messages';
import { createFileRoute } from '@tanstack/react-router';
export const Route = createFileRoute('/(app)/(auth)/account')({
staticData: { breadcrumb: () => m.nav_account() },
});

17
src/routes/(app)/(auth)/account/settings.tsx Normal file
View File

@@ -0,0 +1,17 @@
import { m } from '@/paraglide/messages';
import { createFileRoute } from '@tanstack/react-router';
export const Route = createFileRoute('/(app)/(auth)/account/settings')({
component: RouteComponent,
staticData: { breadcrumb: () => m.nav_settings() },
});
function RouteComponent() {
return (
<div className="@container/main flex flex-1 flex-col gap-2 p-4">
<div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card *:data-[slot=card]:bg-linear-to-br *:data-[slot=card]:shadow-xs grid grid-cols-1 @xl/main:grid-cols-2 @5xl/main:grid-cols-3 gap-4">
abc
</div>
</div>
);
}

4
src/routes/(app)/(auth)/dashboard.tsx
View File

@@ -1,9 +1,11 @@
import { m } from '@/paraglide/messages';
import { createFileRoute } from '@tanstack/react-router';
export const Route = createFileRoute('/(app)/(auth)/dashboard')({
component: RouteComponent,
staticData: { breadcrumb: () => m.nav_dashboard() },
});
function RouteComponent() {
return <div>Hello "/(app)/dashboard"!</div>;
return <div>Hello "dashboard"!</div>;
}

6
src/routes/(app)/(auth)/settings.tsx
View File

@@ -1,16 +1,16 @@
import SettingsForm from '@/components/form/settings-form';
import i18n from '@/lib/i18n';
import { m } from '@/paraglide/messages';
import { createFileRoute } from '@tanstack/react-router';
export const Route = createFileRoute('/(app)/(auth)/settings')({
component: RouteComponent,
staticData: { breadcrumb: i18n.t('nav.settings') },
staticData: { breadcrumb: () => m.nav_settings() },
});
function RouteComponent() {
return (
<div className="@container/main flex flex-1 flex-col gap-2 p-4">
<div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card *:data-[slot=card]:bg-gradient-to-br *:data-[slot=card]:shadow-xs grid grid-cols-1 @xl/main:grid-cols-2 @5xl/main:grid-cols-3 gap-4">
<div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card *:data-[slot=card]:bg-linear-to-br *:data-[slot=card]:shadow-xs grid grid-cols-1 @xl/main:grid-cols-2 @5xl/main:grid-cols-3 gap-4">
<SettingsForm />
</div>
</div>

10
src/routes/(app)/index.tsx
View File

@@ -1,11 +1,11 @@
import i18n from '@/lib/i18n'
import { createFileRoute } from '@tanstack/react-router'
import { m } from '@/paraglide/messages';
import { createFileRoute } from '@tanstack/react-router';
export const Route = createFileRoute('/(app)/')({
component: App,
staticData: { breadcrumb: i18n.t('nav.home') },
})
staticData: { breadcrumb: () => m.nav_home() },
});
function App() {
return <div className="min-h-screen bg-linear-to-b ">Home</div>
return <div className="min-h-screen bg-linear-to-b ">Home</div>;
}

17
src/routes/(app)/route.tsx
View File

@@ -1,3 +1,4 @@
import { AuthProvider } from '@/components/auth/auth-provider';
import Header from '@/components/Header';
import AppSidebar from '@/components/sidebar/app-sidebar';
import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
@@ -9,12 +10,14 @@ export const Route = createFileRoute('/(app)')({
function RouteComponent() {
return (
<SidebarProvider defaultOpen={false}>
<AppSidebar />
<SidebarInset>
<Header />
<Outlet />
</SidebarInset>
</SidebarProvider>
<AuthProvider>
<SidebarProvider defaultOpen={false}>
<AppSidebar />
<SidebarInset>
<Header />
<Outlet />
</SidebarInset>
</SidebarProvider>
</AuthProvider>
);
}

20
src/routes/__root.tsx
View File

@@ -1,6 +1,6 @@
import NotFound from '@/components/NotFound';
import { Toaster } from '@/components/ui/sonner';
import { setSSRLanguage } from '@/lib/i18n';
import { getLocale } from '@/paraglide/runtime';
import { sessionQueries } from '@/service/queries';
import {
CheckIcon,
@@ -11,13 +11,12 @@ import {
import { TanStackDevtools } from '@tanstack/react-devtools';
import type { QueryClient } from '@tanstack/react-query';
import {
createRootRouteWithContext,
HeadContent,
Scripts,
createRootRouteWithContext,
} from '@tanstack/react-router';
import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools';
import React from 'react';
import { useTranslation } from 'react-i18next';
import TanStackQueryDevtools from '../integrations/tanstack-query/devtools';
import appCss from '../styles.css?url';
@@ -30,7 +29,6 @@ export const Route = createRootRouteWithContext<MyRouterContext>()({
const userSession = await context.queryClient.fetchQuery(
sessionQueries.user(),
);
await setSSRLanguage();
return { userSession };
},
head: () => ({
@@ -61,29 +59,19 @@ export const Route = createRootRouteWithContext<MyRouterContext>()({
});
function RootDocument({ children }: { children: React.ReactNode }) {
const { i18n } = useTranslation();
return (
<html lang={i18n.language}>
<html lang={getLocale()}>
<head>
<HeadContent />
</head>
<body>
{children}
<Toaster
richColors
// richColors
visibleToasts={5}
position={'top-right'}
offset={{ top: 60, right: 10 }}
closeButton={true}
toastOptions={{
classNames: {
success: '!bg-green-50',
error: '!bg-red-50',
info: '!bg-blue-50',
warning: '!bg-yellow-50',
},
}}
icons={{
success: <CheckIcon className="text-green-500" size={16} />,
error: <WarningOctagonIcon className="text-red-500" size={16} />,

8
src/server.ts Normal file
View File

@@ -0,0 +1,8 @@
import handler from '@tanstack/react-start/server-entry';
import { paraglideMiddleware } from './paraglide/server.js';
export default {
fetch(req: Request): Promise<Response> {
return paraglideMiddleware(req.clone(), () => handler.fetch(req));
},
};

6
src/service/profile.schema.ts
View File

@@ -1,10 +1,10 @@
import i18n from '@/lib/i18n';
import { m } from '@/paraglide/messages';
import z from 'zod';
export const profileUpdateSchema = z.object({
name: z.string().nonempty(
i18n.t('profile.messages.is_required', {
field: i18n.t('profile.form.name'),
m.common_is_required({
field: m.profile_form_name('profile.form.name'),
}),
),
image: z.instanceof(File).optional(),

18
src/service/setting.api.ts
View File

@@ -1,7 +1,7 @@
import { prisma } from '@/db';
import { Setting } from '@/generated/prisma/client';
import { authMiddleware } from '@/lib/middleware';
import { createServerFn } from '@tanstack/react-start';
import { createIsomorphicFn, createServerFn } from '@tanstack/react-start';
import { settingSchema } from './setting.schema';
// import { settingSchema } from './setting.schema';
@@ -9,10 +9,24 @@ export type SettingReturn = {
[key: string]: Setting;
};
export const getLanguage = createIsomorphicFn().server(async () => {
const language = await prisma.setting.findUnique({
where: {
key: 'site_language',
},
});
return language?.value;
});
export const getSettings = createServerFn({ method: 'GET' })
.middleware([authMiddleware])
.handler(async () => {
const settings = await prisma.setting.findMany();
const settings = await prisma.setting.findMany({
where: {
relation: 'admin',
},
});
const results: SettingReturn = {};

19
src/service/setting.schema.ts
View File

@@ -1,25 +1,20 @@
import i18n from '@/lib/i18n';
import { m } from '@/paraglide/messages';
import z from 'zod';
export const settingSchema = z.object({
site_name: z.string().nonempty(
i18n.t('settings.messages.is_required', {
field: i18n.t('settings.form.name'),
m.common_is_required({
field: m.settings_form_name(),
}),
),
site_description: z.string().nonempty(
i18n.t('settings.messages.is_required', {
field: i18n.t('settings.form.description'),
m.common_is_required({
field: m.settings_form_description(),
}),
),
site_keywords: z.string().nonempty(
i18n.t('settings.messages.is_required', {
field: i18n.t('settings.form.keywords'),
}),
),
site_language: z.string().nonempty(
i18n.t('settings.messages.is_required', {
field: i18n.t('settings.form.language'),
m.common_is_required({
field: m.settings_form_keywords(),
}),
),
});

12
src/type/i18next.d.ts vendored
View File

@@ -1,12 +0,0 @@
import 'i18next'
import translation from '../locales/vi.json'
import { defaultNS } from './i18n'
declare module 'i18next' {
interface CustomTypeOptions {
defaultNS: typeof defaultNS
resources: {
translation: typeof translation
}
}
}

14
tsconfig.json
View File

@@ -1,12 +1,19 @@
{
"include": ["**/*.ts", "**/*.tsx", "eslint.config.js", "prettier.config.js", "vite.config.js"],
"include": [
"**/*.ts",
"**/*.tsx",
"eslint.config.js",
"prettier.config.js",
"vite.config.js"
],
"compilerOptions": {
"target": "ES2022",
"jsx": "react-jsx",
"module": "ESNext",
"lib": ["ES2022", "DOM", "DOM.Iterable"],
"types": ["vite/client"],
"allowJs": true,
/* Bundler mode */
"moduleResolution": "bundler",
@@ -23,7 +30,8 @@
"noUncheckedSideEffectImports": true,
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
"@/*": ["./src/*"],
"@root/*": ["./*"]
}
}
}

8
vite.config.ts
View File

@@ -1,3 +1,4 @@
import { paraglideVitePlugin } from '@inlang/paraglide-js';
import tailwindcss from '@tailwindcss/vite';
import { devtools } from '@tanstack/devtools-vite';
import { tanstackStart } from '@tanstack/react-start/plugin/vite';
@@ -7,6 +8,13 @@ import viteTsConfigPaths from 'vite-tsconfig-paths';
const config = defineConfig({
plugins: [
paraglideVitePlugin({
project: './project.inlang',
outdir: './src/paraglide',
outputStructure: 'message-modules',
cookieName: 'PARAGLIDE_LOCALE',
strategy: ['cookie', 'baseLocale'],
}),
devtools(),
// this is the plugin that enables path aliases
viteTsConfigPaths({