@allbluecn/admin-app 0.2.0 → 0.2.1

package/src/routes/_nav/users/$userId/route.lazy.tsx

@@ -16,10 +16,8 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { createLazyFileRoute } from '@tanstack/react-router'
+import { m } from '@/paraglide/messages.js'
 import { useState, useTransition, useMemo } from 'react'
-import { I18nextProvider } from 'react-i18next'
-import { useTranslation } from 'react-i18next'
-import { createServerI18n } from '@/lib/i18n/server'
 import { formatTimestamp } from '@allbluecn/web-app/lib/datetime'
 import { getUserDetailFn } from '@/server/serverFns/user/detail'
 import { updateUserRoleFn } from '@/server/serverFns/user/update-role'
@@ -31,6 +29,19 @@ import { Badge } from '@/components/ui/badge'
 import { Separator } from '@/components/ui/separator'
 import { Button } from '@/components/ui/button'
 import { UserAvatar } from '@allbluecn/web-app/user-avatar'
+
+const STATUS_LABELS: Record<string, () => string> = {
+  active: m['admin-users_status_active'],
+  banned: m['admin-users_status_banned'],
+  inactive: m['admin-users_status_inactive'],
+}
+
+const ROLE_LABELS: Record<string, () => string> = {
+  admin: m['admin-users_role_admin'],
+  guest: m['admin-users_role_guest'],
+  superAdmin: m['admin-users_role_superAdmin'],
+  user: m['admin-users_role_user'],
+}
 import {
   Dialog,
   DialogContent,
@@ -90,27 +101,20 @@ export const Route = createLazyFileRoute('/_nav/users/$userId')({
 })
 
 function AdminUserErrorBoundary({ error, reset }: { error: Error; reset: () => void }) {
-  const i18n = useMemo(() => createServerI18n('zh'), [])
-  return (
-    <I18nextProvider i18n={i18n}>
-      <AdminUserErrorBoundaryInner error={error} reset={reset} />
-    </I18nextProvider>
-  )
+  return <AdminUserErrorBoundaryInner error={error} reset={reset} />
 }
 
 function AdminUserErrorBoundaryInner({ error, reset }: { error: Error; reset: () => void }) {
-  const { t } = useTranslation('admin-users')
   return (
     <div className="flex flex-col items-center justify-center h-64 gap-3">
       <AlertCircle className="size-8 text-destructive" />
-      <p className="text-sm text-muted-foreground">{t('detail.errorLoading')}: {error.message}</p>
-      <Button variant="outline" size="sm" onClick={reset}>{t('detail.retry')}</Button>
+      <p className="text-sm text-muted-foreground">{m['admin-users_detail_errorLoading']()}: {error.message}</p>
+      <Button variant="outline" size="sm" onClick={reset}>{m['admin-users_detail_retry']()}</Button>
     </div>
   )
 }
 
 function UserDetailPage() {
-  const { t } = useTranslation('admin-users')
   const statusBadgeVariant: Record<string, 'default' | 'secondary' | 'destructive' | 'outline'> = {
     ACTIVE: 'default',
     INACTIVE: 'secondary',
@@ -124,7 +128,7 @@ function UserDetailPage() {
   if (notFound) {
     return (
       <div className="flex h-64 items-center justify-center">
-        <p className="text-muted-foreground">{t('detail.userNotFound')}</p>
+        <p className="text-muted-foreground">{m['admin-users_detail_userNotFound']()}</p>
       </div>
     )
   }
@@ -141,8 +145,8 @@ function UserDetailPage() {
     if (updated) setUser(updated)
   })
 
-  const getRoleLabel = (role: string) => t(`role.${role}`)
-  const getStatusLabel = (status: string) => t(`status.${status}`)
+  const getRoleLabel = (role: string) => (ROLE_LABELS[role] ?? (() => role))()
+  const getStatusLabel = (status: string) => (STATUS_LABELS[status] ?? (() => status))()
 
   return (
     <>
@@ -176,21 +180,21 @@ function UserDetailPage() {
             <SettingsProfile
               readOnly
               profile={{ name: user.username, email: user.email }}
-              title={t('detail.profile.title')}
-              description={t('detail.profile.description')}
+              title={m['admin-users_detail_profile_title']()}
+              description={m['admin-users_detail_profile_description']()}
               actions={
                 <>
                   <Button variant="outline" size="sm" onClick={() => setRoleDialog({ open: true, value: user.role })}>
-                    {t('action.changeRole')}
+                    {m['admin-users_action_changeRole']()}
                   </Button>
                   <Button variant="outline" size="sm" onClick={() => setStatusDialog({ open: true, value: user.status })}>
-                    {t('action.changeStatus')}
+                    {m['admin-users_action_changeStatus']()}
                   </Button>
                   <Button variant="outline" size="sm" onClick={() => setPasswordDialog({ open: true, value: '' })}>
-                    {t('action.resetPassword')}
+                    {m['admin-users_action_resetPassword']()}
                   </Button>
                   <Button variant="destructive" size="sm" onClick={() => setDeleteDialog({ open: true, confirmName: '' })}>
-                    {t('common:button.delete')}
+                    {m.common_button_delete()}
                   </Button>
                 </>
               }
@@ -198,22 +202,22 @@ function UserDetailPage() {
 
             <Card className="shadow-xs">
               <CardHeader>
-                <CardTitle>{t('detail.account.title')}</CardTitle>
-                <CardDescription>{t('detail.account.description')}</CardDescription>
+                <CardTitle>{m['admin-users_detail_account_title']()}</CardTitle>
+                <CardDescription>{m['admin-users_detail_account_description']()}</CardDescription>
               </CardHeader>
               <CardContent>
                 <div className="space-y-2 text-sm">
                   <div className="flex justify-between rounded-lg border p-3">
-                    <span className="text-muted-foreground">{t('detail.account.createdAt')}</span>
+                    <span className="text-muted-foreground">{m['admin-users_detail_account_createdAt']()}</span>
                     <span>{formatTimestamp(user.createdAt)}</span>
                   </div>
                   <div className="flex justify-between rounded-lg border p-3">
-                    <span className="text-muted-foreground">{t('detail.account.updatedAt')}</span>
+                    <span className="text-muted-foreground">{m['admin-users_detail_account_updatedAt']()}</span>
                     <span>{formatTimestamp(user.updatedAt)}</span>
                   </div>
                   <div className="flex justify-between rounded-lg border p-3">
-                    <span className="text-muted-foreground">{t('detail.account.lastLogin')}</span>
-                    <span>{user.lastLoginAt ? formatTimestamp(user.lastLoginAt) : t('detail.account.neverLoggedIn')}</span>
+                    <span className="text-muted-foreground">{m['admin-users_detail_account_lastLogin']()}</span>
+                    <span>{user.lastLoginAt ? formatTimestamp(user.lastLoginAt) : m['admin-users_detail_account_neverLoggedIn']()}</span>
                   </div>
                 </div>
               </CardContent>
@@ -221,8 +225,8 @@ function UserDetailPage() {
 
             <Card className="shadow-xs">
               <CardHeader>
-                <CardTitle>{t('detail.stats.title')}</CardTitle>
-                <CardDescription>{t('detail.stats.description')}</CardDescription>
+                <CardTitle>{m['admin-users_detail_stats_title']()}</CardTitle>
+                <CardDescription>{m['admin-users_detail_stats_description']()}</CardDescription>
               </CardHeader>
               <CardContent>
                 <div className="grid grid-cols-2 gap-3">
@@ -230,28 +234,28 @@ function UserDetailPage() {
                     <FileTextIcon className="h-4 w-4 text-muted-foreground" />
                     <div>
                       <div className="text-lg font-semibold">{user._count.prds}</div>
-                      <div className="text-xs text-muted-foreground">{t('detail.stats.prds')}</div>
+                      <div className="text-xs text-muted-foreground">{m['admin-users_detail_stats_prds']()}</div>
                     </div>
                   </div>
                   <div className="flex items-center gap-2 rounded-lg border p-3">
                     <Package2Icon className="h-4 w-4 text-muted-foreground" />
                     <div>
                       <div className="text-lg font-semibold">{user._count.anyhubApps}</div>
-                      <div className="text-xs text-muted-foreground">{t('detail.stats.apps')}</div>
+                      <div className="text-xs text-muted-foreground">{m['admin-users_detail_stats_apps']()}</div>
                     </div>
                   </div>
                   <div className="flex items-center gap-2 rounded-lg border p-3">
                     <ShoppingBagIcon className="h-4 w-4 text-muted-foreground" />
                     <div>
                       <div className="text-lg font-semibold">{user._count.anyhubMarketApps}</div>
-                      <div className="text-xs text-muted-foreground">{t('detail.stats.marketApps')}</div>
+                      <div className="text-xs text-muted-foreground">{m['admin-users_detail_stats_marketApps']()}</div>
                     </div>
                   </div>
                   <div className="flex items-center gap-2 rounded-lg border p-3">
                     <ShieldCheckIcon className="h-4 w-4 text-muted-foreground" />
                     <div>
                       <div className="text-lg font-semibold">{user._count.reviews}</div>
-                      <div className="text-xs text-muted-foreground">{t('detail.stats.reviews')}</div>
+                      <div className="text-xs text-muted-foreground">{m['admin-users_detail_stats_reviews']()}</div>
                     </div>
                   </div>
                 </div>
@@ -266,23 +270,23 @@ function UserDetailPage() {
                 id: log.id,
                 action: 'login',
                 type: 'login',
-                description: log.success ? t('detail.loginLogs.success') : t('detail.loginLogs.failure'),
+                description: log.success ? m['admin-users_detail_loginLogs_success']() : m['admin-users_detail_loginLogs_failure'](),
                 ipAddress: log.ip || '',
                 location: log.location || '',
                 device: formatParsedUA(parseUserAgent(log.userAgent)),
                 timestamp: new Date(log.createdAt),
                 status: log.success ? 'success' : 'failed',
-                reason: log.success ? undefined : log.message || t('detail.loginLogs.unknownReason'),
+                reason: log.success ? undefined : log.message || m['admin-users_detail_loginLogs_unknownReason'](),
               }))}
-              title={t('detail.loginLogs.title')}
-              description={t('detail.loginLogs.description')}
-              onExport={async (filters) => {
+              title={m['admin-users_detail_loginLogs_title']()}
+              description={m['admin-users_detail_loginLogs_description']()}
+              onExport={async (filters: any) => {
                 const rows = user.loginLogs
                   .filter((log: any) => {
                     if (filters.type && filters.type !== 'login') return false
                     if (
                       filters.search &&
-                      !`${log.success ? t('detail.loginLogs.success') : t('detail.loginLogs.failure')} ${log.ip || ''}`
+                      !`${log.success ? m['admin-users_detail_loginLogs_success']() : m['admin-users_detail_loginLogs_failure']()} ${log.ip || ''}`
                         .toLowerCase()
                         .includes(filters.search.toLowerCase())
                     )
@@ -293,8 +297,8 @@ function UserDetailPage() {
                     const parsed = parseUserAgent(log.userAgent)
                     return [
                       new Date(log.createdAt).toISOString(),
-                      log.success ? t('detail.loginLogs.success') : t('detail.loginLogs.failure'),
-                      log.success ? '' : log.message || t('detail.loginLogs.unknownReason'),
+                      log.success ? m['admin-users_detail_loginLogs_success']() : m['admin-users_detail_loginLogs_failure'](),
+                      log.success ? '' : log.message || m['admin-users_detail_loginLogs_unknownReason'](),
                       log.ip || '',
                       log.location || '',
                       parsed.browser,
@@ -304,7 +308,7 @@ function UserDetailPage() {
                       .map((v: string) => `"${(v || '').replace(/"/g, '""')}"`)
                       .join(',')
                   })
-                const csv = [t('detail.loginLogs.csvHeader'), ...rows].join('\n')
+                const csv = [m['admin-users_detail_loginLogs_csvHeader'](), ...rows].join('\n')
                 const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' })
                 const url = URL.createObjectURL(blob)
                 const a = document.createElement('a')
@@ -312,118 +316,118 @@ function UserDetailPage() {
                 a.download = `user-${user.username}-login-logs.csv`
                 a.click()
                 URL.revokeObjectURL(url)
-                toast.success(t('detail.loginLogs.exportSuccess'))
+                toast.success(m['admin-users_detail_loginLogs_exportSuccess']())
               }}
             />
           </div>
         </div>
       </TableDetailLayout>
 
-      <Dialog open={roleDialog.open} onOpenChange={(o) => setRoleDialog((d) => ({ ...d, open: o }))}>
+      <Dialog open={roleDialog.open} onOpenChange={(o: boolean) => setRoleDialog((d) => ({ ...d, open: o }))}>
         <DialogContent className="sm:max-w-100">
           <DialogHeader>
-            <DialogTitle>{t('dialog.role.title', { username: user.username })}</DialogTitle>
+            <DialogTitle>{m['admin-users_dialog_role_title']({ username: user.username })}</DialogTitle>
           </DialogHeader>
           <div className="py-4">
-            <Label>{t('dialog.role.newRole')}</Label>
-            <Select value={roleDialog.value} onValueChange={(v) => setRoleDialog((d) => ({ ...d, value: v }))}>
+            <Label>{m['admin-users_dialog_role_newRole']()}</Label>
+            <Select value={roleDialog.value} onValueChange={(v: string) => setRoleDialog((d) => ({ ...d, value: v }))}>
               <SelectTrigger><SelectValue /></SelectTrigger>
               <SelectContent>
-                <SelectItem value="USER">{t('role.user')}</SelectItem>
-                <SelectItem value="ADMIN">{t('role.admin')}</SelectItem>
-                <SelectItem value="SUPER_ADMIN">{t('role.superAdmin')}</SelectItem>
+                <SelectItem value="USER">{m['admin-users_role_user']()}</SelectItem>
+                <SelectItem value="ADMIN">{m['admin-users_role_admin']()}</SelectItem>
+                <SelectItem value="SUPER_ADMIN">{m['admin-users_role_superAdmin']()}</SelectItem>
               </SelectContent>
             </Select>
           </div>
           <DialogFooter>
-            <Button variant="outline" onClick={() => setRoleDialog((d) => ({ ...d, open: false }))}>{t('common:button.cancel')}</Button>
+            <Button variant="outline" onClick={() => setRoleDialog((d) => ({ ...d, open: false }))}>{m.common_button_cancel()}</Button>
             <Button disabled={isPending} onClick={() => startTransition(async () => {
               try {
                 await updateUserRoleFn({ data: { userId: user.id, role: roleDialog.value as 'USER' | 'ADMIN' | 'SUPER_ADMIN' } })
-                toast.success(t('toast.roleUpdated'))
+                toast.success(m['admin-users_toast_roleUpdated']())
                 setRoleDialog((d) => ({ ...d, open: false }))
                 await refetchUser()
-              } catch { toast.error(t('toast.updateFailed')) }
-            })}>{t('common:button.confirm')}</Button>
+              } catch { toast.error(m['admin-users_toast_updateFailed']()) }
+            })}>{m.common_button_confirm()}</Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
 
-      <Dialog open={statusDialog.open} onOpenChange={(o) => setStatusDialog((d) => ({ ...d, open: o }))}>
+      <Dialog open={statusDialog.open} onOpenChange={(o: boolean) => setStatusDialog((d) => ({ ...d, open: o }))}>
         <DialogContent className="sm:max-w-100">
           <DialogHeader>
-            <DialogTitle>{t('dialog.status.title', { username: user.username })}</DialogTitle>
+            <DialogTitle>{m['admin-users_dialog_status_title']({ username: user.username })}</DialogTitle>
           </DialogHeader>
           <div className="py-4">
-            <Label>{t('dialog.status.newStatus')}</Label>
-            <Select value={statusDialog.value} onValueChange={(v) => setStatusDialog((d) => ({ ...d, value: v }))}>
+            <Label>{m['admin-users_dialog_status_newStatus']()}</Label>
+            <Select value={statusDialog.value} onValueChange={(v: string) => setStatusDialog((d) => ({ ...d, value: v }))}>
               <SelectTrigger><SelectValue /></SelectTrigger>
               <SelectContent>
-                <SelectItem value="ACTIVE">{t('status.active')}</SelectItem>
-                <SelectItem value="INACTIVE">{t('status.inactive')}</SelectItem>
-                <SelectItem value="BANNED">{t('status.banned')}</SelectItem>
+                <SelectItem value="ACTIVE">{m['admin-users_status_active']()}</SelectItem>
+                <SelectItem value="INACTIVE">{m['admin-users_status_inactive']()}</SelectItem>
+                <SelectItem value="BANNED">{m['admin-users_status_banned']()}</SelectItem>
               </SelectContent>
             </Select>
           </div>
           <DialogFooter>
-            <Button variant="outline" onClick={() => setStatusDialog((d) => ({ ...d, open: false }))}>{t('common:button.cancel')}</Button>
+            <Button variant="outline" onClick={() => setStatusDialog((d) => ({ ...d, open: false }))}>{m.common_button_cancel()}</Button>
             <Button disabled={isPending} onClick={() => startTransition(async () => {
               try {
                 await updateUserStatusFn({ data: { userId: user.id, status: statusDialog.value as 'ACTIVE' | 'INACTIVE' | 'BANNED' } })
-                toast.success(t('toast.statusUpdated'))
+                toast.success(m['admin-users_toast_statusUpdated']())
                 setStatusDialog((d) => ({ ...d, open: false }))
                 await refetchUser()
-              } catch { toast.error(t('toast.updateFailed')) }
-            })}>{t('common:button.confirm')}</Button>
+              } catch { toast.error(m['admin-users_toast_updateFailed']()) }
+            })}>{m.common_button_confirm()}</Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
 
-      <Dialog open={passwordDialog.open} onOpenChange={(o) => setPasswordDialog((d) => ({ ...d, open: o }))}>
+      <Dialog open={passwordDialog.open} onOpenChange={(o: boolean) => setPasswordDialog((d) => ({ ...d, open: o }))}>
         <DialogContent className="sm:max-w-100">
           <DialogHeader>
-            <DialogTitle>{t('dialog.password.title', { username: user.username })}</DialogTitle>
+            <DialogTitle>{m['admin-users_dialog_password_title']({ username: user.username })}</DialogTitle>
           </DialogHeader>
           <form onSubmit={(e) => { e.preventDefault(); startTransition(async () => {
             try {
               await resetUserPasswordFn({ data: { userId: user.id, newPassword: passwordDialog.value } })
-              toast.success(t('toast.passwordReset'))
+              toast.success(m['admin-users_toast_passwordReset']())
               setPasswordDialog((d) => ({ ...d, open: false, value: '' }))
-            } catch { toast.error(t('toast.resetFailed')) }
+            } catch { toast.error(m['admin-users_toast_resetFailed']()) }
           })}}>
             <div className="py-4">
-              <Label>{t('dialog.password.newPassword')}</Label>
-              <Input type="password" required value={passwordDialog.value} onChange={(e) => setPasswordDialog((d) => ({ ...d, value: e.target.value }))} />
+              <Label>{m['admin-users_dialog_password_newPassword']()}</Label>
+              <Input type="password" required value={passwordDialog.value} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setPasswordDialog((d) => ({ ...d, value: e.target.value }))} />
             </div>
             <DialogFooter>
-              <Button type="button" variant="outline" onClick={() => setPasswordDialog((d) => ({ ...d, open: false }))}>{t('common:button.cancel')}</Button>
-              <Button type="submit" disabled={isPending}>{t('dialog.password.confirm')}</Button>
+              <Button type="button" variant="outline" onClick={() => setPasswordDialog((d) => ({ ...d, open: false }))}>{m.common_button_cancel()}</Button>
+              <Button type="submit" disabled={isPending}>{m['admin-users_dialog_password_confirm']()}</Button>
             </DialogFooter>
           </form>
         </DialogContent>
       </Dialog>
 
-      <AlertDialog open={deleteDialog.open} onOpenChange={(o) => setDeleteDialog((d) => ({ ...d, open: o }))}>
+      <AlertDialog open={deleteDialog.open} onOpenChange={(o: boolean) => setDeleteDialog((d) => ({ ...d, open: o }))}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>{t('dialog.delete.title')}</AlertDialogTitle>
+            <AlertDialogTitle>{m['admin-users_dialog_delete_title']()}</AlertDialogTitle>
             <AlertDialogDescription>
-              {t('dialog.delete.description', { username: user.username })}
+              {m['admin-users_dialog_delete_description']({ username: user.username })}
             </AlertDialogDescription>
           </AlertDialogHeader>
-          <Input placeholder={t('dialog.delete.placeholder')} value={deleteDialog.confirmName} onChange={(e) => setDeleteDialog((d) => ({ ...d, confirmName: e.target.value }))} />
+          <Input placeholder={m['admin-users_dialog_delete_placeholder']()} value={deleteDialog.confirmName} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setDeleteDialog((d) => ({ ...d, confirmName: e.target.value }))} />
           <AlertDialogFooter>
