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

Change i18n package to paraglideJs

Browse Source 
also refactor auth provider
This commit is contained in:
Sam Liu
2026-01-07 22:26:48 +07:00
parent 391acd282b
commit d49c37848f
47 changed files with 887 additions and 1060 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", "class-variance-authority": "^0.7.1",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"i18next": "^25.7.3", "i18next": "^25.7.3",
"i18next-browser-languagedetector": "^8.2.0",
"next-themes": "^0.4.6", "next-themes": "^0.4.6",
"prisma": "^7.1.0", "prisma": "^7.1.0",
"radix-ui": "^1.4.3", "radix-ui": "^1.4.3",
"react": "^19.2.0", "react": "^19.2.0",
"react-dom": "^19.2.0", "react-dom": "^19.2.0",
"react-i18next": "^16.5.0",
"shadcn": "^3.6.1", "shadcn": "^3.6.1",
"sonner": "^2.0.7", "sonner": "^2.0.7",
"tailwind-merge": "^3.0.2", "tailwind-merge": "^3.0.2",
@@ -53,6 +51,7 @@
"zod": "^4.1.11" "zod": "^4.1.11"
}, },
"devDependencies": { "devDependencies": {
"@inlang/paraglide-js": "2.7.1",
"@tanstack/devtools-vite": "^0.3.11", "@tanstack/devtools-vite": "^0.3.11",
"@tanstack/eslint-config": "^0.3.0", "@tanstack/eslint-config": "^0.3.0",
"@testing-library/dom": "^10.4.0", "@testing-library/dom": "^10.4.0",

199
pnpm-lock.yaml generated
View File

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

5
prisma/data.ts
View File

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

16
prisma/seed.ts
View File

@@ -11,6 +11,7 @@ const prisma = new PrismaClient({ adapter });
async function main() { async function main() {
console.log('🌱 Seeding database...'); console.log('🌱 Seeding database...');
let admin;
// check mail exists // check mail exists
const mailExists = await prisma.user.findFirst({ const mailExists = await prisma.user.findFirst({
@@ -20,7 +21,7 @@ async function main() {
}); });
if (!mailExists) { if (!mailExists) {
// add admin user // add admin user
await auth.api.createUser({ admin = await auth.api.createUser({
body: { body: {
email: 'luu.dat.tham@gmail.com', email: 'luu.dat.tham@gmail.com',
password: 'Th@m!S@m!040390', password: 'Th@m!S@m!040390',
@@ -33,10 +34,21 @@ async function main() {
console.log('---------------Created admin user-----------------'); console.log('---------------Created admin user-----------------');
await prisma.setting.deleteMany(); 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({ await prisma.setting.createMany({
data: settingsData, data: listSettings,
skipDuplicates: true, skipDuplicates: true,
}); });
console.log('---------------Created settings-----------------');
// // Clear existing todos // // Clear existing todos
// await prisma.todo.deleteMany() // 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 { Separator } from '@base-ui/react/separator';
import { BellIcon } from '@phosphor-icons/react'; import { BellIcon } from '@phosphor-icons/react';
import { useTranslation } from 'react-i18next'; import { useAuth } from './auth/auth-provider';
import RouterBreadcrumb from './sidebar/RouterBreadcrumb'; import RouterBreadcrumb from './sidebar/RouterBreadcrumb';
import { Badge } from './ui/badge'; import { Badge } from './ui/badge';
import { Button } from './ui/button'; import { Button } from './ui/button';
@@ -17,8 +17,7 @@ import {
import { SidebarTrigger } from './ui/sidebar'; import { SidebarTrigger } from './ui/sidebar';
export default function Header() { export default function Header() {
const { t } = useTranslation(); const { data: session } = useAuth();
const { data: session } = useSession();
return ( return (
<> <>
@@ -50,7 +49,7 @@ export default function Header() {
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent className="w-sm min-w-56 rounded-lg"> <DropdownMenuContent className="w-sm min-w-56 rounded-lg">
<DropdownMenuLabel className="font-bold text-black"> <DropdownMenuLabel className="font-bold text-black">
{t('ui.label_notifications')} {m.ui_label_notifications()}
</DropdownMenuLabel> </DropdownMenuLabel>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<DropdownMenuGroup> <DropdownMenuGroup>
@@ -66,7 +65,7 @@ export default function Header() {
<DropdownMenuGroup> <DropdownMenuGroup>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<DropdownMenuItem> <DropdownMenuItem>
{t('ui.view_all_notifications')} {m.ui_view_all_notifications()}
</DropdownMenuItem> </DropdownMenuItem>
</DropdownMenuGroup> </DropdownMenuGroup>
</DropdownMenuContent> </DropdownMenuContent>

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 { cn } from '@/lib/utils';
import { useAuth } from '../auth/auth-provider';
import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar'; import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar';
import RoleRing from './RoleRing'; import RoleRing from './RoleRing';
@@ -9,10 +9,12 @@ interface AvatarUserProps {
} }
const AvatarUser = ({ className, textSize = 'md' }: AvatarUserProps) => { const AvatarUser = ({ className, textSize = 'md' }: AvatarUserProps) => {
const { data: session } = useSession(); const { data: session } = useAuth();
const imagePath = session?.user?.image const imagePath = session?.user?.image
? `./data/avatar/${session?.user?.image}` ? new URL(`../../../data/avatar/${session?.user?.image}`, import.meta.url)
.href
: undefined; : undefined;
const shortName = session?.user?.name const shortName = session?.user?.name
?.split(' ') ?.split(' ')
.slice(0, 2) .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 { VariantProps } from 'class-variance-authority';
import { useTranslation } from 'react-i18next';
import { Badge, badgeVariants } from '../ui/badge'; import { Badge, badgeVariants } from '../ui/badge';
type BadgeVariant = VariantProps<typeof badgeVariants>['variant']; type BadgeVariant = VariantProps<typeof badgeVariants>['variant'];
@@ -10,8 +10,6 @@ type RoleProps = {
}; };
const RoleBadge = ({ type, className }: RoleProps) => { const RoleBadge = ({ type, className }: RoleProps) => {
const { t } = useTranslation();
// List all valid badge variant keys // List all valid badge variant keys
const validBadgeVariants: BadgeVariant[] = [ const validBadgeVariants: BadgeVariant[] = [
'default', 'default',
@@ -27,10 +25,10 @@ const RoleBadge = ({ type, className }: RoleProps) => {
]; ];
const LABEL_VALUE = { const LABEL_VALUE = {
admin: t('roleTags.admin'), admin: m.role_tags_admin(),
user: t('roleTags.user'), user: m.role_tags_user(),
member: t('roleTags.member'), member: m.role_tags_member(),
owner: t('roleTags.owner'), owner: m.role_tags_owner(),
}; };
// Determine the actual variant to apply. // 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 { authClient } from '@/lib/auth-client';
import i18n from '@/lib/i18n' import { m } from '@/paraglide/messages';
import { KeyIcon } from '@phosphor-icons/react' import { KeyIcon } from '@phosphor-icons/react';
import { useForm } from '@tanstack/react-form' import { useForm } from '@tanstack/react-form';
import { useTranslation } from 'react-i18next' import i18next from 'i18next';
import { toast } from 'sonner' import { toast } from 'sonner';
import z from 'zod' import z from 'zod';
import { Button } from '../ui/button' import { Button } from '../ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '../ui/card' import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
import { Field, FieldError, FieldGroup, FieldLabel } from '../ui/field' import { Field, FieldError, FieldGroup, FieldLabel } from '../ui/field';
import { Input } from '../ui/input' import { Input } from '../ui/input';
const ChangePasswordFormSchema = z const ChangePasswordFormSchema = z
.object({ .object({
currentPassword: z.string().nonempty( currentPassword: z.string().nonempty(
i18n.t('changePassword.messages.is_required', { m.common_is_required({
field: i18n.t('changePassword.form.current_password'), field: m.change_password_form_current_password(),
}), }),
), ),
newPassword: z.string().nonempty( newPassword: z.string().nonempty(
i18n.t('changePassword.messages.is_required', { m.common_is_required({
field: i18n.t('changePassword.form.new_password'), field: m.change_password_form_new_password(),
}), }),
), ),
confirmPassword: z.string().nonempty( confirmPassword: z.string().nonempty(
i18n.t('changePassword.messages.is_required', { m.common_is_required({
field: i18n.t('changePassword.form.confirm_password'), field: m.change_password_form_confirm_password(),
}), }),
), ),
}) })
@@ -33,22 +33,20 @@ const ChangePasswordFormSchema = z
ctx.addIssue({ ctx.addIssue({
path: ['confirmPassword'], path: ['confirmPassword'],
code: z.ZodIssueCode.custom, 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 = { const defaultValues: ChangePassword = {
currentPassword: '', currentPassword: '',
newPassword: '', newPassword: '',
confirmPassword: '', confirmPassword: '',
} };
const ChangePasswordForm = () => { const ChangePasswordForm = () => {
const { t } = useTranslation()
const form = useForm({ const form = useForm({
defaultValues, defaultValues,
validators: { validators: {
@@ -64,33 +62,40 @@ const ChangePasswordForm = () => {
}, },
{ {
onSuccess: () => { onSuccess: () => {
form.reset() form.reset();
toast.success(t('changePassword.messages.change_password_success')) toast.success(
m.change_password_messages_change_password_success(),
{
richColors: true,
},
);
}, },
onError: (ctx) => { onError: (ctx) => {
console.log(ctx.error.code) console.log(ctx.error.code);
toast.error(t(`backend.${ctx.error.code}` as any)) toast.error(i18next.t(`backend_${ctx.error.code}` as any), {
richColors: true,
});
}, },
}, },
) );
}, },
}) });
return ( return (
<Card className="@container/card"> <Card className="@container/card">
<CardHeader> <CardHeader>
<CardTitle className="text-xl flex items-center gap-2"> <CardTitle className="text-xl flex items-center gap-2">
<KeyIcon size={20} /> <KeyIcon size={20} />
{t('changePassword.ui.title')} {m.change_password_ui_title()}
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<form <form
id="change-password-form" id="change-password-form"
onSubmit={(e) => { onSubmit={(e) => {
e.preventDefault() e.preventDefault();
e.stopPropagation() e.stopPropagation();
form.handleSubmit() form.handleSubmit();
}} }}
> >
<FieldGroup> <FieldGroup>
@@ -98,11 +103,11 @@ const ChangePasswordForm = () => {
name="currentPassword" name="currentPassword"
children={(field) => { children={(field) => {
const isInvalid = const isInvalid =
field.state.meta.isTouched && !field.state.meta.isValid field.state.meta.isTouched && !field.state.meta.isValid;
return ( return (
<Field data-invalid={isInvalid}> <Field data-invalid={isInvalid}>
<FieldLabel htmlFor={field.name}> <FieldLabel htmlFor={field.name}>
{t('changePassword.form.current_password')}: {m.change_password_form_current_password()}:
</FieldLabel> </FieldLabel>
<Input <Input
id={field.name} id={field.name}
@@ -117,18 +122,18 @@ const ChangePasswordForm = () => {
<FieldError errors={field.state.meta.errors} /> <FieldError errors={field.state.meta.errors} />
)} )}
</Field> </Field>
) );
}} }}
/> />
<form.Field <form.Field
name="newPassword" name="newPassword"
children={(field) => { children={(field) => {
const isInvalid = const isInvalid =
field.state.meta.isTouched && !field.state.meta.isValid field.state.meta.isTouched && !field.state.meta.isValid;
return ( return (
<Field data-invalid={isInvalid}> <Field data-invalid={isInvalid}>
<FieldLabel htmlFor={field.name}> <FieldLabel htmlFor={field.name}>
{t('changePassword.form.new_password')}: {m.change_password_form_new_password()}:
</FieldLabel> </FieldLabel>
<Input <Input
id={field.name} id={field.name}
@@ -143,18 +148,18 @@ const ChangePasswordForm = () => {
<FieldError errors={field.state.meta.errors} /> <FieldError errors={field.state.meta.errors} />
)} )}
</Field> </Field>
) );
}} }}
/> />
<form.Field <form.Field
name="confirmPassword" name="confirmPassword"
children={(field) => { children={(field) => {
const isInvalid = const isInvalid =
field.state.meta.isTouched && !field.state.meta.isValid field.state.meta.isTouched && !field.state.meta.isValid;
return ( return (
<Field data-invalid={isInvalid}> <Field data-invalid={isInvalid}>
<FieldLabel htmlFor={field.name}> <FieldLabel htmlFor={field.name}>
{t('changePassword.form.confirm_password')}: {m.change_password_form_confirm_password()}:
</FieldLabel> </FieldLabel>
<Input <Input
id={field.name} id={field.name}
@@ -169,17 +174,17 @@ const ChangePasswordForm = () => {
<FieldError errors={field.state.meta.errors} /> <FieldError errors={field.state.meta.errors} />
)} )}
</Field> </Field>
) );
}} }}
/> />
<Field> <Field>
<Button type="submit">{t('ui.change_password_btn')}</Button> <Button type="submit">{m.ui_change_password_btn()}</Button>
</Field> </Field>
</FieldGroup> </FieldGroup>
</form> </form>
</CardContent> </CardContent>
</Card> </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 { uploadProfileImage } from '@/service/profile.api';
import { ProfileInput, profileUpdateSchema } from '@/service/profile.schema'; import { ProfileInput, profileUpdateSchema } from '@/service/profile.schema';
import { UserCircleIcon } from '@phosphor-icons/react'; import { UserCircleIcon } from '@phosphor-icons/react';
import { useForm } from '@tanstack/react-form'; import { useForm } from '@tanstack/react-form';
import { useQueryClient } from '@tanstack/react-query'; import { useQueryClient } from '@tanstack/react-query';
import i18next from 'i18next';
import { useRef } from 'react'; import { useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { useAuth } from '../auth/auth-provider';
import AvatarUser from '../avatar/AvatarUser'; import AvatarUser from '../avatar/AvatarUser';
import RoleBadge from '../avatar/RoleBadge'; import RoleBadge from '../avatar/RoleBadge';
import { Button } from '../ui/button'; import { Button } from '../ui/button';
@@ -20,9 +22,8 @@ const defaultValues: ProfileInput = {
}; };
const ProfileForm = () => { const ProfileForm = () => {
const { t } = useTranslation();
const fileInputRef = useRef<HTMLInputElement>(null); const fileInputRef = useRef<HTMLInputElement>(null);
const { data: session, isPending } = useSession(); const { data: session, isPending } = useAuth();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const form = useForm({ const form = useForm({
@@ -61,10 +62,14 @@ const ProfileForm = () => {
queryClient.refetchQueries({ queryClient.refetchQueries({
queryKey: ['auth', 'session'], queryKey: ['auth', 'session'],
}); });
toast.success(t('profile.messages.update_success')); toast.success(m.profile_messages_update_success(), {
richColors: true,
});
}, },
onError: (ctx) => { 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> <CardHeader>
<CardTitle className="text-xl flex items-center gap-2"> <CardTitle className="text-xl flex items-center gap-2">
<UserCircleIcon size={20} /> <UserCircleIcon size={20} />
{t('profile.ui.title')} {m.profile_ui_title()}
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
@@ -130,7 +135,7 @@ const ProfileForm = () => {
return ( return (
<Field data-invalid={isInvalid}> <Field data-invalid={isInvalid}>
<FieldLabel htmlFor={field.name}> <FieldLabel htmlFor={field.name}>
{t('profile.form.name')} {m.profile_form_name()}
</FieldLabel> </FieldLabel>
<Input <Input
id={field.name} id={field.name}
@@ -148,7 +153,7 @@ const ProfileForm = () => {
}} }}
/> />
<Field> <Field>
<FieldLabel htmlFor="name">{t('profile.form.email')}</FieldLabel> <FieldLabel htmlFor="name">{m.profile_form_email()}</FieldLabel>
<Input <Input
id="email" id="email"
name="email" name="email"
@@ -158,13 +163,13 @@ const ProfileForm = () => {
/> />
</Field> </Field>
<Field> <Field>
<FieldLabel htmlFor="name">{t('profile.form.role')}</FieldLabel> <FieldLabel htmlFor="name">{m.profile_form_role()}</FieldLabel>
<div className="flex gap-2"> <div className="flex gap-2">
<RoleBadge type={session?.user?.role} /> <RoleBadge type={session?.user?.role} />
</div> </div>
</Field> </Field>
<Field> <Field>
<Button type="submit">{t('ui.update_btn')}</Button> <Button type="submit">{m.ui_update_btn()}</Button>
</Field> </Field>
</FieldGroup> </FieldGroup>
</form> </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 { settingQueries } from '@/service/queries';
import { updateSettings } from '@/service/setting.api'; import { updateSettings } from '@/service/setting.api';
import { settingSchema, SettingsInput } from '@/service/setting.schema'; import { settingSchema, SettingsInput } from '@/service/setting.schema';
import { GearIcon } from '@phosphor-icons/react'; import { GearIcon } from '@phosphor-icons/react';
import { useForm } from '@tanstack/react-form'; import { useForm } from '@tanstack/react-form';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { useTranslation } from 'react-i18next';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { Button } from '../ui/button'; import { Button } from '../ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '../ui/card'; import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
import { Field, FieldError, FieldGroup, FieldLabel } from '../ui/field'; import { Field, FieldError, FieldGroup, FieldLabel } from '../ui/field';
import { Input } from '../ui/input'; import { Input } from '../ui/input';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '../ui/select';
import { Textarea } from '../ui/textarea'; import { Textarea } from '../ui/textarea';
const defaultValues: SettingsInput = { const defaultValues: SettingsInput = {
site_language: '',
site_name: '', site_name: '',
site_description: '', site_description: '',
site_keywords: '', site_keywords: '',
}; };
const SettingsForm = () => { const SettingsForm = () => {
const { t } = useTranslation();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const { data: settings } = useQuery(settingQueries.list()); const { data: settings } = useQuery(settingQueries.list());
@@ -35,8 +26,11 @@ const SettingsForm = () => {
const updateMutation = useMutation({ const updateMutation = useMutation({
mutationFn: updateSettings, mutationFn: updateSettings,
onSuccess: () => { onSuccess: () => {
// setLocale(variables.data.site_language as Locale);
queryClient.invalidateQueries({ queryKey: settingQueries.all }); 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_name: settings?.site_name?.value || '',
site_description: settings?.site_description?.value || '', site_description: settings?.site_description?.value || '',
site_keywords: settings?.site_keywords?.value || '', site_keywords: settings?.site_keywords?.value || '',
site_language: settings?.site_language?.value || '',
}, },
validators: { validators: {
onSubmit: settingSchema, onSubmit: settingSchema,
@@ -62,7 +55,7 @@ const SettingsForm = () => {
<CardHeader> <CardHeader>
<CardTitle className="text-xl flex items-center gap-2"> <CardTitle className="text-xl flex items-center gap-2">
<GearIcon size={20} /> <GearIcon size={20} />
{t('settings.ui.title')} {m.settings_ui_title()}
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
@@ -83,7 +76,7 @@ const SettingsForm = () => {
return ( return (
<Field data-invalid={isInvalid} className="col-span-2"> <Field data-invalid={isInvalid} className="col-span-2">
<FieldLabel htmlFor={field.name}> <FieldLabel htmlFor={field.name}>
{t('settings.form.name')} {m.settings_form_name()}
</FieldLabel> </FieldLabel>
<Input <Input
id={field.name} id={field.name}
@@ -108,7 +101,7 @@ const SettingsForm = () => {
return ( return (
<Field data-invalid={isInvalid} className="col-span-2"> <Field data-invalid={isInvalid} className="col-span-2">
<FieldLabel htmlFor={field.name}> <FieldLabel htmlFor={field.name}>
{t('settings.form.description')} {m.settings_form_description()}
</FieldLabel> </FieldLabel>
<Textarea <Textarea
id={field.name} id={field.name}
@@ -134,7 +127,7 @@ const SettingsForm = () => {
return ( return (
<Field data-invalid={isInvalid} className="col-span-2"> <Field data-invalid={isInvalid} className="col-span-2">
<FieldLabel htmlFor={field.name}> <FieldLabel htmlFor={field.name}>
{t('settings.form.keywords')} {m.settings_form_keywords()}
</FieldLabel> </FieldLabel>
<Textarea <Textarea
id={field.name} id={field.name}
@@ -152,7 +145,7 @@ const SettingsForm = () => {
); );
}} }}
/> />
<form.Field {/* <form.Field
name="site_language" name="site_language"
children={(field) => { children={(field) => {
const isInvalid = const isInvalid =
@@ -160,7 +153,7 @@ const SettingsForm = () => {
return ( return (
<Field data-invalid={isInvalid} className="col-span-2"> <Field data-invalid={isInvalid} className="col-span-2">
<FieldLabel htmlFor={field.name}> <FieldLabel htmlFor={field.name}>
{t('settings.form.language')} {m.settings_form_language()}
</FieldLabel> </FieldLabel>
<Select <Select
name={field.name} name={field.name}
@@ -182,9 +175,9 @@ const SettingsForm = () => {
</Field> </Field>
); );
}} }}
/> /> */}
<Field> <Field>
<Button type="submit">{t('ui.update_btn')}</Button> <Button type="submit">{m.ui_update_btn()}</Button>
</Field> </Field>
</FieldGroup> </FieldGroup>
</form> </form>

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

@@ -1,38 +1,33 @@
import { authClient } from '@/lib/auth-client' import { authClient } from '@/lib/auth-client';
import i18n from '@/lib/i18n' import { m } from '@/paraglide/messages';
import { useForm } from '@tanstack/react-form' import { useForm } from '@tanstack/react-form';
import { useQueryClient } from '@tanstack/react-query' import { useQueryClient } from '@tanstack/react-query';
import { createLink, useNavigate } from '@tanstack/react-router' import { createLink, useNavigate } from '@tanstack/react-router';
import { useTranslation } from 'react-i18next' import i18next from 'i18next';
import { toast } from 'sonner' import { toast } from 'sonner';
import z from 'zod' import z from 'zod';
import { Button } from '../ui/button' import { Button } from '../ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '../ui/card' import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
import { Field, FieldError, FieldGroup, FieldLabel } from '../ui/field' import { Field, FieldError, FieldGroup, FieldLabel } from '../ui/field';
import { Input } from '../ui/input' import { Input } from '../ui/input';
const SignInFormSchema = z.object({ const SignInFormSchema = z.object({
email: z email: z
.string() .string()
.nonempty( .nonempty(m.common_is_required({ field: m.login_page_form_email }))
i18n.t('loginPage.messages.is_required', { .email(m.login_page_messages_email_invalid()),
field: i18n.t('loginPage.form.email'),
}),
)
.email(i18n.t('loginPage.messages.email_invalid')),
password: z.string().nonempty( password: z.string().nonempty(
i18n.t('loginPage.messages.is_required', { m.common_is_required({
field: i18n.t('loginPage.form.password'), field: m.login_page_form_password(),
}), }),
), ),
}) });
const ButtonLink = createLink(Button) const ButtonLink = createLink(Button);
const SignInForm = () => { const SignInForm = () => {
const { t } = useTranslation() const navigate = useNavigate();
const navigate = useNavigate() const queryClient = useQueryClient();
const queryClient = useQueryClient()
const form = useForm({ const form = useForm({
defaultValues: { defaultValues: {
email: '', email: '',
@@ -50,24 +45,28 @@ const SignInForm = () => {
}, },
{ {
onSuccess: () => { onSuccess: () => {
navigate({ to: '/' }) navigate({ to: '/' });
queryClient.invalidateQueries({ queryKey: ['auth', 'session'] }); queryClient.invalidateQueries({ queryKey: ['auth', 'session'] });
toast.success(t('loginPage.messages.login_success')) toast.success(m.login_page_messages_login_success(), {
richColors: true,
});
}, },
onError: (ctx) => { onError: (ctx) => {
toast.error(t(`backend.${ctx.error.code}` as any)) toast.error(i18next.t(`backend.${ctx.error.code}` as any), {
richColors: true,
});
}, },
}, },
) );
}, },
}) });
return ( return (
<div className="flex flex-col gap-6"> <div className="flex flex-col gap-6">
<Card> <Card>
<CardHeader className="text-center"> <CardHeader className="text-center">
<CardTitle className="text-xl"> <CardTitle className="text-xl">
{t('loginPage.ui.welcome_back')} {m.login_page_ui_welcome_back()}
</CardTitle> </CardTitle>
{/* <CardDescription>Login with your Google account</CardDescription> */} {/* <CardDescription>Login with your Google account</CardDescription> */}
</CardHeader> </CardHeader>
@@ -75,8 +74,8 @@ const SignInForm = () => {
<form <form
id="sign-in-form" id="sign-in-form"
onSubmit={(e) => { onSubmit={(e) => {
e.preventDefault() e.preventDefault();
form.handleSubmit() form.handleSubmit();
}} }}
> >
<FieldGroup> <FieldGroup>
@@ -96,11 +95,11 @@ const SignInForm = () => {
name="email" name="email"
children={(field) => { children={(field) => {
const isInvalid = const isInvalid =
field.state.meta.isTouched && !field.state.meta.isValid field.state.meta.isTouched && !field.state.meta.isValid;
return ( return (
<Field data-invalid={isInvalid}> <Field data-invalid={isInvalid}>
<FieldLabel htmlFor={field.name}> <FieldLabel htmlFor={field.name}>
{t('loginPage.form.email')} {m.login_page_form_email()}
</FieldLabel> </FieldLabel>
<Input <Input
id={field.name} id={field.name}
@@ -117,18 +116,18 @@ const SignInForm = () => {
<FieldError errors={field.state.meta.errors} /> <FieldError errors={field.state.meta.errors} />
)} )}
</Field> </Field>
) );
}} }}
/> />
<form.Field <form.Field
name="password" name="password"
children={(field) => { children={(field) => {
const isInvalid = const isInvalid =
field.state.meta.isTouched && !field.state.meta.isValid field.state.meta.isTouched && !field.state.meta.isValid;
return ( return (
<Field data-invalid={isInvalid}> <Field data-invalid={isInvalid}>
<FieldLabel htmlFor={field.name}> <FieldLabel htmlFor={field.name}>
{t('loginPage.form.password')} {m.login_page_form_password()}
</FieldLabel> </FieldLabel>
<Input <Input
id={field.name} id={field.name}
@@ -143,13 +142,13 @@ const SignInForm = () => {
<FieldError errors={field.state.meta.errors} /> <FieldError errors={field.state.meta.errors} />
)} )}
</Field> </Field>
) );
}} }}
/> />
<Field> <Field>
<Button type="submit">{t('ui.login_btn')}</Button> <Button type="submit">{m.ui_login_btn()}</Button>
<ButtonLink to="/" variant="outline"> <ButtonLink to="/" variant="outline">
{t('ui.cancel_btn')} {m.ui_cancel_btn()}
</ButtonLink> </ButtonLink>
{/* <FieldDescription className="text-center"> {/* <FieldDescription className="text-center">
{t('loginPage.ui.not_have_account')}{' '} {t('loginPage.ui.not_have_account')}{' '}
@@ -165,7 +164,7 @@ const SignInForm = () => {
and <a href="#">Privacy Policy</a>. and <a href="#">Privacy Policy</a>.
</FieldDescription> */} </FieldDescription> */}
</div> </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 { m } from '@/paraglide/messages';
import { useTranslation } from 'react-i18next' import { createLink, Link } from '@tanstack/react-router';
import { Button } from '../ui/button' import { Button } from '../ui/button';
import { import {
Card, Card,
CardContent, CardContent,
CardDescription, CardDescription,
CardHeader, CardHeader,
CardTitle, CardTitle,
} from '../ui/card' } from '../ui/card';
import { Field, FieldDescription, FieldGroup, FieldLabel } from '../ui/field' import { Field, FieldDescription, FieldGroup, FieldLabel } from '../ui/field';
import { Input } from '../ui/input' import { Input } from '../ui/input';
const ButtonLink = createLink(Button) const ButtonLink = createLink(Button);
const SignupForm = () => { const SignupForm = () => {
const { t } = useTranslation()
return ( return (
<div className="flex flex-col gap-6"> <div className="flex flex-col gap-6">
<Card> <Card>
@@ -59,11 +58,11 @@ const SignupForm = () => {
<Field> <Field>
<Button type="submit">Create Account</Button> <Button type="submit">Create Account</Button>
<ButtonLink to="/" variant="outline"> <ButtonLink to="/" variant="outline">
{t('ui.cancel_btn')} {m.ui_cancel_btn()}
</ButtonLink> </ButtonLink>
<FieldDescription className="text-center"> <FieldDescription className="text-center">
Already have an account?{' '} Already have an account?{' '}
<Link to="/sign-in">{t('ui.login_btn')}</Link> <Link to="/sign-in">{m.ui_login_btn()}</Link>
</FieldDescription> </FieldDescription>
</Field> </Field>
</FieldGroup> </FieldGroup>
@@ -75,7 +74,7 @@ const SignupForm = () => {
and <a href="#">Privacy Policy</a>. and <a href="#">Privacy Policy</a>.
</FieldDescription> */} </FieldDescription> */}
</div> </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 RouterBreadcrumb = () => {
const matches = useMatches() const matches = useMatches()
console.log(matches);
const breadcrumbs = matches.flatMap((match) => { const breadcrumbs = matches.flatMap((match) => {
const staticData = match.staticData const staticData = match.staticData;
if (!staticData?.breadcrumb) return [] console.log(staticData);
if (!staticData?.breadcrumb) return [];
const breadcrumbValue = const breadcrumbValue =
typeof staticData.breadcrumb === 'function' typeof staticData.breadcrumb === 'function'
? staticData.breadcrumb(match) ? staticData.breadcrumb(match)
: staticData.breadcrumb : staticData.breadcrumb;
const items = Array.isArray(breadcrumbValue) const items = Array.isArray(breadcrumbValue)
? breadcrumbValue ? breadcrumbValue
: [breadcrumbValue] : [breadcrumbValue];
return items.map((item) => ({ return items.map((item) => ({
label: item, label: item,
path: match.pathname, path: match.pathname,
})) }));
}) });
return ( return (
<Breadcrumb> <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 { GaugeIcon, GearIcon, HouseIcon } from '@phosphor-icons/react';
import { createLink } from '@tanstack/react-router'; import { createLink } from '@tanstack/react-router';
import { useTranslation } from 'react-i18next';
import AdminShow from '../auth/AdminShow'; import AdminShow from '../auth/AdminShow';
import AuthShow from '../auth/AuthShow'; import AuthShow from '../auth/AuthShow';
import { import {
@@ -13,8 +13,6 @@ import {
const SidebarMenuButtonLink = createLink(SidebarMenuButton); const SidebarMenuButtonLink = createLink(SidebarMenuButton);
const NavMain = () => { const NavMain = () => {
const { t } = useTranslation();
return ( return (
<SidebarGroup> <SidebarGroup>
<SidebarMenu> <SidebarMenu>
@@ -22,28 +20,28 @@ const NavMain = () => {
<SidebarMenuButtonLink <SidebarMenuButtonLink
to="/" to="/"
className="cursor-pointer" className="cursor-pointer"
tooltip={t('nav.home')} tooltip={m.nav_home()}
> >
<HouseIcon size={24} /> <HouseIcon size={24} />
{t('nav.home')} {m.nav_home()}
</SidebarMenuButtonLink> </SidebarMenuButtonLink>
<AuthShow> <AuthShow>
<SidebarMenuButtonLink <SidebarMenuButtonLink
to="/dashboard" to="/dashboard"
className="cursor-pointer" className="cursor-pointer"
tooltip={t('nav.dashboard')} tooltip={m.nav_dashboard()}
> >
<GaugeIcon size={24} /> <GaugeIcon size={24} />
{t('nav.dashboard')} {m.nav_dashboard()}
</SidebarMenuButtonLink> </SidebarMenuButtonLink>
<AdminShow> <AdminShow>
<SidebarMenuButtonLink <SidebarMenuButtonLink
to="/settings" to="/settings"
className="cursor-pointer" className="cursor-pointer"
tooltip={t('nav.settings')} tooltip={m.nav_settings()}
> >
<GearIcon size={24} /> <GearIcon size={24} />
{t('nav.settings')} {m.nav_settings()}
</SidebarMenuButtonLink> </SidebarMenuButtonLink>
</AdminShow> </AdminShow>
</AuthShow> </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 { import {
DotsThreeVerticalIcon, DotsThreeVerticalIcon,
KeyIcon, KeyIcon,
@@ -8,8 +9,9 @@ import {
} from '@phosphor-icons/react'; } from '@phosphor-icons/react';
import { useQueryClient } from '@tanstack/react-query'; import { useQueryClient } from '@tanstack/react-query';
import { createLink, Link, useNavigate } from '@tanstack/react-router'; import { createLink, Link, useNavigate } from '@tanstack/react-router';
import { useTranslation } from 'react-i18next'; import i18next from 'i18next';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { useAuth } from '../auth/auth-provider';
import AvatarUser from '../avatar/AvatarUser'; import AvatarUser from '../avatar/AvatarUser';
import RoleBadge from '../avatar/RoleBadge'; import RoleBadge from '../avatar/RoleBadge';
import { import {
@@ -31,11 +33,10 @@ import {
const SidebarMenuButtonLink = createLink(SidebarMenuButton); const SidebarMenuButtonLink = createLink(SidebarMenuButton);
const NavUser = () => { const NavUser = () => {
const { t } = useTranslation();
const navigate = useNavigate(); const navigate = useNavigate();
const { isMobile } = useSidebar(); const { isMobile } = useSidebar();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const { data: session } = useSession(); const { data: session } = useAuth();
const signout = async () => { const signout = async () => {
await authClient.signOut({ await authClient.signOut({
@@ -43,10 +44,14 @@ const NavUser = () => {
onSuccess: () => { onSuccess: () => {
navigate({ to: '/' }); navigate({ to: '/' });
queryClient.invalidateQueries({ queryKey: ['auth', 'session'] }); queryClient.invalidateQueries({ queryKey: ['auth', 'session'] });
toast.success(t('loginPage.messages.logout_success')); toast.success(m.login_page_messages_login_success(), {
richColors: true,
});
}, },
onError: (ctx) => { 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" tooltip="Sign In"
> >
<SignInIcon size={28} /> <SignInIcon size={28} />
{t('ui.login_btn')} {m.ui_login_btn()}
</SidebarMenuButtonLink> </SidebarMenuButtonLink>
</SidebarMenuItem> </SidebarMenuItem>
</SidebarMenu> </SidebarMenu>
@@ -76,14 +81,14 @@ const NavUser = () => {
<SidebarMenuButton <SidebarMenuButton
size="lg" size="lg"
className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground cursor-pointer" 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" /> <AvatarUser className="h-8 w-8" />
<div className="grid flex-1 text-left text-sm leading-tight"> <div className="grid flex-1 text-left text-sm leading-tight">
<span className="truncate font-medium"> <span className="truncate font-medium">
{session?.user?.name} {session.user.name}
</span> </span>
<span className="truncate text-xs">{session?.user?.email}</span> <span className="truncate text-xs">{session.user.email}</span>
</div> </div>
<DotsThreeVerticalIcon size={28} /> <DotsThreeVerticalIcon size={28} />
</SidebarMenuButton> </SidebarMenuButton>
@@ -101,31 +106,38 @@ const NavUser = () => {
<div className="grid flex-1 text-left text-sm leading-tight"> <div className="grid flex-1 text-left text-sm leading-tight">
<div className="flex gap-2 items-center"> <div className="flex gap-2 items-center">
<span className="truncate font-medium"> <span className="truncate font-medium">
{session?.user?.name} {session.user.name}
</span> </span>
<RoleBadge <RoleBadge
type={session?.user?.role} type={session.user.role}
className="text-[10px] px-2 py-0 leading-0.5 h-4" className="text-[10px] px-2 py-0 leading-0.5 h-4"
/> />
</div> </div>
<span className="truncate text-xs"> <span className="truncate text-xs">{session.user.email}</span>
{session?.user?.email}
</span>
</div> </div>
</div> </div>
</DropdownMenuLabel> </DropdownMenuLabel>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<DropdownMenuGroup> <DropdownMenuGroup>
<DropdownMenuItem className="cursor-pointer" asChild> <DropdownMenuItem className="cursor-pointer" asChild>
<Link to="/profile"> <Link to="/account/profile">
<UserCircleIcon size={28} /> <UserCircleIcon size={28} />
{t('nav.account')} {m.nav_account()}
</Link> </Link>
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem className="cursor-pointer" asChild> <DropdownMenuItem className="cursor-pointer" asChild>
<Link to="/change-password"> <Link to="/account/change-password">
<KeyIcon size={28} /> <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> </Link>
</DropdownMenuItem> </DropdownMenuItem>
</DropdownMenuGroup> </DropdownMenuGroup>
@@ -133,7 +145,7 @@ const NavUser = () => {
<DropdownMenuGroup> <DropdownMenuGroup>
<DropdownMenuItem onSelect={signout} className="cursor-pointer"> <DropdownMenuItem onSelect={signout} className="cursor-pointer">
<SignOutIcon size={28} /> <SignOutIcon size={28} />
{t('ui.logout_btn')} {m.ui_logout_btn()}
</DropdownMenuItem> </DropdownMenuItem>
</DropdownMenuGroup> </DropdownMenuGroup>
</DropdownMenuContent> </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 { cn } from '@/lib/utils';
import { CaretRightIcon, DotsThreeIcon } from "@phosphor-icons/react" import { CaretRightIcon, DotsThreeIcon } from '@phosphor-icons/react';
function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) { function Breadcrumb({ className, ...props }: React.ComponentProps<'nav'>) {
return ( return (
<nav <nav
aria-label="breadcrumb" aria-label="breadcrumb"
@@ -12,112 +12,108 @@ function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
className={cn(className)} className={cn(className)}
{...props} {...props}
/> />
) );
} }
function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) { function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {
return ( return (
<ol <ol
data-slot="breadcrumb-list" data-slot="breadcrumb-list"
className={cn( className={cn(
"text-muted-foreground gap-1.5 text-xs/relaxed flex flex-wrap items-center break-words", 'text-muted-foreground gap-1.5 text-xs/relaxed flex flex-wrap items-center wrap-break-word',
className className,
)} )}
{...props} {...props}
/> />
) );
} }
function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) { function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {
return ( return (
<li <li
data-slot="breadcrumb-item" data-slot="breadcrumb-item"
className={cn("gap-1 inline-flex items-center", className)} className={cn('gap-1 inline-flex items-center', className)}
{...props} {...props}
/> />
) );
} }
function BreadcrumbLink({ function BreadcrumbLink({
asChild, asChild,
className, className,
...props ...props
}: React.ComponentProps<"a"> & { }: React.ComponentProps<'a'> & {
asChild?: boolean asChild?: boolean;
}) { }) {
const Comp = asChild ? Slot.Root : "a" const Comp = asChild ? Slot.Root : 'a';
return ( return (
<Comp <Comp
data-slot="breadcrumb-link" data-slot="breadcrumb-link"
className={cn("hover:text-foreground transition-colors", className)} className={cn('hover:text-foreground transition-colors', className)}
{...props} {...props}
/> />
) );
} }
function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) { function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {
return ( return (
<span <span
data-slot="breadcrumb-page" data-slot="breadcrumb-page"
role="link" role="link"
aria-disabled="true" aria-disabled="true"
aria-current="page" aria-current="page"
className={cn("text-foreground font-normal", className)} className={cn('text-foreground font-normal', className)}
{...props} {...props}
/> />
) );
} }
function BreadcrumbSeparator({ function BreadcrumbSeparator({
children, children,
className, className,
...props ...props
}: React.ComponentProps<"li">) { }: React.ComponentProps<'li'>) {
return ( return (
<li <li
data-slot="breadcrumb-separator" data-slot="breadcrumb-separator"
role="presentation" role="presentation"
aria-hidden="true" aria-hidden="true"
className={cn("[&>svg]:size-3.5", className)} className={cn('[&>svg]:size-3.5', className)}
{...props} {...props}
> >
{children ?? ( {children ?? <CaretRightIcon />}
<CaretRightIcon
/>
)}
</li> </li>
) );
} }
function BreadcrumbEllipsis({ function BreadcrumbEllipsis({
className, className,
...props ...props
}: React.ComponentProps<"span">) { }: React.ComponentProps<'span'>) {
return ( return (
<span <span
data-slot="breadcrumb-ellipsis" data-slot="breadcrumb-ellipsis"
role="presentation" role="presentation"
aria-hidden="true" aria-hidden="true"
className={cn( className={cn(
"size-4 [&>svg]:size-3.5 flex items-center justify-center", 'size-4 [&>svg]:size-3.5 flex items-center justify-center',
className className,
)} )}
{...props} {...props}
> >
<DotsThreeIcon <DotsThreeIcon />
/>
<span className="sr-only">More</span> <span className="sr-only">More</span>
</span> </span>
) );
} }
export { export {
Breadcrumb, Breadcrumb,
BreadcrumbList, BreadcrumbEllipsis,
BreadcrumbItem, BreadcrumbItem,
BreadcrumbLink, BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage, BreadcrumbPage,
BreadcrumbSeparator, BreadcrumbSeparator,
BreadcrumbEllipsis, };
}

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

@@ -74,7 +74,7 @@ function DropdownMenuItem({
data-inset={inset} data-inset={inset}
data-variant={variant} data-variant={variant}
className={cn( 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, className,
)} )}
{...props} {...props}
@@ -92,7 +92,7 @@ function DropdownMenuCheckboxItem({
<DropdownMenuPrimitive.CheckboxItem <DropdownMenuPrimitive.CheckboxItem
data-slot="dropdown-menu-checkbox-item" data-slot="dropdown-menu-checkbox-item"
className={cn( 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, className,
)} )}
checked={checked} checked={checked}
@@ -131,7 +131,7 @@ function DropdownMenuRadioItem({
<DropdownMenuPrimitive.RadioItem <DropdownMenuPrimitive.RadioItem
data-slot="dropdown-menu-radio-item" data-slot="dropdown-menu-radio-item"
className={cn( 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, className,
)} )}
{...props} {...props}
@@ -161,7 +161,7 @@ function DropdownMenuLabel({
data-slot="dropdown-menu-label" data-slot="dropdown-menu-label"
data-inset={inset} data-inset={inset}
className={cn( 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, className,
)} )}
{...props} {...props}
@@ -217,7 +217,7 @@ function DropdownMenuSubTrigger({
data-slot="dropdown-menu-sub-trigger" data-slot="dropdown-menu-sub-trigger"
data-inset={inset} data-inset={inset}
className={cn( 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, className,
)} )}
{...props} {...props}

137
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 { Label } from "@/components/ui/label" import { Separator } from '@/components/ui/separator';
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 ( return (
<fieldset <fieldset
data-slot="field-set" 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} {...props}
/> />
) );
} }
function FieldLegend({ function FieldLegend({
className, className,
variant = "legend", variant = 'legend',
...props ...props
}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) { }: React.ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {
return ( return (
<legend <legend
data-slot="field-legend" data-slot="field-legend"
data-variant={variant} 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} {...props}
/> />
) );
} }
function FieldGroup({ className, ...props }: React.ComponentProps<"div">) { function FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {
return ( return (
<div <div
data-slot="field-group" data-slot="field-group"
className={cn( 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", '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 className,
)} )}
{...props} {...props}
/> />
) );
} }
const fieldVariants = cva("data-[invalid=true]:text-destructive gap-2 group/field flex w-full", { const fieldVariants = cva(
'data-[invalid=true]:text-destructive gap-2 group/field flex w-full',
{
variants: { variants: {
orientation: { orientation: {
vertical: vertical: 'flex-col [&>*]:w-full [&>.sr-only]:w-auto',
"flex-col [&>*]:w-full [&>.sr-only]:w-auto",
horizontal: 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", '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: 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", '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: { defaultVariants: {
orientation: "vertical", orientation: 'vertical',
}, },
}) },
);
function Field({ function Field({
className, className,
orientation = "vertical", orientation = 'vertical',
...props ...props
}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) { }: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>) {
return ( return (
<div <div
role="group" role="group"
@@ -72,20 +80,20 @@ function Field({
className={cn(fieldVariants({ orientation }), className)} className={cn(fieldVariants({ orientation }), className)}
{...props} {...props}
/> />
) );
} }
function FieldContent({ className, ...props }: React.ComponentProps<"div">) { function FieldContent({ className, ...props }: React.ComponentProps<'div'>) {
return ( return (
<div <div
data-slot="field-content" data-slot="field-content"
className={cn( className={cn(
"gap-0.5 group/field-content flex flex-1 flex-col leading-snug", 'gap-0.5 group/field-content flex flex-1 flex-col leading-snug',
className className,
)} )}
{...props} {...props}
/> />
) );
} }
function FieldLabel({ function FieldLabel({
@@ -96,55 +104,58 @@ function FieldLabel({
<Label <Label
data-slot="field-label" data-slot="field-label"
className={cn( 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-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", 'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col',
className className,
)} )}
{...props} {...props}
/> />
) );
} }
function FieldTitle({ className, ...props }: React.ComponentProps<"div">) { function FieldTitle({ className, ...props }: React.ComponentProps<'div'>) {
return ( return (
<div <div
data-slot="field-label" data-slot="field-label"
className={cn( className={cn(
"gap-2 text-xs/relaxed font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug", 'gap-2 text-xs/relaxed font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug',
className className,
)} )}
{...props} {...props}
/> />
) );
} }
function FieldDescription({ className, ...props }: React.ComponentProps<"p">) { function FieldDescription({ className, ...props }: React.ComponentProps<'p'>) {
return ( return (
<p <p
data-slot="field-description" data-slot="field-description"
className={cn( 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", '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", 'last:mt-0 nth-last-2:-mt-1',
"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4", '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
className className,
)} )}
{...props} {...props}
/> />
) );
} }
function FieldSeparator({ function FieldSeparator({
children, children,
className, className,
...props ...props
}: React.ComponentProps<"div"> & { }: React.ComponentProps<'div'> & {
children?: React.ReactNode children?: React.ReactNode;
}) { }) {
return ( return (
<div <div
data-slot="field-separator" data-slot="field-separator"
data-content={!!children} 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} {...props}
> >
<Separator className="absolute inset-0 top-1/2" /> <Separator className="absolute inset-0 top-1/2" />
@@ -157,7 +168,7 @@ function FieldSeparator({
</span> </span>
)} )}
</div> </div>
) );
} }
function FieldError({ function FieldError({
@@ -165,61 +176,61 @@ function FieldError({
children, children,
errors, errors,
...props ...props
}: React.ComponentProps<"div"> & { }: React.ComponentProps<'div'> & {
errors?: Array<{ message?: string } | undefined> errors?: Array<{ message?: string } | undefined>;
}) { }) {
const content = useMemo(() => { const content = useMemo(() => {
if (children) { if (children) {
return children return children;
} }
if (!errors?.length) { if (!errors?.length) {
return null return null;
} }
const uniqueErrors = [ const uniqueErrors = [
...new Map(errors.map((error) => [error?.message, error])).values(), ...new Map(errors.map((error) => [error?.message, error])).values(),
] ];
if (uniqueErrors?.length == 1) { if (uniqueErrors?.length == 1) {
return uniqueErrors[0]?.message return uniqueErrors[0]?.message;
} }
return ( return (
<ul className="ml-4 flex list-disc flex-col gap-1"> <ul className="ml-4 flex list-disc flex-col gap-1">
{uniqueErrors.map( {uniqueErrors.map(
(error, index) => (error, index) =>
error?.message && <li key={index}>{error.message}</li> error?.message && <li key={index}>{error.message}</li>,
)} )}
</ul> </ul>
) );
}, [children, errors]) }, [children, errors]);
if (!content) { if (!content) {
return null return null;
} }
return ( return (
<div <div
role="alert" role="alert"
data-slot="field-error" 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} {...props}
> >
{content} {content}
</div> </div>
) );
} }
export { export {
Field, Field,
FieldLabel, FieldContent,
FieldDescription, FieldDescription,
FieldError, FieldError,
FieldGroup, FieldGroup,
FieldLabel,
FieldLegend, FieldLegend,
FieldSeparator, FieldSeparator,
FieldSet, FieldSet,
FieldContent,
FieldTitle, FieldTitle,
} };

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

@@ -288,7 +288,7 @@ function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
onClick={toggleSidebar} onClick={toggleSidebar}
title="Toggle Sidebar" title="Toggle Sidebar"
className={cn( 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', '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', '[[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', '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!"
}
}

145
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 appauthRouteRouteImport } from './routes/(app)/(auth)/route'
import { Route as ApiAuthSplatRouteImport } from './routes/api/auth.$' import { Route as ApiAuthSplatRouteImport } from './routes/api/auth.$'
import { Route as appauthSettingsRouteImport } from './routes/(app)/(auth)/settings' 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 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({ const appRouteRoute = appRouteRouteImport.update({
id: '/(app)', id: '/(app)',
@@ -53,41 +56,62 @@ const appauthSettingsRoute = appauthSettingsRouteImport.update({
path: '/settings', path: '/settings',
getParentRoute: () => appauthRouteRoute, getParentRoute: () => appauthRouteRoute,
} as any) } as any)
const appauthProfileRoute = appauthProfileRouteImport.update({
id: '/profile',
path: '/profile',
getParentRoute: () => appauthRouteRoute,
} as any)
const appauthDashboardRoute = appauthDashboardRouteImport.update({ const appauthDashboardRoute = appauthDashboardRouteImport.update({
id: '/dashboard', id: '/dashboard',
path: '/dashboard', path: '/dashboard',
getParentRoute: () => appauthRouteRoute, getParentRoute: () => appauthRouteRoute,
} as any) } as any)
const appauthChangePasswordRoute = appauthChangePasswordRouteImport.update({ 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', id: '/change-password',
path: '/change-password', path: '/change-password',
getParentRoute: () => appauthRouteRoute, getParentRoute: () => appauthAccountRouteRoute,
} as any) } as any)
export interface FileRoutesByFullPath { export interface FileRoutesByFullPath {
'/sign-in': typeof authSignInRoute '/sign-in': typeof authSignInRoute
'/sign-up': typeof authSignUpRoute '/sign-up': typeof authSignUpRoute
'/': typeof appIndexRoute '/': typeof appIndexRoute
'/change-password': typeof appauthChangePasswordRoute '/account': typeof appauthAccountRouteRouteWithChildren
'/dashboard': typeof appauthDashboardRoute '/dashboard': typeof appauthDashboardRoute
'/profile': typeof appauthProfileRoute
'/settings': typeof appauthSettingsRoute '/settings': typeof appauthSettingsRoute
'/api/auth/$': typeof ApiAuthSplatRoute '/api/auth/$': typeof ApiAuthSplatRoute
'/account/change-password': typeof appauthAccountChangePasswordRoute
'/account/profile': typeof appauthAccountProfileRoute
'/account/settings': typeof appauthAccountSettingsRoute
'/account/': typeof appauthAccountIndexRoute
} }
export interface FileRoutesByTo { export interface FileRoutesByTo {
'/sign-in': typeof authSignInRoute '/sign-in': typeof authSignInRoute
'/sign-up': typeof authSignUpRoute '/sign-up': typeof authSignUpRoute
'/': typeof appIndexRoute '/': typeof appIndexRoute
'/change-password': typeof appauthChangePasswordRoute
'/dashboard': typeof appauthDashboardRoute '/dashboard': typeof appauthDashboardRoute
'/profile': typeof appauthProfileRoute
'/settings': typeof appauthSettingsRoute '/settings': typeof appauthSettingsRoute
'/api/auth/$': typeof ApiAuthSplatRoute '/api/auth/$': typeof ApiAuthSplatRoute
'/account/change-password': typeof appauthAccountChangePasswordRoute
'/account/profile': typeof appauthAccountProfileRoute
'/account/settings': typeof appauthAccountSettingsRoute
'/account': typeof appauthAccountIndexRoute
} }
export interface FileRoutesById { export interface FileRoutesById {
__root__: typeof rootRouteImport __root__: typeof rootRouteImport
@@ -96,11 +120,14 @@ export interface FileRoutesById {
'/(auth)/sign-in': typeof authSignInRoute '/(auth)/sign-in': typeof authSignInRoute
'/(auth)/sign-up': typeof authSignUpRoute '/(auth)/sign-up': typeof authSignUpRoute
'/(app)/': typeof appIndexRoute '/(app)/': typeof appIndexRoute
'/(app)/(auth)/change-password': typeof appauthChangePasswordRoute '/(app)/(auth)/account': typeof appauthAccountRouteRouteWithChildren
'/(app)/(auth)/dashboard': typeof appauthDashboardRoute '/(app)/(auth)/dashboard': typeof appauthDashboardRoute
'/(app)/(auth)/profile': typeof appauthProfileRoute
'/(app)/(auth)/settings': typeof appauthSettingsRoute '/(app)/(auth)/settings': typeof appauthSettingsRoute
'/api/auth/$': typeof ApiAuthSplatRoute '/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 { export interface FileRouteTypes {
fileRoutesByFullPath: FileRoutesByFullPath fileRoutesByFullPath: FileRoutesByFullPath
@@ -108,21 +135,26 @@ export interface FileRouteTypes {
| '/sign-in' | '/sign-in'
| '/sign-up' | '/sign-up'
| '/' | '/'
| '/change-password' | '/account'
| '/dashboard' | '/dashboard'
| '/profile'
| '/settings' | '/settings'
| '/api/auth/$' | '/api/auth/$'
| '/account/change-password'
| '/account/profile'
| '/account/settings'
| '/account/'
fileRoutesByTo: FileRoutesByTo fileRoutesByTo: FileRoutesByTo
to: to:
| '/sign-in' | '/sign-in'
| '/sign-up' | '/sign-up'
| '/' | '/'
| '/change-password'
| '/dashboard' | '/dashboard'
| '/profile'
| '/settings' | '/settings'
| '/api/auth/$' | '/api/auth/$'
| '/account/change-password'
| '/account/profile'
| '/account/settings'
| '/account'
id: id:
| '__root__' | '__root__'
| '/(app)' | '/(app)'
@@ -130,11 +162,14 @@ export interface FileRouteTypes {
| '/(auth)/sign-in' | '/(auth)/sign-in'
| '/(auth)/sign-up' | '/(auth)/sign-up'
| '/(app)/' | '/(app)/'
| '/(app)/(auth)/change-password' | '/(app)/(auth)/account'
| '/(app)/(auth)/dashboard' | '/(app)/(auth)/dashboard'
| '/(app)/(auth)/profile'
| '/(app)/(auth)/settings' | '/(app)/(auth)/settings'
| '/api/auth/$' | '/api/auth/$'
| '/(app)/(auth)/account/change-password'
| '/(app)/(auth)/account/profile'
| '/(app)/(auth)/account/settings'
| '/(app)/(auth)/account/'
fileRoutesById: FileRoutesById fileRoutesById: FileRoutesById
} }
export interface RootRouteChildren { export interface RootRouteChildren {
@@ -195,13 +230,6 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof appauthSettingsRouteImport preLoaderRoute: typeof appauthSettingsRouteImport
parentRoute: typeof appauthRouteRoute parentRoute: typeof appauthRouteRoute
} }
'/(app)/(auth)/profile': {
id: '/(app)/(auth)/profile'
path: '/profile'
fullPath: '/profile'
preLoaderRoute: typeof appauthProfileRouteImport
parentRoute: typeof appauthRouteRoute
}
'/(app)/(auth)/dashboard': { '/(app)/(auth)/dashboard': {
id: '/(app)/(auth)/dashboard' id: '/(app)/(auth)/dashboard'
path: '/dashboard' path: '/dashboard'
@@ -209,27 +237,70 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof appauthDashboardRouteImport preLoaderRoute: typeof appauthDashboardRouteImport
parentRoute: typeof appauthRouteRoute parentRoute: typeof appauthRouteRoute
} }
'/(app)/(auth)/change-password': { '/(app)/(auth)/account': {
id: '/(app)/(auth)/change-password' id: '/(app)/(auth)/account'
path: '/change-password' path: '/account'
fullPath: '/change-password' fullPath: '/account'
preLoaderRoute: typeof appauthChangePasswordRouteImport preLoaderRoute: typeof appauthAccountRouteRouteImport
parentRoute: typeof appauthRouteRoute 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 { interface appauthRouteRouteChildren {
appauthChangePasswordRoute: typeof appauthChangePasswordRoute appauthAccountRouteRoute: typeof appauthAccountRouteRouteWithChildren
appauthDashboardRoute: typeof appauthDashboardRoute appauthDashboardRoute: typeof appauthDashboardRoute
appauthProfileRoute: typeof appauthProfileRoute
appauthSettingsRoute: typeof appauthSettingsRoute appauthSettingsRoute: typeof appauthSettingsRoute
} }
const appauthRouteRouteChildren: appauthRouteRouteChildren = { const appauthRouteRouteChildren: appauthRouteRouteChildren = {
appauthChangePasswordRoute: appauthChangePasswordRoute, appauthAccountRouteRoute: appauthAccountRouteRouteWithChildren,
appauthDashboardRoute: appauthDashboardRoute, appauthDashboardRoute: appauthDashboardRoute,
appauthProfileRoute: appauthProfileRoute,
appauthSettingsRoute: appauthSettingsRoute, 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 ChangePasswordForm from '@/components/form/change-password-form';
import i18n from '@/lib/i18n'; import { m } from '@/paraglide/messages';
import { createFileRoute } from '@tanstack/react-router'; 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, component: RouteComponent,
staticData: { breadcrumb: i18n.t('nav.change_password') }, staticData: { breadcrumb: () => m.nav_change_password() },
}); });
function RouteComponent() { function RouteComponent() {
return ( return (
<div className="@container/main flex flex-1 flex-col gap-2 p-4"> <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 /> <ChangePasswordForm />
</div> </div>
</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 ProfileForm from '@/components/form/profile-form';
import i18n from '@/lib/i18n'; import { m } from '@/paraglide/messages';
import { createFileRoute } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router';
export const Route = createFileRoute('/(app)/(auth)/profile')({ export const Route = createFileRoute('/(app)/(auth)/account/profile')({
component: RouteComponent, component: RouteComponent,
staticData: { breadcrumb: i18n.t('nav.profile') }, staticData: { breadcrumb: () => m.nav_profile() },
}); });
function RouteComponent() { function RouteComponent() {
return ( return (
<div className="@container/main flex flex-1 flex-col gap-2 p-4"> <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 /> <ProfileForm />
</div> </div>
</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() },
});

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

@@ -0,0 +1,11 @@
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>Hello "account/settings"!</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'; import { createFileRoute } from '@tanstack/react-router';
export const Route = createFileRoute('/(app)/(auth)/dashboard')({ export const Route = createFileRoute('/(app)/(auth)/dashboard')({
component: RouteComponent, component: RouteComponent,
staticData: { breadcrumb: () => m.nav_dashboard() },
}); });
function RouteComponent() { 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 SettingsForm from '@/components/form/settings-form';
import i18n from '@/lib/i18n'; import { m } from '@/paraglide/messages';
import { createFileRoute } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router';
export const Route = createFileRoute('/(app)/(auth)/settings')({ export const Route = createFileRoute('/(app)/(auth)/settings')({
component: RouteComponent, component: RouteComponent,
staticData: { breadcrumb: i18n.t('nav.settings') }, staticData: { breadcrumb: () => m.nav_settings() },
}); });
function RouteComponent() { function RouteComponent() {
return ( return (
<div className="@container/main flex flex-1 flex-col gap-2 p-4"> <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 /> <SettingsForm />
</div> </div>
</div> </div>

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

@@ -1,11 +1,11 @@
import i18n from '@/lib/i18n' import { m } from '@/paraglide/messages';
import { createFileRoute } from '@tanstack/react-router' import { createFileRoute } from '@tanstack/react-router';
export const Route = createFileRoute('/(app)/')({ export const Route = createFileRoute('/(app)/')({
component: App, component: App,
staticData: { breadcrumb: i18n.t('nav.home') }, staticData: { breadcrumb: () => m.nav_home() },
}) });
function App() { 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>;
} }

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

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

20
src/routes/__root.tsx
View File

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

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

@@ -1,7 +1,7 @@
import { prisma } from '@/db'; import { prisma } from '@/db';
import { Setting } from '@/generated/prisma/client'; import { Setting } from '@/generated/prisma/client';
import { authMiddleware } from '@/lib/middleware'; 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';
// import { settingSchema } from './setting.schema'; // import { settingSchema } from './setting.schema';
@@ -9,10 +9,24 @@ export type SettingReturn = {
[key: string]: Setting; [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' }) export const getSettings = createServerFn({ method: 'GET' })
.middleware([authMiddleware]) .middleware([authMiddleware])
.handler(async () => { .handler(async () => {
const settings = await prisma.setting.findMany(); const settings = await prisma.setting.findMany({
where: {
relation: 'admin',
},
});
const results: SettingReturn = {}; 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'; import z from 'zod';
export const settingSchema = z.object({ export const settingSchema = z.object({
site_name: z.string().nonempty( site_name: z.string().nonempty(
i18n.t('settings.messages.is_required', { m.common_is_required({
field: i18n.t('settings.form.name'), field: m.settings_form_name(),
}), }),
), ),
site_description: z.string().nonempty( site_description: z.string().nonempty(
i18n.t('settings.messages.is_required', { m.common_is_required({
field: i18n.t('settings.form.description'), field: m.settings_form_description(),
}), }),
), ),
site_keywords: z.string().nonempty( site_keywords: z.string().nonempty(
i18n.t('settings.messages.is_required', { m.common_is_required({
field: i18n.t('settings.form.keywords'), field: m.settings_form_keywords(),
}),
),
site_language: z.string().nonempty(
i18n.t('settings.messages.is_required', {
field: i18n.t('settings.form.language'),
}), }),
), ),
}); });

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
}
}
}

12
tsconfig.json
View File

@@ -1,5 +1,11 @@
{ {
"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": { "compilerOptions": {
"target": "ES2022", "target": "ES2022",
@@ -7,6 +13,7 @@
"module": "ESNext", "module": "ESNext",
"lib": ["ES2022", "DOM", "DOM.Iterable"], "lib": ["ES2022", "DOM", "DOM.Iterable"],
"types": ["vite/client"], "types": ["vite/client"],
"allowJs": true,
/* Bundler mode */ /* Bundler mode */
"moduleResolution": "bundler", "moduleResolution": "bundler",
@@ -23,7 +30,8 @@
"noUncheckedSideEffectImports": true, "noUncheckedSideEffectImports": true,
"baseUrl": ".", "baseUrl": ".",
"paths": { "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 tailwindcss from '@tailwindcss/vite';
import { devtools } from '@tanstack/devtools-vite'; import { devtools } from '@tanstack/devtools-vite';
import { tanstackStart } from '@tanstack/react-start/plugin/vite'; import { tanstackStart } from '@tanstack/react-start/plugin/vite';
@@ -7,6 +8,13 @@ import viteTsConfigPaths from 'vite-tsconfig-paths';
const config = defineConfig({ const config = defineConfig({
plugins: [ plugins: [
paraglideVitePlugin({
project: './project.inlang',
outdir: './src/paraglide',
outputStructure: 'message-modules',
cookieName: 'PARAGLIDE_LOCALE',
strategy: ['cookie', 'baseLocale'],
}),
devtools(), devtools(),
// this is the plugin that enables path aliases // this is the plugin that enables path aliases
viteTsConfigPaths({ viteTsConfigPaths({