strapi-plugin-magic-sessionmanager 4.0.0 → 4.0.2

package/README.md

@@ -136,7 +136,7 @@ npm run develop
 3. Click it!
 4. You'll see the dashboard (like the screenshot above)
 
-**That's it! You're done!** 🎉
+**That's it! You're done!**
 
 ---
 
@@ -621,4 +621,4 @@ Language automatically follows your Strapi admin interface setting.
 
 ---
 
-**Made with ❤️ for Strapi v5**
+**Made for Strapi v5**

package/admin/src/components/LicenseGuard.jsx

@@ -407,12 +407,12 @@ const LicenseGuard = ({ children }) => {
               >
                 <Typography variant="omega" style={{ fontSize: '13px', lineHeight: '1.6' }}>
                   {useExistingKey 
-                    ? '🔑 Enter your email and license key to activate.'
+                    ? 'Enter your email and license key to activate.'
                     : useAutoCreate && adminUser && adminUser.email
-                    ? `✨ Click "Activate" to auto-create a license with your account (${adminUser.email})`
+                    ? `Click "Activate" to auto-create a license with your account (${adminUser.email})`
                     : useAutoCreate
-                    ? '✨ Click "Activate" to auto-create a license with your admin account'
-                    : '💡 A license will be created with the details below.'
+                    ? 'Click "Activate" to auto-create a license with your admin account'
+                    : 'A license will be created with the details below.'
                   }
                 </Typography>
               </Box>
@@ -476,10 +476,10 @@ const LicenseGuard = ({ children }) => {
                     Ready to activate with your account:
                   </Typography>
                   <Typography variant="pi" style={{ marginBottom: '4px', display: 'block' }}>
-                    👤 {adminUser.firstname || 'Admin'} {adminUser.lastname || 'User'}
+                    {adminUser.firstname || 'Admin'} {adminUser.lastname || 'User'}
                   </Typography>
                   <Typography variant="pi" textColor="neutral600">
-                    📧 {adminUser.email || 'Loading...'}
+                    {adminUser.email || 'Loading...'}
                   </Typography>
                 </Box>
               ) : (

package/admin/src/components/OnlineUsersWidget.jsx

@@ -1,14 +1,18 @@
 import { useState, useEffect, useCallback } from 'react';
+import { useIntl } from 'react-intl';
 import { Box, Typography, Flex, Grid } from '@strapi/design-system';
 import { Check, Cross, Clock, User, Monitor } from '@strapi/icons';
 import { useFetchClient } from '@strapi/strapi/admin';
+import { getTranslation } from '../utils/getTranslation';
 
 /**
  * Online Users Widget - Dashboard widget showing user activity statistics
  * Styled exactly like Project Statistics
  */
 const OnlineUsersWidget = () => {
+  const { formatMessage } = useIntl();
   const { get } = useFetchClient();
+  const t = (id, defaultMessage, values) => formatMessage({ id: getTranslation(id), defaultMessage }, values);
   const [stats, setStats] = useState({
     onlineNow: 0,
     offline: 0,
@@ -137,7 +141,7 @@ const OnlineUsersWidget = () => {
   if (loading) {
     return (
       <Box padding={4}>
-        <Typography variant="pi" textColor="neutral600">Loading...</Typography>
+        <Typography variant="pi" textColor="neutral600">{t('common.loading', 'Loading...')}</Typography>
       </Box>
     );
   }
@@ -149,7 +153,7 @@ const OnlineUsersWidget = () => {
           <Grid.Item col={1}>
             <StatCard 
               icon={Check} 
-              label="Online Now" 
+              label={t('widget.stats.onlineNow', 'Online Now')}
               value={stats.onlineNow}
               color="success"
             />
@@ -158,7 +162,7 @@ const OnlineUsersWidget = () => {
           <Grid.Item col={1}>
             <StatCard 
               icon={Cross} 
-              label="Offline" 
+              label={t('widget.stats.offline', 'Offline')}
               value={stats.offline}
               color="neutral"
             />
@@ -167,7 +171,7 @@ const OnlineUsersWidget = () => {
           <Grid.Item col={1}>
             <StatCard 
               icon={Clock} 
-              label="Last 15 min" 
+              label={t('widget.stats.last15min', 'Last 15 min')}
               value={stats.last15min}
               color="primary"
             />
@@ -176,7 +180,7 @@ const OnlineUsersWidget = () => {
           <Grid.Item col={1}>
             <StatCard 
               icon={Clock} 
-              label="Last 30 min" 
+              label={t('widget.stats.last30min', 'Last 30 min')}
               value={stats.last30min}
               color="secondary"
             />
@@ -185,7 +189,7 @@ const OnlineUsersWidget = () => {
           <Grid.Item col={1}>
             <StatCard 
               icon={User} 
-              label="Total Users" 
+              label={t('widget.stats.totalUsers', 'Total Users')}
               value={stats.totalUsers}
               color="neutral"
             />
@@ -194,7 +198,7 @@ const OnlineUsersWidget = () => {
           <Grid.Item col={1}>
             <StatCard 
               icon={Cross} 
-              label="Blocked" 
+              label={t('widget.stats.blocked', 'Blocked')}
               value={stats.blocked}
               color="danger"
             />

package/admin/src/components/SessionDetailModal.jsx

@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 import {
   Modal,
@@ -25,6 +26,7 @@ import { useFetchClient, useNotification } from '@strapi/strapi/admin';
 import parseUserAgent from '../utils/parseUserAgent';
 import pluginId from '../pluginId';
 import { useLicense } from '../hooks/useLicense';
+import { getTranslation } from '../utils/getTranslation';
 
 const TwoColumnGrid = styled.div`
   display: grid;
@@ -53,6 +55,7 @@ const Section = styled(Box)`
 `;
 
 const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
+  const { formatMessage } = useIntl();
   const { get, post } = useFetchClient();
   const { toggleNotification } = useNotification();
   const { isPremium, loading: licenseLoading } = useLicense();
@@ -60,6 +63,7 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
   const [showUserAgent, setShowUserAgent] = useState(false);
   const [geoData, setGeoData] = useState(null);
   const [geoLoading, setGeoLoading] = useState(false);
+  const t = (id, defaultMessage, values) => formatMessage({ id: getTranslation(id), defaultMessage }, values);
 
   if (!session) return null;
 
@@ -82,7 +86,7 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
       console.error('[SessionDetailModal] Error fetching geolocation:', err);
       // Fallback to mock data if API fails
       setGeoData({
-        country_flag: '🌍',
+        country_flag: '',
         country: 'Unknown',
         city: 'Unknown',
         timezone: 'Unknown',
@@ -98,7 +102,7 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
   
   // Use real data if available, otherwise fallback
   const premiumData = geoData || {
-    country_flag: '🌍',
+    country_flag: '',
     country: 'Loading...',
     city: 'Loading...',
     timezone: 'Loading...',
@@ -117,7 +121,7 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
   const DeviceIcon = getDeviceIcon(deviceInfo.device);
 
   const handleTerminate = async () => {
-    if (!confirm('Are you sure you want to terminate this session?')) {
+    if (!confirm(t('modal.confirm.terminate', 'Are you sure you want to terminate this session?'))) {
       return;
     }
 
@@ -127,7 +131,7 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
       
       toggleNotification({
         type: 'success',
-        message: 'Session terminated successfully',
+        message: t('notifications.success.terminated', 'Session terminated successfully'),
       });
       
       onSessionTerminated();
@@ -136,7 +140,7 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
       console.error('[SessionDetailModal] Error:', err);
       toggleNotification({
         type: 'danger',
-        message: 'Failed to terminate session',
+        message: t('notifications.error.terminate', 'Failed to terminate session'),
       });
     } finally {
       setTerminating(false);
@@ -188,10 +192,10 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
             </Box>
             <Flex direction="column" alignItems="flex-start">
               <Typography variant="beta" fontWeight="bold">
-                Session Details
+                {t('modal.title', 'Session Details')}
               </Typography>
               <Typography variant="pi" textColor="neutral600">
-                ID: {session.id}
+                {t('modal.id', 'ID: {id}', { id: session.id })}
               </Typography>
             </Flex>
           </Flex>
@@ -207,7 +211,7 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
                 size="M"
                 style={{ fontSize: '14px', padding: '8px 20px', fontWeight: '600' }}
               >
-                {isOnline ? '🟢 ONLINE' : '⚫ OFFLINE'}
+                {isOnline ? t('modal.status.online', 'ONLINE') : t('modal.status.offline', 'OFFLINE')}
               </Badge>
             </Flex>
 
@@ -220,24 +224,24 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
                 {/* User Information */}
                 <Section>
                   <SectionTitle>
-                    👤 User
+                    {t('modal.section.user', 'User')}
                   </SectionTitle>
                   
-                  <DetailRow compact icon={Check} label="Username" value={session.user?.username || 'N/A'} />
-                  <DetailRow compact icon={Information} label="Email" value={session.user?.email || 'N/A'} />
-                  <DetailRow compact icon={Information} label="User ID" value={session.user?.id || 'N/A'} />
+                  <DetailRow compact icon={Check} label={t('modal.user.username', 'Username')} value={session.user?.username || t('modal.user.na', 'N/A')} />
+                  <DetailRow compact icon={Information} label={t('modal.user.email', 'Email')} value={session.user?.email || t('modal.user.na', 'N/A')} />
+                  <DetailRow compact icon={Information} label={t('modal.user.id', 'User ID')} value={session.user?.id || t('modal.user.na', 'N/A')} />
                 </Section>
 
                 {/* Device Information */}
                 <Section>
                   <SectionTitle>
-                    💻 Device
+                    {t('modal.section.device', 'Device')}
                   </SectionTitle>
                   
-                  <DetailRow compact icon={DeviceIcon} label="Device" value={deviceInfo.device} />
-                  <DetailRow compact icon={Monitor} label="Browser" value={`${deviceInfo.browser} ${deviceInfo.browserVersion || ''}`} />
-                  <DetailRow compact icon={Server} label="OS" value={deviceInfo.os} />
-                  <DetailRow compact icon={Information} label="IP" value={session.ipAddress} />
+                  <DetailRow compact icon={DeviceIcon} label={t('modal.device.device', 'Device')} value={deviceInfo.device} />
+                  <DetailRow compact icon={Monitor} label={t('modal.device.browser', 'Browser')} value={`${deviceInfo.browser} ${deviceInfo.browserVersion || ''}`} />
+                  <DetailRow compact icon={Server} label={t('modal.device.os', 'OS')} value={deviceInfo.os} />
+                  <DetailRow compact icon={Information} label={t('modal.device.ip', 'IP')} value={session.ipAddress} />
                 </Section>
               </Box>
 
@@ -245,13 +249,13 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
               <Box>
                 <Section>
                   <SectionTitle>
-                    ⏱️ Timeline
+                    {t('modal.section.timeline', 'Timeline')}
                   </SectionTitle>
                 
                 <DetailRow 
                   compact 
                   icon={Clock} 
-                  label="Login" 
+                  label={t('modal.timeline.login', 'Login')}
                   value={new Date(session.loginTime).toLocaleString('de-DE', { 
                     day: '2-digit', 
                     month: 'short', 
@@ -262,7 +266,7 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
                 <DetailRow 
                   compact 
                   icon={Clock} 
-                  label="Last Active" 
+                  label={t('modal.timeline.lastActive', 'Last Active')}
                   value={new Date(session.lastActive || session.loginTime).toLocaleString('de-DE', { 
                     day: '2-digit', 
                     month: 'short', 
@@ -273,14 +277,14 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
                 <DetailRow 
                   compact 
                   icon={Clock} 
-                  label="Idle Time" 
-                  value={`${session.minutesSinceActive} min`} 
+                  label={t('modal.timeline.idleTime', 'Idle Time')}
+                  value={t('modal.timeline.minutes', '{minutes} min', { minutes: session.minutesSinceActive })}
                 />
                 {session.logoutTime && (
                   <DetailRow 
                     compact 
                     icon={Cross} 
-                    label="Logout" 
+                    label={t('modal.timeline.logout', 'Logout')}
                     value={new Date(session.logoutTime).toLocaleString('de-DE', { 
                       day: '2-digit', 
                       month: 'short', 
@@ -297,13 +301,13 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
             {isPremium ? (
               <Section>
                 <SectionTitle>
-                  🌍 Location & Security
+                  {t('modal.section.security', 'Location and Security')}
                 </SectionTitle>
                 
                 {geoLoading ? (
                   <Box padding={4} style={{ textAlign: 'center' }}>
                     <Typography variant="pi" textColor="neutral600">
-                      Loading location data...
+                      {t('modal.security.loading', 'Loading location data...')}
                     </Typography>
                   </Box>
                 ) : (
@@ -312,30 +316,30 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
                       <DetailRow 
                         compact 
                         icon={Earth} 
-                        label="Country" 
-                        value={`${premiumData.country_flag || '🌍'} ${premiumData.country}`} 
+                        label={t('modal.security.country', 'Country')}
+                        value={`${premiumData.country_flag || ''} ${premiumData.country}`.trim()} 
                       />
-                      <DetailRow compact icon={Earth} label="City" value={premiumData.city} />
-                      <DetailRow compact icon={Clock} label="Timezone" value={premiumData.timezone} />
+                      <DetailRow compact icon={Earth} label={t('modal.security.city', 'City')} value={premiumData.city} />
+                      <DetailRow compact icon={Clock} label={t('modal.security.timezone', 'Timezone')} value={premiumData.timezone} />
                     </Box>
                     <Box>
                       <DetailRow 
                         compact 
                         icon={Shield} 
-                        label="Security" 
+                        label={t('modal.security.score', 'Security')}
                         value={`${premiumData.securityScore}/100 (${premiumData.riskLevel})`} 
                       />
                       <DetailRow 
                         compact 
                         icon={Shield} 
-                        label="VPN" 
-                        value={premiumData.isVpn ? '⚠️ Yes' : '✅ No'} 
+                        label={t('modal.security.vpn', 'VPN')}
+                        value={premiumData.isVpn ? t('modal.security.vpnWarning', '[WARNING] Yes') : t('modal.security.no', 'No')} 
                       />
                       <DetailRow 
                         compact 
                         icon={Shield} 
-                        label="Proxy" 
-                        value={premiumData.isProxy ? '⚠️ Yes' : '✅ No'} 
+                        label={t('modal.security.proxy', 'Proxy')}
+                        value={premiumData.isProxy ? t('modal.security.vpnWarning', '[WARNING] Yes') : t('modal.security.no', 'No')} 
                       />
                     </Box>
                   </TwoColumnGrid>
@@ -355,10 +359,10 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
                   <Flex direction="column" alignItems="center" gap={3}>
                     <Crown style={{ width: '40px', height: '40px', color: '#d97706' }} />
                     <Typography variant="beta" style={{ color: '#92400e', fontWeight: '700' }}>
-                      🌍 Location & Security Analysis
+                      {t('modal.premium.title', 'Location and Security Analysis')}
                     </Typography>
                     <Typography variant="omega" style={{ color: '#78350f', fontSize: '14px', lineHeight: '1.6' }}>
-                      Unlock premium features to get IP geolocation, security scoring, and VPN/Proxy detection for every session
+                      {t('modal.premium.description', 'Unlock premium features to get IP geolocation, security scoring, and VPN/Proxy detection for every session')}
                     </Typography>
                     <Button
                       variant="secondary"
@@ -373,7 +377,7 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
                         boxShadow: '0 4px 12px rgba(245, 158, 11, 0.3)',
                       }}
                     >
-                      Upgrade to Premium
+                      {t('modal.premium.upgrade', 'Upgrade to Premium')}
                     </Button>
                   </Flex>
                 </Box>
@@ -384,7 +388,7 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
             <Section>
               <Flex justifyContent="space-between" alignItems="center" style={{ marginBottom: '12px' }}>
                 <SectionTitle style={{ marginBottom: 0, paddingBottom: 0, border: 'none' }}>
-                  🔧 Technical Details
+                  {t('modal.section.technical', 'Technical Details')}
                 </SectionTitle>
                 <Button
                   variant="tertiary"
@@ -392,7 +396,7 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
                   onClick={() => setShowUserAgent(!showUserAgent)}
                   style={{ fontSize: '12px' }}
                 >
-                  {showUserAgent ? '▲ Hide Details' : '▼ Show Details'}
+                  {showUserAgent ? `▲ ${t('modal.technical.hide', 'Hide Details')}` : `▼ ${t('modal.technical.show', 'Show Details')}`}
                 </Button>
               </Flex>
               
@@ -423,7 +427,7 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
         <Modal.Footer>
           <Flex justifyContent="space-between" style={{ width: '100%' }}>
             <Button onClick={onClose} variant="tertiary">
-              Close
+              {t('modal.actions.close', 'Close')}
             </Button>
             <Button 
               onClick={handleTerminate}
@@ -432,7 +436,7 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
               loading={terminating}
               startIcon={<Cross />}
             >
-              Terminate Session
+              {t('modal.actions.terminate', 'Terminate Session')}
             </Button>
           </Flex>
         </Modal.Footer>

package/admin/src/components/SessionInfoCard.jsx

@@ -76,11 +76,11 @@ const SessionInfoCard = ({ id, model }) => {
           </Typography>
           {isOnline ? (
             <Badge active backgroundColor="success500">
-              🟢 Online
+              Online
             </Badge>
           ) : (
             <Badge backgroundColor="neutral150">
-              ⚫ Offline
+              Offline
             </Badge>
           )}
         </Flex>
@@ -110,7 +110,7 @@ const SessionInfoCard = ({ id, model }) => {
                 marginBottom={2}
               >
                 <Typography variant="pi" textColor="neutral800">
-                  📱 {session.ipAddress}
+                  IP: {session.ipAddress}
                 </Typography>
                 <Typography variant="pi" textColor="neutral600" fontSize="11px">
                   {new Date(session.loginTime).toLocaleString()}

package/admin/src/components/SessionInfoPanel.jsx

@@ -1,22 +1,27 @@
 import { useState, useEffect } from 'react';
+import { useIntl } from 'react-intl';
 import { Box, Typography, Flex, Button, Badge, Divider } from '@strapi/design-system';
 import { Check, Cross, Monitor, Phone, Server, Clock } from '@strapi/icons';
 import { useFetchClient, useNotification } from '@strapi/strapi/admin';
 import parseUserAgent from '../utils/parseUserAgent';
+import { getTranslation } from '../utils/getTranslation';
 
 /**
  * Session Info Panel - Native Strapi design
  * Clean, professional sidebar panel for Content Manager
  */
 const SessionInfoPanel = ({ documentId, model, document }) => {
+  const { formatMessage } = useIntl();
   const [sessions, setSessions] = useState([]);
   const [loading, setLoading] = useState(true);
   const [isBlocked, setIsBlocked] = useState(false);
   const [actionLoading, setActionLoading] = useState(false);
   const { get, post: postRequest } = useFetchClient();
   const { toggleNotification } = useNotification();
+  const t = (id, defaultMessage, values) => formatMessage({ id: getTranslation(id), defaultMessage }, values);
 
-  const userId = document?.id || documentId;
+  // Strapi v5: Use documentId (string UUID) instead of numeric id
+  const userId = document?.documentId || documentId;
 
   useEffect(() => {
     if (model !== 'plugin::users-permissions.user' || !userId) {
@@ -52,14 +57,14 @@ const SessionInfoPanel = ({ documentId, model, document }) => {
       if (response.data?.success) {
         toggleNotification({
           type: 'success',
-          message: 'All sessions terminated successfully',
+          message: t('notifications.success.terminatedAll', 'All sessions terminated successfully'),
         });
         setSessions([]);
       }
     } catch (error) {
       toggleNotification({
         type: 'warning',
-        message: 'Failed to terminate sessions',
+        message: t('notifications.error.terminateAll', 'Failed to terminate sessions'),
       });
       console.error('[SessionInfoPanel] Logout all error:', error);
     } finally {
@@ -80,7 +85,9 @@ const SessionInfoPanel = ({ documentId, model, document }) => {
         
         toggleNotification({
           type: 'success',
-          message: newBlockedStatus ? 'User blocked successfully' : 'User unblocked successfully',
+          message: newBlockedStatus 
+            ? t('notifications.success.blocked', 'User blocked successfully') 
+            : t('notifications.success.unblocked', 'User unblocked successfully'),
         });
         
         if (newBlockedStatus) {
@@ -90,7 +97,7 @@ const SessionInfoPanel = ({ documentId, model, document }) => {
     } catch (error) {
       toggleNotification({
         type: 'warning',
-        message: 'Failed to update user status',
+        message: t('notifications.error.block', 'Failed to update user status'),
       });
       console.error('[SessionInfoPanel] Toggle block error:', error);
     } finally {
@@ -111,10 +118,10 @@ const SessionInfoPanel = ({ documentId, model, document }) => {
 
   if (loading) {
     return {
-      title: 'Session Info',
+      title: t('panel.title', 'Session Info'),
       content: (
         <Box padding={4} background="neutral0">
-          <Typography variant="pi" textColor="neutral600">Loading...</Typography>
+          <Typography variant="pi" textColor="neutral600">{t('panel.loading', 'Loading...')}</Typography>
         </Box>
       ),
     };
@@ -123,7 +130,7 @@ const SessionInfoPanel = ({ documentId, model, document }) => {
   const isOnline = sessions.length > 0;
 
   return {
-    title: 'Session Info',
+    title: t('panel.title', 'Session Info'),
     content: (
       <Box style={{ width: '100%' }}>
         <Flex direction="column" gap={4} alignItems="stretch">
@@ -144,10 +151,10 @@ const SessionInfoPanel = ({ documentId, model, document }) => {
               size="M"
               style={{ fontSize: '14px', padding: '6px 12px' }}
             >
-              {isOnline ? '🟢 ACTIVE' : '⚫ OFFLINE'}
+              {isOnline ? t('panel.status.active', 'ACTIVE') : t('panel.status.offline', 'OFFLINE')}
             </Badge>
             <Typography variant="omega" fontWeight="semiBold" textColor={isOnline ? 'success700' : 'neutral700'}>
-              {sessions.length} active session{sessions.length !== 1 ? 's' : ''}
+              {t('panel.sessions.count', '{count} active session{count, plural, one {} other {s}}', { count: sessions.length })}
             </Typography>
           </Flex>
         </Box>
@@ -160,10 +167,10 @@ const SessionInfoPanel = ({ documentId, model, document }) => {
             hasRadius
           >
             <Typography variant="omega" fontWeight="semiBold" textColor="danger700" marginBottom={1}>
-              User is blocked
+              {t('panel.blocked.title', 'User is blocked')}
             </Typography>
             <Typography variant="pi" textColor="danger600">
-              Authentication disabled
+              {t('panel.blocked.description', 'Authentication disabled')}
             </Typography>
           </Box>
         )}
@@ -176,7 +183,7 @@ const SessionInfoPanel = ({ documentId, model, document }) => {
               letterSpacing: '0.5px',
               fontSize: '12px'
             }}>
-              Active Sessions
+              {t('panel.sessions.title', 'Active Sessions')}
             </Typography>
             
             {sessions.slice(0, 5).map((session) => {
@@ -218,7 +225,7 @@ const SessionInfoPanel = ({ documentId, model, document }) => {
                       textColor="neutral0" 
                       size="S"
                     >
-                      Active
+                      {t('panel.sessions.active', 'Active')}
                     </Badge>
                     
                     {/* Browser & OS */}
@@ -252,7 +259,10 @@ const SessionInfoPanel = ({ documentId, model, document }) => {
                       {/* Show minutes since last activity */}
                       {session.minutesSinceActive !== undefined && session.minutesSinceActive < 60 && (
                         <Typography variant="pi" textColor="success600" fontWeight="semiBold">
-                          Active {session.minutesSinceActive === 0 ? 'now' : `${session.minutesSinceActive} min ago`}
+                          {session.minutesSinceActive === 0 
+                            ? t('panel.sessions.activeNow', 'Active now')
+                            : t('panel.sessions.activeAgo', 'Active {minutes} min ago', { minutes: session.minutesSinceActive })
+                          }
                         </Typography>
                       )}
                   </Flex>
@@ -263,7 +273,7 @@ const SessionInfoPanel = ({ documentId, model, document }) => {
             {sessions.length > 5 && (
               <Box padding={3} background="primary100" hasRadius textAlign="center">
                 <Typography variant="pi" textColor="primary600" fontWeight="semiBold">
-                  +{sessions.length - 5} more session{sessions.length - 5 !== 1 ? 's' : ''}
+                  {t('panel.sessions.more', '+{count} more session{count, plural, one {} other {s}}', { count: sessions.length - 5 })}
                 </Typography>
               </Box>
             )}
@@ -287,10 +297,10 @@ const SessionInfoPanel = ({ documentId, model, document }) => {
                 💤
               </Typography>
               <Typography variant="omega" fontWeight="semiBold" textColor="neutral700">
-              No active sessions
+              {t('panel.empty.title', 'No active sessions')}
             </Typography>
               <Typography variant="pi" textColor="neutral500" style={{ fontSize: '13px' }}>
-              User has not logged in yet
+              {t('panel.empty.description', 'User has not logged in yet')}
             </Typography>
             </Flex>
           </Box>
@@ -305,7 +315,7 @@ const SessionInfoPanel = ({ documentId, model, document }) => {
             letterSpacing: '0.5px',
             fontSize: '12px'
           }}>
-            Actions
+            {t('panel.actions.title', 'Actions')}
           </Typography>
           
           <Button
@@ -334,7 +344,7 @@ const SessionInfoPanel = ({ documentId, model, document }) => {
               }
             }}
           >
-            Terminate All Sessions
+            {t('panel.actions.terminateAll', 'Terminate All Sessions')}
           </Button>
           
           <Button
@@ -363,7 +373,7 @@ const SessionInfoPanel = ({ documentId, model, document }) => {
               }
             }}
           >
-            {isBlocked ? 'Unblock User' : 'Block User'}
+            {isBlocked ? t('panel.actions.unblockUser', 'Unblock User') : t('panel.actions.blockUser', 'Block User')}
           </Button>
         </Flex>
         </Flex>

package/admin/src/index.js

@@ -34,6 +34,15 @@ export default {
         to: `/settings/${pluginId}`,
       },
       [
+        {
+          intlLabel: {
+            id: `${pluginId}.settings.upgrade`,
+            defaultMessage: 'Upgrade',
+          },
+          id: 'upgrade',
+          to: `/settings/${pluginId}/upgrade`,
+          Component: () => import('./pages/UpgradePage'),
+        },
         {
           intlLabel: {
             id: `${pluginId}.settings.general`,