-            <AlertDialogCancel>{t('common:button.cancel')}</AlertDialogCancel>
+            <AlertDialogCancel>{m.common_button_cancel()}</AlertDialogCancel>
             <AlertDialogAction
               disabled={deleteDialog.confirmName !== user.username || isPending}
               onClick={() => startTransition(async () => {
                 try {
                   await deleteUserFn({ data: { userId: user.id } })
-                  toast.success(t('toast.userDeleted'))
+                  toast.success(m['admin-users_toast_userDeleted']())
                   window.location.href = '/users'
-                } catch { toast.error(t('toast.deleteFailed')) }
+                } catch { toast.error(m['admin-users_toast_deleteFailed']()) }
               })}
-            >{t('dialog.delete.confirm')}</AlertDialogAction>
+            >{m['admin-users_dialog_delete_confirm']()}</AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>

package/src/routes/_nav/users/route.lazy.tsx

@@ -16,8 +16,8 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { Outlet, createLazyFileRoute, useMatches } from '@tanstack/react-router'
+import { m } from '@/paraglide/messages.js'
 import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import { UsersTable } from './-components/users-table'
 import { UserFilters } from '@/components/user/user-filters'
 import { UserCreateDialog } from '@/components/user/user-create-dialog'
@@ -46,7 +46,6 @@ function UsersLayout() {
 }
 
 function UsersPage() {
-  const { t } = useTranslation('admin-users')
   const { items, total } = Route.useLoaderData()
   const { search, role, status } = Route.useSearch()
   const [createOpen, setCreateOpen] = useState(false)
@@ -55,12 +54,12 @@ function UsersPage() {
     <div className="space-y-4 p-6">
       <div className="flex items-center justify-between">
         <div>
-          <h2 className="text-xl font-bold">{t('page.title')}</h2>
-          <p className="text-sm text-muted-foreground">{t('page.total', { total })}</p>
+          <h2 className="text-xl font-bold">{m['admin-users_page_title']()}</h2>
+          <p className="text-sm text-muted-foreground">{m['admin-users_page_total']({ total })}</p>
         </div>
         <Button onClick={() => setCreateOpen(true)}>
           <PlusIcon className="mr-1 h-4 w-4" />
-          {t('page.createUser')}
+          {m['admin-users_page_createUser']()}
         </Button>
       </div>
 

package/src/routes/setup/route.lazy.tsx

@@ -16,8 +16,8 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { createLazyFileRoute, useNavigate } from '@tanstack/react-router'
+import { m } from '@/paraglide/messages.js'
 import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import { toast } from '@/components/ui/sonner'
 import { Loader2, ShieldCheck, User, Mail, Database } from 'lucide-react'
 import { AuthLayout, AuthLayoutLeft, AuthLayoutRight } from '@/components/auth/auth-layout'
@@ -33,7 +33,6 @@ export const Route = createLazyFileRoute('/setup')({
 })
 
 function SetupPage() {
-  const { t } = useTranslation('common')
   const navigate = useNavigate()
   const [username, setUsername] = useState('')
   const [email, setEmail] = useState('')
@@ -42,30 +41,30 @@ function SetupPage() {
   const [loading, setLoading] = useState(false)
 
   const setupBrandFeatures = [
-    { icon: ShieldCheck, label: t('setup.brandFeatures.superAdmin.label'), desc: t('setup.brandFeatures.superAdmin.desc') },
-    { icon: Database, label: t('setup.brandFeatures.dataMgmt.label'), desc: t('setup.brandFeatures.dataMgmt.desc') },
-    { icon: User, label: t('setup.brandFeatures.accountSecurity.label'), desc: t('setup.brandFeatures.accountSecurity.desc') },
+    { icon: ShieldCheck, label: m.common_setup_brandFeatures_superAdmin_label(), desc: m.common_setup_brandFeatures_superAdmin_desc() },
+    { icon: Database, label: m.common_setup_brandFeatures_dataMgmt_label(), desc: m.common_setup_brandFeatures_dataMgmt_desc() },
+    { icon: User, label: m.common_setup_brandFeatures_accountSecurity_label(), desc: m.common_setup_brandFeatures_accountSecurity_desc() },
   ]
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
 
     if (!username || !email || !password) {
-      toast.error(t('setup.validation.fillAllFields'))
+      toast.error(m.common_setup_validation_fillAllFields())
       return
     }
     if (password !== confirmPassword) {
-      toast.error(t('setup.validation.passwordMismatch'))
+      toast.error(m.common_setup_validation_passwordMismatch())
       return
     }
 
     setLoading(true)
     try {
       await setupAdminFn({ data: { username, email, password } })
-      toast.success(t('setup.success'))
+      toast.success(m.common_setup_success())
       setTimeout(() => navigate({ to: '/login' }), 500)
     } catch (err) {
-      toast.error(err instanceof Error ? err.message : t('setup.error'))
+      toast.error(err instanceof Error ? err.message : m.common_setup_error())
     } finally {
       setLoading(false)
     }
@@ -74,20 +73,20 @@ function SetupPage() {
   return (
     <AuthLayout>
       <AuthLayoutLeft>
-        <AuthHeader title={t('setup.form.title')} subtitle={t('setup.form.subtitle')} />
+        <AuthHeader title={m.common_setup_form_title()} subtitle={m.common_setup_form_subtitle()} />
         <form onSubmit={handleSubmit} className="space-y-6">
-          <IconInput icon={User} label={t('setup.form.username.label')} placeholder={t('setup.form.username.placeholder')} value={username} onChange={(e) => setUsername(e.target.value)} />
-          <IconInput icon={Mail} label={t('setup.form.email.label')} placeholder={t('setup.form.email.placeholder')} value={email} onChange={(e) => setEmail(e.target.value)} />
-          <PasswordInput label={t('setup.form.password.label')} placeholder={t('setup.form.password.placeholder')} value={password} onChange={(e) => setPassword(e.target.value)} />
-          <PasswordInput label={t('setup.form.confirmPassword.label')} placeholder={t('setup.form.confirmPassword.placeholder')} value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} />
+          <IconInput icon={User} label={m.common_setup_form_username_label()} placeholder={m.common_setup_form_username_placeholder()} value={username} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setUsername(e.target.value)} />
+          <IconInput icon={Mail} label={m.common_setup_form_email_label()} placeholder={m.common_setup_form_email_placeholder()} value={email} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setEmail(e.target.value)} />
+          <PasswordInput label={m.common_setup_form_password_label()} placeholder={m.common_setup_form_password_placeholder()} value={password} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setPassword(e.target.value)} />
+          <PasswordInput label={m.common_setup_form_confirmPassword_label()} placeholder={m.common_setup_form_confirmPassword_placeholder()} value={confirmPassword} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setConfirmPassword(e.target.value)} />
           <Button type="submit" className="w-full" disabled={loading}>
             {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-            {loading ? t('setup.form.loading') : t('setup.form.submit')}
+            {loading ? m.common_setup_form_loading() : m.common_setup_form_submit()}
           </Button>
         </form>
       </AuthLayoutLeft>
       <AuthLayoutRight>
-        <AuthBrandPanel title={t('setup.brand.title')} subtitle={t('setup.brand.subtitle')} features={setupBrandFeatures} />
+        <AuthBrandPanel title={m.common_setup_brand_title()} subtitle={m.common_setup_brand_subtitle()} features={setupBrandFeatures} />
       </AuthLayoutRight>
     </AuthLayout>
   )

package/src/start.ts

@@ -72,11 +72,11 @@ const apiCorsMiddleware = createMiddleware().server(async ({ request, next }: an
 if (typeof process !== 'undefined' && process.versions?.node && process.env.NODE_ENV !== 'test') {
   initErrorCollector()
 
-  getHealthCheckEnabled().then((enabled) => {
+  getHealthCheckEnabled().then((enabled: boolean) => {
     if (enabled) {
       startHealthCheckTimer(30_000)
     }
-  }).catch((e) => console.error('[HealthCheckInit]', e))
+  }).catch((e: unknown) => console.error('[HealthCheckInit]', e))
 }
 
 export const startInstance = createStart(() => ({

package/src/lib/i18n/client.ts

@@ -1,32 +0,0 @@
-// SPDX-License-Identifier: AGPL-3.0-or-later
-import i18next, { type i18n as I18nInstance } from 'i18next'
-import { initReactI18next } from 'react-i18next'
-import LanguageDetector from 'i18next-browser-languagedetector'
-import { resources, fallbackLng, defaultNs, supportedLngs } from './config'
-
-let clientI18n: I18nInstance | null = null
-
-export function getClientI18n(): I18nInstance {
-  if (!clientI18n) {
-    clientI18n = i18next.createInstance()
-    clientI18n
-      .use(initReactI18next)
-      .use(LanguageDetector)
-      .init({
-        fallbackLng,
-        defaultNS: defaultNs,
-        supportedLngs: [...supportedLngs],
-        resources,
-        interpolation: { escapeValue: false },
-        react: { useSuspense: false },
-        detection: {
-          order: ['querystring', 'cookie', 'localStorage', 'navigator'],
-          lookupQuerystring: 'lng',
-          lookupCookie: 'lng',
-          lookupLocalStorage: 'lng',
-          caches: ['cookie', 'localStorage'],
-        },
-      })
-  }
-  return clientI18n
-}