@ossy/analytics 1.10.2 → 3.0.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ossy/analytics",
   "description": "Analytics module — workspace analytics for website traffic",
-  "version": "1.10.2",
+  "version": "3.0.1",
   "type": "module",
   "main": "./src/index.js",
   "module": "./src/index.js",
@@ -27,5 +27,5 @@
     "@ossy/sdk-react": "*",
     "react": "*"
   },
-  "gitHead": "2b8745d57fee8b6c08787e2755b4df489291a5cd"
+  "gitHead": "4a70ec216448680d2fddc57b2a8a0077489720ae"
 }

package/src/Definition.js

@@ -3,5 +3,5 @@ export const Definition = {
   title: 'Analytics',
   description: 'Workspace analytics for website traffic and top performing pages.',
   icon: 'chart',
-  statuses: ['beta'],
+  status: ['beta'],
 }

package/src/analytics.page.jsx

@@ -1,8 +1,8 @@
 import React, { useMemo } from 'react'
-import { GetWorkspace } from '@ossy/workspaces'
-import { useSdk } from '@ossy/sdk-react'
-import { Text, Title, View, useLocale } from '@ossy/design-system'
+import { Text, View, Page, useLocale } from '@ossy/design-system'
 import { usePageViewStats } from './usePageViewStats.js'
+import { useSdk } from '@ossy/sdk-react'
+import { GetWorkspace } from '@ossy/workspaces'
 
 export const metadata = {
   id: 'analytics/home',
@@ -21,7 +21,7 @@ function SummaryCard({ label, value }) {
       style={{ border: '1px solid var(--separator)' }}
     >
       <Text variant="small" style={{ opacity: 0.75 }}>{label}</Text>
-      <Title variant="secondary">{value}</Title>
+      <Text variant="heading-secondary" as="h2">{value}</Text>
     </View>
   )
 }
@@ -43,12 +43,11 @@ export default function AnalyticsPage() {
   })
 
   return (
-    <View inset="l" gap="l" style={{ width: '100%', boxSizing: 'border-box' }}>
-      <View gap="s">
-        <Title>{t('analytics.home.title')}</Title>
-        <Text>{t('analytics.home.description')}</Text>
-      </View>
-
+    <Page
+      title="analytics.home.title"
+      description="analytics.home.description"
+    >
+      <View gap="m">
       {status === 'loading' && (
         <View surface="primary" roundness="m" inset="m">
           <Text>{t('analytics.home.loading')}</Text>
@@ -77,8 +76,8 @@ export default function AnalyticsPage() {
               gap="s"
               style={{ border: '1px solid var(--separator)', flex: 1 }}
             >
-              <Title variant="secondary">{t('analytics.home.topPaths')}</Title>
-              {topPaths.length === 0 && <Text variant="small">{t('analytics.home.noPageViews')}</Text>}
+              <Text variant="heading-secondary" as="h2" text="analytics.home.topPaths" />
+              {topPaths.length === 0 && <Text variant="small" text="analytics.home.noPageViews" />}
               {topPaths.map((item) => (
                 <View key={item.path || 'unknown'} layout="row" justifyContent="space-between">
                   <Text variant="small">{item.path || t('analytics.home.unknownPath')}</Text>
@@ -94,8 +93,8 @@ export default function AnalyticsPage() {
               gap="s"
               style={{ border: '1px solid var(--separator)', flex: 1 }}
             >
-              <Title variant="secondary">{t('analytics.home.dailyPageViews')}</Title>
-              {dailyViews.length === 0 && <Text variant="small">{t('analytics.home.noDailyData')}</Text>}
+              <Text variant="heading-secondary" as="h2" text="analytics.home.dailyPageViews" />
+              {dailyViews.length === 0 && <Text variant="small" text="analytics.home.noDailyData" />}
               {dailyViews.map((item) => (
                 <View key={item.date} layout="row" justifyContent="space-between">
                   <Text variant="small">{item.date}</Text>
@@ -106,6 +105,7 @@ export default function AnalyticsPage() {
           </View>
         </>
       )}
-    </View>
+      </View>
+    </Page>
   )
 }