@burdenoff/microfe-tours 2026.625.2 → 2026.626.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/tours/i18n.js +19 -1
- package/dist/tours/i18n.js.map +1 -1
- package/dist/tours/pages/AnalyticsDashboardPage.js +43 -41
- package/dist/tours/pages/AnalyticsDashboardPage.js.map +1 -1
- package/dist/tours/pages/MediaLibraryPage.js +66 -59
- package/dist/tours/pages/MediaLibraryPage.js.map +1 -1
- package/dist/tours/pages/MyToursPage.js +75 -53
- package/dist/tours/pages/MyToursPage.js.map +1 -1
- package/dist/tours/pages/MyToursProgressPage.js +81 -74
- package/dist/tours/pages/MyToursProgressPage.js.map +1 -1
- package/dist/tours/pages/SchedulerPage.js +78 -78
- package/dist/tours/pages/SchedulerPage.js.map +1 -1
- package/dist/tours/pages/StepEditorPage.js +570 -575
- package/dist/tours/pages/StepEditorPage.js.map +1 -1
- package/dist/tours/pages/SystemAnalyticsPage.js +128 -118
- package/dist/tours/pages/SystemAnalyticsPage.js.map +1 -1
- package/dist/tours/pages/TemplateLibraryPage.js +54 -65
- package/dist/tours/pages/TemplateLibraryPage.js.map +1 -1
- package/dist/tours/pages/TourBuilderPage.js +307 -272
- package/dist/tours/pages/TourBuilderPage.js.map +1 -1
- package/dist/tours/pages/TourPreviewPage.js +114 -122
- package/dist/tours/pages/TourPreviewPage.js.map +1 -1
- package/dist/tours/pages/ToursListPage.js +148 -147
- package/dist/tours/pages/ToursListPage.js.map +1 -1
- package/package.json +2 -2
package/dist/tours/i18n.js
CHANGED
|
@@ -173,7 +173,25 @@ var n = {
|
|
|
173
173
|
"myToursProgress.emptyCompleted": "No completed tours yet.",
|
|
174
174
|
"myToursProgress.emptySkipped": "No skipped tours.",
|
|
175
175
|
"myToursProgress.other": "Other",
|
|
176
|
-
"myToursProgress.emptyOther": "No tours in other states."
|
|
176
|
+
"myToursProgress.emptyOther": "No tours in other states.",
|
|
177
|
+
"myToursProgress.empty": "You haven't started any tours yet. Open My Tours and take a walkthrough — your progress will show up here.",
|
|
178
|
+
"toursList.purpose": "Author and manage the interactive product tours users see in-app — onboarding flows, feature spotlights, and help walkthroughs. Create a tour, add steps that point at real UI elements, then publish it so it appears for the right product, module, and page.",
|
|
179
|
+
"myTours.purpose": "Browse the guided walkthroughs available right here in this product. Take a tour to learn a feature step by step — your progress is saved so you can pick up where you left off.",
|
|
180
|
+
"myToursProgress.purpose": "Track every tour you have interacted with, grouped by status. See what you have completed, what is still in progress, and what you skipped so you know which walkthroughs are left to finish.",
|
|
181
|
+
"templateLibrary.purpose": "Start from a pre-built tour template instead of a blank canvas. Pick an onboarding, feature-announcement, or help template, then customise its steps — a fast way to ship a consistent walkthrough.",
|
|
182
|
+
"tourBuilder.purpose": "Set up a tour: give it a name, choose where it appears (product, module, page) and how it triggers (manually, on first visit, or scheduled). Save it, then add the steps users will walk through.",
|
|
183
|
+
"tourBuilder.nextStepsTitle": "Recommended next steps",
|
|
184
|
+
"tourBuilder.nextStepEditSteps": "Add the steps",
|
|
185
|
+
"tourBuilder.nextStepEditStepsDesc": "Define the tooltips and target elements users will see.",
|
|
186
|
+
"tourBuilder.nextStepPreview": "Preview it",
|
|
187
|
+
"tourBuilder.nextStepPreviewDesc": "Walk through the tour on mobile, tablet, and desktop.",
|
|
188
|
+
"tourBuilder.nextStepSchedule": "Schedule activation",
|
|
189
|
+
"tourBuilder.nextStepScheduleDesc": "Choose when this tour goes live and how often it recurs.",
|
|
190
|
+
"tourBuilder.nextStepAnalytics": "Check analytics",
|
|
191
|
+
"tourBuilder.nextStepAnalyticsDesc": "See views, completion, and drop-off once it is live.",
|
|
192
|
+
"stepEditor.purpose": "Build the actual walkthrough. Each step is a tooltip anchored to a real UI element via a CSS or data-tour selector. Add steps, reorder them, attach media, and set placement so the tour guides users exactly where you intend.",
|
|
193
|
+
"stepEditor.emptyTitle": "No step selected",
|
|
194
|
+
"tourPreview.purpose": "Walk through this tour exactly as your users will, on simulated mobile, tablet, and desktop viewports. Validate that every step finds its target element before you publish."
|
|
177
195
|
};
|
|
178
196
|
function r() {
|
|
179
197
|
let r = t(), i = r.t, a = e((e, t) => {
|
package/dist/tours/i18n.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"i18n.js","names":[],"sources":["../../src/tours/i18n.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\nconst toursTranslationFallbacks = {\n 'stepEditor.addFirstStep': 'Add First Step',\n 'stepEditor.addStep': 'Add Step',\n 'stepEditor.clickAddStep': 'Click \"Add Step\" to create one',\n 'stepEditor.closeSteps': 'Close steps',\n 'stepEditor.content': 'Content',\n 'stepEditor.contentPlaceholder': 'Enter step content or instructions',\n 'stepEditor.createFirstStep': 'Create your first step to get started',\n 'stepEditor.cssSelector': 'CSS Selector',\n 'stepEditor.cssSelectorPlaceholder': \"[data-tour='element-name'] or #id or .class\",\n 'stepEditor.dataTourHint': \"Use data-tour attributes like [data-tour='sidenav'] for best results\",\n 'stepEditor.deleteStep': 'Delete step',\n 'stepEditor.desktopSelector': 'Desktop Selector',\n 'stepEditor.deviceSelectorHint': 'Override the default selector for specific device types',\n 'stepEditor.deviceSpecificSelectors': 'Device-Specific Selectors (Advanced)',\n 'stepEditor.editStep': 'Edit Step',\n 'stepEditor.goBack': 'Go back',\n 'stepEditor.leaveEmptyDefault': 'Leave empty to use default',\n 'stepEditor.mobileSelector': 'Mobile Selector',\n 'stepEditor.noStepSelected': 'No step selected',\n 'stepEditor.noStepsYet': 'No steps yet',\n 'stepEditor.of': 'of',\n 'stepEditor.nextStep': 'Next step',\n 'stepEditor.placementAuto': 'Auto (recommended)',\n 'stepEditor.placementBottom': 'Bottom',\n 'stepEditor.placementCenter': 'Center (modal style)',\n 'stepEditor.placementLeft': 'Left',\n 'stepEditor.placementRight': 'Right',\n 'stepEditor.placementTop': 'Top',\n 'stepEditor.previousStep': 'Previous step',\n 'stepEditor.save': 'Save',\n 'stepEditor.saving': 'Saving...',\n 'stepEditor.selectStepToEdit': 'Select a step from the list to edit it',\n 'stepEditor.stepNumber': 'Step',\n 'stepEditor.steps': 'Steps',\n 'stepEditor.stepsCount': 'steps',\n 'stepEditor.stepsLabel': 'Steps',\n 'stepEditor.stepTitle': 'Step Title',\n 'stepEditor.stepTitlePlaceholder': 'Enter step title',\n 'stepEditor.tabletSelector': 'Tablet Selector',\n 'stepEditor.targetElement': 'target element',\n 'stepEditor.tooltipPlacement': 'Tooltip Placement',\n 'stepEditor.tourFallback': 'Tour',\n 'stepEditor.tourSteps': 'Tour Steps',\n 'stepEditor.untitled': 'Untitled',\n 'templateLibrary.adjustFilters': 'Try adjusting your filters or search query',\n 'templateLibrary.allCategories': 'All Categories',\n 'templateLibrary.categoryCustom': 'Custom',\n 'templateLibrary.categoryFeatureAnnouncement': 'Feature Announcement',\n 'templateLibrary.categoryHelp': 'Help',\n 'templateLibrary.categoryOnboarding': 'Onboarding',\n 'templateLibrary.deleteConfirm': 'Delete this template?',\n 'templateLibrary.deleteTemplate': 'Delete template',\n 'templateLibrary.loading': 'Loading templates...',\n 'templateLibrary.noTemplatesFound': 'No templates found',\n 'templateLibrary.publicOnly': 'Public only',\n 'templateLibrary.searchPlaceholder': 'Search templates...',\n 'templateLibrary.subtitle': 'Browse and use pre-built tour templates',\n 'templateLibrary.times': 'times',\n 'templateLibrary.title': 'Tour Templates',\n 'templateLibrary.useTemplate': 'Use Template',\n 'templateLibrary.usedTimes': 'Used',\n 'tourBuilder.accessDeniedTitle': 'Access Denied',\n 'tourBuilder.analytics': 'Analytics',\n 'tourBuilder.createAndAddSteps': 'Create & Add Steps',\n 'tourBuilder.createAccessDeniedMessage': 'You do not have permission to create tours.',\n 'tourBuilder.editSteps': 'Edit Steps',\n 'tourBuilder.errorTitle': 'Error',\n 'tourBuilder.goBack': 'Go back',\n 'tourBuilder.labelDescription': 'Description',\n 'tourBuilder.labelName': 'Tour Name *',\n 'tourBuilder.labelPriority': 'Priority (1-100)',\n 'tourBuilder.labelProductId': 'Product ID *',\n 'tourBuilder.labelTriggerType': 'Trigger Type',\n 'tourBuilder.loading': 'Loading...',\n 'tourBuilder.preview': 'Preview',\n 'tourBuilder.saving': 'Saving...',\n 'tourBuilder.sectionBasicInfo': 'Basic Information',\n 'tourBuilder.sectionTriggerSettings': 'Trigger Settings',\n 'tourBuilder.seedVibeControls.button': 'Seed VibeControls user tours',\n 'tourBuilder.seedVibeControls.confirm':\n 'This will overwrite the built-in Support, Notifications, and Conversations user tours from the service seed file. Continue?',\n 'tourBuilder.seedVibeControls.description':\n 'Overwrites the built-in Support, Notifications, and Conversations user tours from the service seed file.',\n 'tourBuilder.seedVibeControls.error': 'Failed to seed VibeControls user tours.',\n 'tourBuilder.seedVibeControls.loading': 'Seeding...',\n 'tourBuilder.seedVibeControls.permissionHint':\n 'Requires tour create and update permissions. The service also enforces RBAC when the seed mutation runs.',\n 'tourBuilder.seedVibeControls.result':\n 'Seeded {{totalCount}} tours for {{productId}} in workspace {{workspaceId}}: {{createdCount}} created, {{updatedCount}} updated.',\n 'tourBuilder.seedVibeControls.title': 'Seed VibeControls user tours',\n 'tourBuilder.subtitle': 'Configure tour details and settings',\n 'tourBuilder.titleCreate': 'Create Tour',\n 'tourBuilder.titleEdit': 'Edit Tour',\n 'tourBuilder.triggerAutoAlways': 'Auto (Always)',\n 'tourBuilder.triggerAutoFirstVisit': 'Auto (First Visit)',\n 'tourBuilder.triggerManual': 'Manual',\n 'tourBuilder.triggerOnEvent': 'On Event',\n 'tourBuilder.triggerScheduled': 'Scheduled',\n 'tourBuilder.updateTour': 'Update Tour',\n 'tourBuilder.updateAccessDeniedMessage': 'You do not have permission to update this tour.',\n 'tourBuilder.validationErrorsTitle': 'Validation Errors',\n 'tourPreview.accessDeniedMessage': 'You do not have permission to preview this tour.',\n 'tourPreview.accessDeniedTitle': 'Access Denied',\n 'tourPreview.deviceDesktop': 'Desktop preview',\n 'tourPreview.deviceMobile': 'Mobile preview',\n 'tourPreview.deviceTablet': 'Tablet preview',\n 'tourPreview.finish': 'Finish',\n 'tourPreview.loading': 'Loading tour...',\n 'tourPreview.next': 'Next',\n 'tourPreview.nextFooter': 'Next',\n 'tourPreview.previewSuffix': 'Preview',\n 'tourPreview.previous': 'Previous',\n 'tourPreview.readyHint': 'Click \"Start Preview\" to begin',\n 'tourPreview.readyTitle': 'Preview ready',\n 'tourPreview.startPreview': 'Start Preview',\n 'tourPreview.stepOf': 'Step',\n 'tourPreview.stepOfConnector': 'of',\n 'tourPreview.stopPreview': 'Stop Preview',\n 'tourPreview.validationErrorsTitle': 'Validation Errors',\n 'tourPreview.warningsTitle': 'Warnings',\n 'toursList.accessDeniedMessage': 'You do not have permission to view product tours.',\n 'toursList.accessDeniedTitle': 'Access Denied',\n 'toursList.actionArchive': 'Archive',\n 'toursList.actionDelete': 'Delete',\n 'toursList.actionDuplicate': 'Duplicate',\n 'toursList.actionPublish': 'Publish',\n 'toursList.actionUnpublish': 'Unpublish',\n 'toursList.confirmDelete': 'Are you sure you want to delete this tour?',\n 'toursList.createTour': 'Create Tour',\n 'toursList.editStepsTitle': 'Edit Steps',\n 'toursList.emptySubtitle': 'Create your first tour to get started',\n 'toursList.emptyTitle': 'No tours found',\n 'toursList.errorArchive': 'Failed to archive tour',\n 'toursList.errorDelete': 'Failed to delete tour',\n 'toursList.errorDuplicate': 'Failed to duplicate tour',\n 'toursList.errorPublish': 'Failed to publish tour',\n 'toursList.errorUnpublish': 'Failed to unpublish tour',\n 'toursList.gridView': 'Grid view',\n 'toursList.listView': 'List view',\n 'toursList.loading': 'Loading tours...',\n 'toursList.moreActionsTitle': 'More actions',\n 'toursList.previewButton': 'Preview',\n 'toursList.previewTitle': 'Preview Tour',\n 'toursList.searchPlaceholder': 'Search tours...',\n 'toursList.settingsTitle': 'Settings',\n 'toursList.statusAll': 'All Statuses',\n 'toursList.statusArchived': 'Archived',\n 'toursList.statusDraft': 'Draft',\n 'toursList.statusPublished': 'Published',\n 'toursList.statusScheduled': 'Scheduled',\n 'toursList.steps': 'steps',\n 'toursList.stepsButton': 'Steps',\n 'toursList.subtitle': 'Create and manage interactive product tours',\n 'toursList.title': 'Product Tours',\n 'toursList.views': 'views',\n\n // User-facing surface (BOFF-2391: My Tours + My Progress).\n 'myTours.title': 'My Tours',\n 'myTours.subtitle': 'Walkthroughs available in this product. Take a tour to learn a feature.',\n 'myTours.loading': 'Loading...',\n 'myTours.empty': 'No tours are available in this context yet.',\n 'myTours.status.completed': 'Completed',\n 'myTours.status.inProgress': 'In progress',\n 'myTours.status.skipped': 'Skipped',\n 'myTours.status.notStarted': 'Not started',\n 'myTours.notFoundTitle': 'Page not found',\n 'myTours.notFoundBody': \"That tour page isn't available — returning to My Tours.\",\n\n 'myToursProgress.title': 'My Progress',\n 'myToursProgress.subtitle': 'Tours you have started, completed, or skipped.',\n 'myToursProgress.loading': 'Loading...',\n 'myToursProgress.inProgress': 'In progress',\n 'myToursProgress.completed': 'Completed',\n 'myToursProgress.skipped': 'Skipped or dismissed',\n 'myToursProgress.emptyInProgress': 'No tours in progress.',\n 'myToursProgress.emptyCompleted': 'No completed tours yet.',\n 'myToursProgress.emptySkipped': 'No skipped tours.',\n 'myToursProgress.other': 'Other',\n 'myToursProgress.emptyOther': 'No tours in other states.',\n} as const;\n\nexport type ToursTranslationKey = keyof typeof toursTranslationFallbacks;\n\ntype TranslationParams = Record<string, string | number>;\n\nexport function useToursI18n() {\n const i18n = useI18n();\n // The installed fe-libs typings still expose the older 2-argument shape, but the\n // runtime provider supports fallback strings. Narrow locally so this MFE can rely\n // on fallback-backed translations without changing the shared package here.\n const translateWithFallback = i18n.t as (key: string, fallback?: string) => string;\n\n const tr = useCallback(\n (key: ToursTranslationKey, params?: TranslationParams): string => {\n const resolved = translateWithFallback(key, toursTranslationFallbacks[key]);\n\n if (!params) {\n return resolved;\n }\n\n return Object.entries(params).reduce(\n (value, [paramKey, paramValue]) => value.replace(`{{${paramKey}}}`, String(paramValue)),\n resolved\n );\n },\n [translateWithFallback]\n );\n\n return {\n ...i18n,\n tr,\n };\n}\n\nexport function getToursTranslationFallback(key: ToursTranslationKey) {\n return toursTranslationFallbacks[key];\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"i18n.js","names":[],"sources":["../../src/tours/i18n.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\nconst toursTranslationFallbacks = {\n 'stepEditor.addFirstStep': 'Add First Step',\n 'stepEditor.addStep': 'Add Step',\n 'stepEditor.clickAddStep': 'Click \"Add Step\" to create one',\n 'stepEditor.closeSteps': 'Close steps',\n 'stepEditor.content': 'Content',\n 'stepEditor.contentPlaceholder': 'Enter step content or instructions',\n 'stepEditor.createFirstStep': 'Create your first step to get started',\n 'stepEditor.cssSelector': 'CSS Selector',\n 'stepEditor.cssSelectorPlaceholder': \"[data-tour='element-name'] or #id or .class\",\n 'stepEditor.dataTourHint': \"Use data-tour attributes like [data-tour='sidenav'] for best results\",\n 'stepEditor.deleteStep': 'Delete step',\n 'stepEditor.desktopSelector': 'Desktop Selector',\n 'stepEditor.deviceSelectorHint': 'Override the default selector for specific device types',\n 'stepEditor.deviceSpecificSelectors': 'Device-Specific Selectors (Advanced)',\n 'stepEditor.editStep': 'Edit Step',\n 'stepEditor.goBack': 'Go back',\n 'stepEditor.leaveEmptyDefault': 'Leave empty to use default',\n 'stepEditor.mobileSelector': 'Mobile Selector',\n 'stepEditor.noStepSelected': 'No step selected',\n 'stepEditor.noStepsYet': 'No steps yet',\n 'stepEditor.of': 'of',\n 'stepEditor.nextStep': 'Next step',\n 'stepEditor.placementAuto': 'Auto (recommended)',\n 'stepEditor.placementBottom': 'Bottom',\n 'stepEditor.placementCenter': 'Center (modal style)',\n 'stepEditor.placementLeft': 'Left',\n 'stepEditor.placementRight': 'Right',\n 'stepEditor.placementTop': 'Top',\n 'stepEditor.previousStep': 'Previous step',\n 'stepEditor.save': 'Save',\n 'stepEditor.saving': 'Saving...',\n 'stepEditor.selectStepToEdit': 'Select a step from the list to edit it',\n 'stepEditor.stepNumber': 'Step',\n 'stepEditor.steps': 'Steps',\n 'stepEditor.stepsCount': 'steps',\n 'stepEditor.stepsLabel': 'Steps',\n 'stepEditor.stepTitle': 'Step Title',\n 'stepEditor.stepTitlePlaceholder': 'Enter step title',\n 'stepEditor.tabletSelector': 'Tablet Selector',\n 'stepEditor.targetElement': 'target element',\n 'stepEditor.tooltipPlacement': 'Tooltip Placement',\n 'stepEditor.tourFallback': 'Tour',\n 'stepEditor.tourSteps': 'Tour Steps',\n 'stepEditor.untitled': 'Untitled',\n 'templateLibrary.adjustFilters': 'Try adjusting your filters or search query',\n 'templateLibrary.allCategories': 'All Categories',\n 'templateLibrary.categoryCustom': 'Custom',\n 'templateLibrary.categoryFeatureAnnouncement': 'Feature Announcement',\n 'templateLibrary.categoryHelp': 'Help',\n 'templateLibrary.categoryOnboarding': 'Onboarding',\n 'templateLibrary.deleteConfirm': 'Delete this template?',\n 'templateLibrary.deleteTemplate': 'Delete template',\n 'templateLibrary.loading': 'Loading templates...',\n 'templateLibrary.noTemplatesFound': 'No templates found',\n 'templateLibrary.publicOnly': 'Public only',\n 'templateLibrary.searchPlaceholder': 'Search templates...',\n 'templateLibrary.subtitle': 'Browse and use pre-built tour templates',\n 'templateLibrary.times': 'times',\n 'templateLibrary.title': 'Tour Templates',\n 'templateLibrary.useTemplate': 'Use Template',\n 'templateLibrary.usedTimes': 'Used',\n 'tourBuilder.accessDeniedTitle': 'Access Denied',\n 'tourBuilder.analytics': 'Analytics',\n 'tourBuilder.createAndAddSteps': 'Create & Add Steps',\n 'tourBuilder.createAccessDeniedMessage': 'You do not have permission to create tours.',\n 'tourBuilder.editSteps': 'Edit Steps',\n 'tourBuilder.errorTitle': 'Error',\n 'tourBuilder.goBack': 'Go back',\n 'tourBuilder.labelDescription': 'Description',\n 'tourBuilder.labelName': 'Tour Name *',\n 'tourBuilder.labelPriority': 'Priority (1-100)',\n 'tourBuilder.labelProductId': 'Product ID *',\n 'tourBuilder.labelTriggerType': 'Trigger Type',\n 'tourBuilder.loading': 'Loading...',\n 'tourBuilder.preview': 'Preview',\n 'tourBuilder.saving': 'Saving...',\n 'tourBuilder.sectionBasicInfo': 'Basic Information',\n 'tourBuilder.sectionTriggerSettings': 'Trigger Settings',\n 'tourBuilder.seedVibeControls.button': 'Seed VibeControls user tours',\n 'tourBuilder.seedVibeControls.confirm':\n 'This will overwrite the built-in Support, Notifications, and Conversations user tours from the service seed file. Continue?',\n 'tourBuilder.seedVibeControls.description':\n 'Overwrites the built-in Support, Notifications, and Conversations user tours from the service seed file.',\n 'tourBuilder.seedVibeControls.error': 'Failed to seed VibeControls user tours.',\n 'tourBuilder.seedVibeControls.loading': 'Seeding...',\n 'tourBuilder.seedVibeControls.permissionHint':\n 'Requires tour create and update permissions. The service also enforces RBAC when the seed mutation runs.',\n 'tourBuilder.seedVibeControls.result':\n 'Seeded {{totalCount}} tours for {{productId}} in workspace {{workspaceId}}: {{createdCount}} created, {{updatedCount}} updated.',\n 'tourBuilder.seedVibeControls.title': 'Seed VibeControls user tours',\n 'tourBuilder.subtitle': 'Configure tour details and settings',\n 'tourBuilder.titleCreate': 'Create Tour',\n 'tourBuilder.titleEdit': 'Edit Tour',\n 'tourBuilder.triggerAutoAlways': 'Auto (Always)',\n 'tourBuilder.triggerAutoFirstVisit': 'Auto (First Visit)',\n 'tourBuilder.triggerManual': 'Manual',\n 'tourBuilder.triggerOnEvent': 'On Event',\n 'tourBuilder.triggerScheduled': 'Scheduled',\n 'tourBuilder.updateTour': 'Update Tour',\n 'tourBuilder.updateAccessDeniedMessage': 'You do not have permission to update this tour.',\n 'tourBuilder.validationErrorsTitle': 'Validation Errors',\n 'tourPreview.accessDeniedMessage': 'You do not have permission to preview this tour.',\n 'tourPreview.accessDeniedTitle': 'Access Denied',\n 'tourPreview.deviceDesktop': 'Desktop preview',\n 'tourPreview.deviceMobile': 'Mobile preview',\n 'tourPreview.deviceTablet': 'Tablet preview',\n 'tourPreview.finish': 'Finish',\n 'tourPreview.loading': 'Loading tour...',\n 'tourPreview.next': 'Next',\n 'tourPreview.nextFooter': 'Next',\n 'tourPreview.previewSuffix': 'Preview',\n 'tourPreview.previous': 'Previous',\n 'tourPreview.readyHint': 'Click \"Start Preview\" to begin',\n 'tourPreview.readyTitle': 'Preview ready',\n 'tourPreview.startPreview': 'Start Preview',\n 'tourPreview.stepOf': 'Step',\n 'tourPreview.stepOfConnector': 'of',\n 'tourPreview.stopPreview': 'Stop Preview',\n 'tourPreview.validationErrorsTitle': 'Validation Errors',\n 'tourPreview.warningsTitle': 'Warnings',\n 'toursList.accessDeniedMessage': 'You do not have permission to view product tours.',\n 'toursList.accessDeniedTitle': 'Access Denied',\n 'toursList.actionArchive': 'Archive',\n 'toursList.actionDelete': 'Delete',\n 'toursList.actionDuplicate': 'Duplicate',\n 'toursList.actionPublish': 'Publish',\n 'toursList.actionUnpublish': 'Unpublish',\n 'toursList.confirmDelete': 'Are you sure you want to delete this tour?',\n 'toursList.createTour': 'Create Tour',\n 'toursList.editStepsTitle': 'Edit Steps',\n 'toursList.emptySubtitle': 'Create your first tour to get started',\n 'toursList.emptyTitle': 'No tours found',\n 'toursList.errorArchive': 'Failed to archive tour',\n 'toursList.errorDelete': 'Failed to delete tour',\n 'toursList.errorDuplicate': 'Failed to duplicate tour',\n 'toursList.errorPublish': 'Failed to publish tour',\n 'toursList.errorUnpublish': 'Failed to unpublish tour',\n 'toursList.gridView': 'Grid view',\n 'toursList.listView': 'List view',\n 'toursList.loading': 'Loading tours...',\n 'toursList.moreActionsTitle': 'More actions',\n 'toursList.previewButton': 'Preview',\n 'toursList.previewTitle': 'Preview Tour',\n 'toursList.searchPlaceholder': 'Search tours...',\n 'toursList.settingsTitle': 'Settings',\n 'toursList.statusAll': 'All Statuses',\n 'toursList.statusArchived': 'Archived',\n 'toursList.statusDraft': 'Draft',\n 'toursList.statusPublished': 'Published',\n 'toursList.statusScheduled': 'Scheduled',\n 'toursList.steps': 'steps',\n 'toursList.stepsButton': 'Steps',\n 'toursList.subtitle': 'Create and manage interactive product tours',\n 'toursList.title': 'Product Tours',\n 'toursList.views': 'views',\n\n // User-facing surface (BOFF-2391: My Tours + My Progress).\n 'myTours.title': 'My Tours',\n 'myTours.subtitle': 'Walkthroughs available in this product. Take a tour to learn a feature.',\n 'myTours.loading': 'Loading...',\n 'myTours.empty': 'No tours are available in this context yet.',\n 'myTours.status.completed': 'Completed',\n 'myTours.status.inProgress': 'In progress',\n 'myTours.status.skipped': 'Skipped',\n 'myTours.status.notStarted': 'Not started',\n 'myTours.notFoundTitle': 'Page not found',\n 'myTours.notFoundBody': \"That tour page isn't available — returning to My Tours.\",\n\n 'myToursProgress.title': 'My Progress',\n 'myToursProgress.subtitle': 'Tours you have started, completed, or skipped.',\n 'myToursProgress.loading': 'Loading...',\n 'myToursProgress.inProgress': 'In progress',\n 'myToursProgress.completed': 'Completed',\n 'myToursProgress.skipped': 'Skipped or dismissed',\n 'myToursProgress.emptyInProgress': 'No tours in progress.',\n 'myToursProgress.emptyCompleted': 'No completed tours yet.',\n 'myToursProgress.emptySkipped': 'No skipped tours.',\n 'myToursProgress.other': 'Other',\n 'myToursProgress.emptyOther': 'No tours in other states.',\n 'myToursProgress.empty':\n \"You haven't started any tours yet. Open My Tours and take a walkthrough — your progress will show up here.\",\n\n // Page-purpose (\"what is this page for\") + next-step guidance copy.\n 'toursList.purpose':\n 'Author and manage the interactive product tours users see in-app — onboarding flows, feature spotlights, and help walkthroughs. Create a tour, add steps that point at real UI elements, then publish it so it appears for the right product, module, and page.',\n 'myTours.purpose':\n 'Browse the guided walkthroughs available right here in this product. Take a tour to learn a feature step by step — your progress is saved so you can pick up where you left off.',\n 'myToursProgress.purpose':\n 'Track every tour you have interacted with, grouped by status. See what you have completed, what is still in progress, and what you skipped so you know which walkthroughs are left to finish.',\n 'templateLibrary.purpose':\n 'Start from a pre-built tour template instead of a blank canvas. Pick an onboarding, feature-announcement, or help template, then customise its steps — a fast way to ship a consistent walkthrough.',\n\n 'tourBuilder.purpose':\n 'Set up a tour: give it a name, choose where it appears (product, module, page) and how it triggers (manually, on first visit, or scheduled). Save it, then add the steps users will walk through.',\n 'tourBuilder.nextStepsTitle': 'Recommended next steps',\n 'tourBuilder.nextStepEditSteps': 'Add the steps',\n 'tourBuilder.nextStepEditStepsDesc': 'Define the tooltips and target elements users will see.',\n 'tourBuilder.nextStepPreview': 'Preview it',\n 'tourBuilder.nextStepPreviewDesc': 'Walk through the tour on mobile, tablet, and desktop.',\n 'tourBuilder.nextStepSchedule': 'Schedule activation',\n 'tourBuilder.nextStepScheduleDesc': 'Choose when this tour goes live and how often it recurs.',\n 'tourBuilder.nextStepAnalytics': 'Check analytics',\n 'tourBuilder.nextStepAnalyticsDesc': 'See views, completion, and drop-off once it is live.',\n\n 'stepEditor.purpose':\n 'Build the actual walkthrough. Each step is a tooltip anchored to a real UI element via a CSS or data-tour selector. Add steps, reorder them, attach media, and set placement so the tour guides users exactly where you intend.',\n 'stepEditor.emptyTitle': 'No step selected',\n\n 'tourPreview.purpose':\n 'Walk through this tour exactly as your users will, on simulated mobile, tablet, and desktop viewports. Validate that every step finds its target element before you publish.',\n} as const;\n\nexport type ToursTranslationKey = keyof typeof toursTranslationFallbacks;\n\ntype TranslationParams = Record<string, string | number>;\n\nexport function useToursI18n() {\n const i18n = useI18n();\n // The installed fe-libs typings still expose the older 2-argument shape, but the\n // runtime provider supports fallback strings. Narrow locally so this MFE can rely\n // on fallback-backed translations without changing the shared package here.\n const translateWithFallback = i18n.t as (key: string, fallback?: string) => string;\n\n const tr = useCallback(\n (key: ToursTranslationKey, params?: TranslationParams): string => {\n const resolved = translateWithFallback(key, toursTranslationFallbacks[key]);\n\n if (!params) {\n return resolved;\n }\n\n return Object.entries(params).reduce(\n (value, [paramKey, paramValue]) => value.replace(`{{${paramKey}}}`, String(paramValue)),\n resolved\n );\n },\n [translateWithFallback]\n );\n\n return {\n ...i18n,\n tr,\n };\n}\n\nexport function getToursTranslationFallback(key: ToursTranslationKey) {\n return toursTranslationFallbacks[key];\n}\n"],"mappings":"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"}
|
|
@@ -6,48 +6,49 @@ import { useCallback as o, useEffect as s } from "react";
|
|
|
6
6
|
import { BarChart3 as c, Timer as l, TrendingUp as u, Users as d } from "lucide-react";
|
|
7
7
|
import { jsx as f, jsxs as p } from "react/jsx-runtime";
|
|
8
8
|
import { useParams as m } from "react-router-dom";
|
|
9
|
-
import { EmphasisPanel as h, GlassCard as g } from "@burdenoff/fe-libs/ui";
|
|
10
|
-
import { useI18n as
|
|
9
|
+
import { EmphasisPanel as h, GlassCard as g, IllustratedEmptyState as _, PagePurpose as v } from "@burdenoff/fe-libs/ui";
|
|
10
|
+
import { useI18n as y } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
|
|
11
11
|
//#region src/tours/pages/AnalyticsDashboardPage.tsx
|
|
12
|
-
function
|
|
13
|
-
let { t:
|
|
14
|
-
let n =
|
|
12
|
+
function b() {
|
|
13
|
+
let { t: b } = y(), x = o((e, t) => {
|
|
14
|
+
let n = b(e);
|
|
15
15
|
return n === e ? t : n;
|
|
16
|
-
}, [
|
|
16
|
+
}, [b]), { tourId: S } = m(), { hasPermission: C, isLoading: w } = e(), T = C(t.TOUR_ANALYTICS_READ), { analytics: E, loading: D, fetchAnalytics: O, getCompletionRate: k, getSkipRate: A } = n(S);
|
|
17
17
|
return s(() => {
|
|
18
|
-
|
|
18
|
+
w || !T || O();
|
|
19
19
|
}, [
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
]), !
|
|
20
|
+
O,
|
|
21
|
+
w,
|
|
22
|
+
T
|
|
23
|
+
]), !w && !T ? /* @__PURE__ */ f("div", {
|
|
24
24
|
className: "flex items-center justify-center h-full p-3 sm:p-6",
|
|
25
25
|
children: /* @__PURE__ */ p("div", {
|
|
26
26
|
className: "text-center",
|
|
27
27
|
children: [/* @__PURE__ */ f("h2", {
|
|
28
28
|
className: "text-lg font-semibold text-text-primary mb-2",
|
|
29
|
-
children:
|
|
29
|
+
children: x("analyticsDashboard.accessDenied", "Access Denied")
|
|
30
30
|
}), /* @__PURE__ */ f("p", {
|
|
31
31
|
className: "text-sm text-text-secondary",
|
|
32
|
-
children:
|
|
32
|
+
children: x("analyticsDashboard.noPermission", "You do not have permission to view tour analytics.")
|
|
33
33
|
})]
|
|
34
34
|
})
|
|
35
|
-
}) :
|
|
35
|
+
}) : D ? /* @__PURE__ */ f("div", {
|
|
36
36
|
className: "flex items-center justify-center h-full",
|
|
37
37
|
children: /* @__PURE__ */ f("p", {
|
|
38
38
|
className: "text-text-secondary",
|
|
39
|
-
children:
|
|
39
|
+
children: x("analyticsDashboard.loading", "Loading analytics...")
|
|
40
40
|
})
|
|
41
|
-
}) :
|
|
41
|
+
}) : E ? /* @__PURE__ */ p("div", {
|
|
42
42
|
className: "space-y-4 sm:space-y-6 p-3 sm:p-6",
|
|
43
43
|
children: [
|
|
44
44
|
/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("h1", {
|
|
45
45
|
className: "text-xl sm:text-2xl font-bold",
|
|
46
|
-
children:
|
|
46
|
+
children: x("analyticsDashboard.title", "Tour Analytics")
|
|
47
47
|
}), /* @__PURE__ */ f("p", {
|
|
48
48
|
className: "text-sm text-text-secondary",
|
|
49
|
-
children:
|
|
49
|
+
children: x("analyticsDashboard.subtitle", "Performance metrics and insights")
|
|
50
50
|
})] }),
|
|
51
|
+
/* @__PURE__ */ f(v, { children: x("analyticsDashboard.purpose", "See how this specific tour is performing: how many people viewed it, how many finished versus skipped, and exactly which step they drop off on. Use the per-step drop-off to find and fix the weak point in your walkthrough.") }),
|
|
51
52
|
/* @__PURE__ */ p("div", {
|
|
52
53
|
className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4",
|
|
53
54
|
children: [
|
|
@@ -64,11 +65,11 @@ function v() {
|
|
|
64
65
|
})
|
|
65
66
|
}), /* @__PURE__ */ f("span", {
|
|
66
67
|
className: "text-sm text-text-secondary",
|
|
67
|
-
children:
|
|
68
|
+
children: x("analyticsDashboard.totalViews", "Total Views")
|
|
68
69
|
})]
|
|
69
70
|
}), /* @__PURE__ */ f("div", {
|
|
70
71
|
className: "text-2xl font-bold tabular-nums",
|
|
71
|
-
children: i(
|
|
72
|
+
children: i(E.totalViews)
|
|
72
73
|
})]
|
|
73
74
|
}),
|
|
74
75
|
/* @__PURE__ */ p(g, {
|
|
@@ -84,11 +85,11 @@ function v() {
|
|
|
84
85
|
})
|
|
85
86
|
}), /* @__PURE__ */ f("span", {
|
|
86
87
|
className: "text-sm text-text-secondary",
|
|
87
|
-
children:
|
|
88
|
+
children: x("analyticsDashboard.completionRate", "Completion Rate")
|
|
88
89
|
})]
|
|
89
90
|
}), /* @__PURE__ */ f("div", {
|
|
90
91
|
className: "text-2xl font-bold tabular-nums",
|
|
91
|
-
children: a(
|
|
92
|
+
children: a(k())
|
|
92
93
|
})]
|
|
93
94
|
}),
|
|
94
95
|
/* @__PURE__ */ p(g, {
|
|
@@ -104,11 +105,11 @@ function v() {
|
|
|
104
105
|
})
|
|
105
106
|
}), /* @__PURE__ */ f("span", {
|
|
106
107
|
className: "text-sm text-text-secondary",
|
|
107
|
-
children:
|
|
108
|
+
children: x("analyticsDashboard.skipRate", "Skip Rate")
|
|
108
109
|
})]
|
|
109
110
|
}), /* @__PURE__ */ f("div", {
|
|
110
111
|
className: "text-2xl font-bold tabular-nums",
|
|
111
|
-
children: a(
|
|
112
|
+
children: a(A())
|
|
112
113
|
})]
|
|
113
114
|
}),
|
|
114
115
|
/* @__PURE__ */ p(g, {
|
|
@@ -124,11 +125,11 @@ function v() {
|
|
|
124
125
|
})
|
|
125
126
|
}), /* @__PURE__ */ f("span", {
|
|
126
127
|
className: "text-sm text-text-secondary",
|
|
127
|
-
children:
|
|
128
|
+
children: x("analyticsDashboard.avgDuration", "Avg Duration")
|
|
128
129
|
})]
|
|
129
130
|
}), /* @__PURE__ */ f("div", {
|
|
130
131
|
className: "text-2xl font-bold tabular-nums",
|
|
131
|
-
children: r(
|
|
132
|
+
children: r(E.averageDuration)
|
|
132
133
|
})]
|
|
133
134
|
})
|
|
134
135
|
]
|
|
@@ -137,10 +138,10 @@ function v() {
|
|
|
137
138
|
className: "p-4 sm:p-6",
|
|
138
139
|
children: [/* @__PURE__ */ f("h2", {
|
|
139
140
|
className: "text-lg font-semibold mb-4",
|
|
140
|
-
children:
|
|
141
|
+
children: x("analyticsDashboard.deviceBreakdown", "Device Breakdown")
|
|
141
142
|
}), /* @__PURE__ */ f("div", {
|
|
142
143
|
className: "space-y-3",
|
|
143
|
-
children:
|
|
144
|
+
children: E.byDeviceType.map((e) => /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ p("div", {
|
|
144
145
|
className: "flex items-center justify-between mb-2",
|
|
145
146
|
children: [/* @__PURE__ */ f("span", {
|
|
146
147
|
className: "text-sm capitalize",
|
|
@@ -163,12 +164,12 @@ function v() {
|
|
|
163
164
|
})] }, e.deviceType))
|
|
164
165
|
})]
|
|
165
166
|
}),
|
|
166
|
-
|
|
167
|
+
E.stepAnalytics && E.stepAnalytics.length > 0 && /* @__PURE__ */ p(g, {
|
|
167
168
|
treatment: "plain",
|
|
168
169
|
className: "p-4 sm:p-6 border-border-seam",
|
|
169
170
|
children: [/* @__PURE__ */ f("h2", {
|
|
170
171
|
className: "text-lg font-semibold mb-4",
|
|
171
|
-
children:
|
|
172
|
+
children: x("analyticsDashboard.stepPerformance", "Step Performance")
|
|
172
173
|
}), /* @__PURE__ */ f("div", {
|
|
173
174
|
className: "overflow-x-auto",
|
|
174
175
|
children: /* @__PURE__ */ p("table", {
|
|
@@ -178,28 +179,28 @@ function v() {
|
|
|
178
179
|
children: [
|
|
179
180
|
/* @__PURE__ */ f("th", {
|
|
180
181
|
className: "text-left py-2 px-4 text-sm font-medium text-text-secondary",
|
|
181
|
-
children:
|
|
182
|
+
children: x("analyticsDashboard.tableStep", "Step")
|
|
182
183
|
}),
|
|
183
184
|
/* @__PURE__ */ f("th", {
|
|
184
185
|
className: "text-right py-2 px-4 text-sm font-medium text-text-secondary",
|
|
185
|
-
children:
|
|
186
|
+
children: x("analyticsDashboard.tableViews", "Views")
|
|
186
187
|
}),
|
|
187
188
|
/* @__PURE__ */ f("th", {
|
|
188
189
|
className: "text-right py-2 px-4 text-sm font-medium text-text-secondary",
|
|
189
|
-
children:
|
|
190
|
+
children: x("analyticsDashboard.tableCompletions", "Completions")
|
|
190
191
|
}),
|
|
191
192
|
/* @__PURE__ */ f("th", {
|
|
192
193
|
className: "text-right py-2 px-4 text-sm font-medium text-text-secondary",
|
|
193
|
-
children:
|
|
194
|
+
children: x("analyticsDashboard.tableDropOffRate", "Drop-off Rate")
|
|
194
195
|
})
|
|
195
196
|
]
|
|
196
|
-
}) }), /* @__PURE__ */ f("tbody", { children:
|
|
197
|
+
}) }), /* @__PURE__ */ f("tbody", { children: E.stepAnalytics.map((e) => /* @__PURE__ */ p("tr", {
|
|
197
198
|
className: "border-b border-border-seam",
|
|
198
199
|
children: [
|
|
199
200
|
/* @__PURE__ */ p("td", {
|
|
200
201
|
className: "py-2 px-4 text-sm",
|
|
201
202
|
children: [
|
|
202
|
-
|
|
203
|
+
x("analyticsDashboard.stepLabel", "Step"),
|
|
203
204
|
" ",
|
|
204
205
|
e.stepOrder
|
|
205
206
|
]
|
|
@@ -223,14 +224,15 @@ function v() {
|
|
|
223
224
|
})
|
|
224
225
|
]
|
|
225
226
|
}) : /* @__PURE__ */ f("div", {
|
|
226
|
-
className: "
|
|
227
|
-
children: /* @__PURE__ */ f(
|
|
228
|
-
|
|
229
|
-
|
|
227
|
+
className: "p-3 sm:p-6",
|
|
228
|
+
children: /* @__PURE__ */ f(_, {
|
|
229
|
+
illustration: "empty-data",
|
|
230
|
+
title: x("analyticsDashboard.noData", "No analytics data available"),
|
|
231
|
+
description: x("analyticsDashboard.noDataHint", "Analytics appear once this tour has been published and seen by users. Publish the tour and check back after it starts collecting views.")
|
|
230
232
|
})
|
|
231
233
|
});
|
|
232
234
|
}
|
|
233
235
|
//#endregion
|
|
234
|
-
export {
|
|
236
|
+
export { b as AnalyticsDashboardPage };
|
|
235
237
|
|
|
236
238
|
//# sourceMappingURL=AnalyticsDashboardPage.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AnalyticsDashboardPage.js","names":[],"sources":["../../../src/tours/pages/AnalyticsDashboardPage.tsx"],"sourcesContent":["import { useCallback, useEffect } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { BarChart3, TrendingUp, Users, Timer } from 'lucide-react';\nimport { GlassCard, EmphasisPanel } from '@burdenoff/fe-libs/ui';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { useTourAnalytics } from '../hooks/useTourAnalytics';\nimport { useToursPermissionAccess } from '../hooks/useToursPermissionAccess';\nimport { TOUR_PERMISSIONS } from '../../constants/permissions';\nimport { formatNumber, formatPercentage, formatDuration } from '../utils';\n\n/**\n * Analytics dashboard page\n * Display tour performance metrics and charts\n */\nexport function AnalyticsDashboardPage() {\n const { t } = useI18n();\n const tr = useCallback(\n (key: string, fallback: string): string => {\n const value = t(key);\n return value === key ? fallback : value;\n },\n [t]\n );\n\n const { tourId } = useParams();\n const { hasPermission, isLoading: permissionsLoading } = useToursPermissionAccess();\n const canViewAnalytics = hasPermission(TOUR_PERMISSIONS.TOUR_ANALYTICS_READ);\n\n const { analytics, loading, fetchAnalytics, getCompletionRate, getSkipRate } =\n useTourAnalytics(tourId);\n\n useEffect(() => {\n if (permissionsLoading || !canViewAnalytics) return;\n fetchAnalytics();\n }, [fetchAnalytics, permissionsLoading, canViewAnalytics]);\n\n if (!permissionsLoading && !canViewAnalytics) {\n return (\n <div className=\"flex items-center justify-center h-full p-3 sm:p-6\">\n <div className=\"text-center\">\n <h2 className=\"text-lg font-semibold text-text-primary mb-2\">\n {tr('analyticsDashboard.accessDenied', 'Access Denied')}\n </h2>\n <p className=\"text-sm text-text-secondary\">\n {tr(\n 'analyticsDashboard.noPermission',\n 'You do not have permission to view tour analytics.'\n )}\n </p>\n </div>\n </div>\n );\n }\n\n if (loading) {\n return (\n <div className=\"flex items-center justify-center h-full\">\n <p className=\"text-text-secondary\">\n {tr('analyticsDashboard.loading', 'Loading analytics...')}\n </p>\n </div>\n );\n }\n\n if (!analytics) {\n return (\n <div className=\"flex items-center justify-center h-full\">\n <p className=\"text-text-secondary\">\n {tr('analyticsDashboard.noData', 'No analytics data available')}\n </p>\n </div>\n );\n }\n\n return (\n <div className=\"space-y-4 sm:space-y-6 p-3 sm:p-6\">\n {/* Header */}\n <div>\n <h1 className=\"text-xl sm:text-2xl font-bold\">\n {tr('analyticsDashboard.title', 'Tour Analytics')}\n </h1>\n <p className=\"text-sm text-text-secondary\">\n {tr('analyticsDashboard.subtitle', 'Performance metrics and insights')}\n </p>\n </div>\n\n {/* Summary Cards */}\n <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4\">\n <GlassCard treatment=\"glass\" className=\"p-4\">\n <div className=\"flex items-center gap-3 mb-2\">\n <div className=\"p-2 bg-action-primary-bg/10 rounded-md\">\n <Users className=\"text-primary\" size={20} />\n </div>\n <span className=\"text-sm text-text-secondary\">\n {tr('analyticsDashboard.totalViews', 'Total Views')}\n </span>\n </div>\n <div className=\"text-2xl font-bold tabular-nums\">{formatNumber(analytics.totalViews)}</div>\n </GlassCard>\n\n <GlassCard treatment=\"metric\" className=\"p-4\">\n <div className=\"flex items-center gap-3 mb-2\">\n <div className=\"p-2 bg-success/10 rounded-md\">\n <TrendingUp className=\"text-success\" size={20} />\n </div>\n <span className=\"text-sm text-text-secondary\">\n {tr('analyticsDashboard.completionRate', 'Completion Rate')}\n </span>\n </div>\n <div className=\"text-2xl font-bold tabular-nums\">\n {formatPercentage(getCompletionRate())}\n </div>\n </GlassCard>\n\n <GlassCard treatment=\"metric\" className=\"p-4\">\n <div className=\"flex items-center gap-3 mb-2\">\n <div className=\"p-2 bg-warning/10 rounded-md\">\n <BarChart3 className=\"text-warning\" size={20} />\n </div>\n <span className=\"text-sm text-text-secondary\">\n {tr('analyticsDashboard.skipRate', 'Skip Rate')}\n </span>\n </div>\n <div className=\"text-2xl font-bold tabular-nums\">{formatPercentage(getSkipRate())}</div>\n </GlassCard>\n\n <GlassCard treatment=\"metric\" className=\"p-4\">\n <div className=\"flex items-center gap-3 mb-2\">\n <div className=\"p-2 bg-info/10 rounded-md\">\n <Timer className=\"text-info\" size={20} />\n </div>\n <span className=\"text-sm text-text-secondary\">\n {tr('analyticsDashboard.avgDuration', 'Avg Duration')}\n </span>\n </div>\n <div className=\"text-2xl font-bold tabular-nums\">\n {formatDuration(analytics.averageDuration)}\n </div>\n </GlassCard>\n </div>\n\n {/* Device Breakdown — the key soft-glow data-viz zone */}\n <EmphasisPanel className=\"p-4 sm:p-6\">\n <h2 className=\"text-lg font-semibold mb-4\">\n {tr('analyticsDashboard.deviceBreakdown', 'Device Breakdown')}\n </h2>\n <div className=\"space-y-3\">\n {analytics.byDeviceType.map((device) => (\n <div key={device.deviceType}>\n <div className=\"flex items-center justify-between mb-2\">\n <span className=\"text-sm capitalize\">{device.deviceType}</span>\n <span className=\"text-sm text-text-secondary tabular-nums\">\n {formatNumber(device.count)} views ({formatPercentage(device.completionRate)})\n </span>\n </div>\n <div className=\"w-full bg-bg-sunken rounded-full h-2\">\n <div\n className=\"bg-action-primary-bg h-2 rounded-full shadow-[var(--shadow-pop)]\"\n style={{ width: `${device.completionRate}%` }}\n />\n </div>\n </div>\n ))}\n </div>\n </EmphasisPanel>\n\n {/* Step Analytics */}\n {analytics.stepAnalytics && analytics.stepAnalytics.length > 0 && (\n <GlassCard treatment=\"plain\" className=\"p-4 sm:p-6 border-border-seam\">\n <h2 className=\"text-lg font-semibold mb-4\">\n {tr('analyticsDashboard.stepPerformance', 'Step Performance')}\n </h2>\n <div className=\"overflow-x-auto\">\n <table className=\"w-full\">\n <thead>\n <tr className=\"border-b border-border-seam\">\n <th className=\"text-left py-2 px-4 text-sm font-medium text-text-secondary\">\n {tr('analyticsDashboard.tableStep', 'Step')}\n </th>\n <th className=\"text-right py-2 px-4 text-sm font-medium text-text-secondary\">\n {tr('analyticsDashboard.tableViews', 'Views')}\n </th>\n <th className=\"text-right py-2 px-4 text-sm font-medium text-text-secondary\">\n {tr('analyticsDashboard.tableCompletions', 'Completions')}\n </th>\n <th className=\"text-right py-2 px-4 text-sm font-medium text-text-secondary\">\n {tr('analyticsDashboard.tableDropOffRate', 'Drop-off Rate')}\n </th>\n </tr>\n </thead>\n <tbody>\n {analytics.stepAnalytics.map((step) => (\n <tr key={step.stepId} className=\"border-b border-border-seam\">\n <td className=\"py-2 px-4 text-sm\">\n {tr('analyticsDashboard.stepLabel', 'Step')} {step.stepOrder}\n </td>\n <td className=\"text-right py-2 px-4 text-sm tabular-nums\">\n {formatNumber(step.views)}\n </td>\n <td className=\"text-right py-2 px-4 text-sm tabular-nums\">\n {formatNumber(step.completions)}\n </td>\n <td className=\"text-right py-2 px-4 text-sm tabular-nums\">\n {formatPercentage(step.dropOffRate)}\n </td>\n </tr>\n ))}\n </tbody>\n </table>\n </div>\n </GlassCard>\n )}\n </div>\n );\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"AnalyticsDashboardPage.js","names":[],"sources":["../../../src/tours/pages/AnalyticsDashboardPage.tsx"],"sourcesContent":["import { useCallback, useEffect } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { BarChart3, TrendingUp, Users, Timer } from 'lucide-react';\nimport { GlassCard, EmphasisPanel, IllustratedEmptyState, PagePurpose } from '@burdenoff/fe-libs/ui';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { useTourAnalytics } from '../hooks/useTourAnalytics';\nimport { useToursPermissionAccess } from '../hooks/useToursPermissionAccess';\nimport { TOUR_PERMISSIONS } from '../../constants/permissions';\nimport { formatNumber, formatPercentage, formatDuration } from '../utils';\n\n/**\n * Analytics dashboard page\n * Display tour performance metrics and charts\n */\nexport function AnalyticsDashboardPage() {\n const { t } = useI18n();\n const tr = useCallback(\n (key: string, fallback: string): string => {\n const value = t(key);\n return value === key ? fallback : value;\n },\n [t]\n );\n\n const { tourId } = useParams();\n const { hasPermission, isLoading: permissionsLoading } = useToursPermissionAccess();\n const canViewAnalytics = hasPermission(TOUR_PERMISSIONS.TOUR_ANALYTICS_READ);\n\n const { analytics, loading, fetchAnalytics, getCompletionRate, getSkipRate } =\n useTourAnalytics(tourId);\n\n useEffect(() => {\n if (permissionsLoading || !canViewAnalytics) return;\n fetchAnalytics();\n }, [fetchAnalytics, permissionsLoading, canViewAnalytics]);\n\n if (!permissionsLoading && !canViewAnalytics) {\n return (\n <div className=\"flex items-center justify-center h-full p-3 sm:p-6\">\n <div className=\"text-center\">\n <h2 className=\"text-lg font-semibold text-text-primary mb-2\">\n {tr('analyticsDashboard.accessDenied', 'Access Denied')}\n </h2>\n <p className=\"text-sm text-text-secondary\">\n {tr(\n 'analyticsDashboard.noPermission',\n 'You do not have permission to view tour analytics.'\n )}\n </p>\n </div>\n </div>\n );\n }\n\n if (loading) {\n return (\n <div className=\"flex items-center justify-center h-full\">\n <p className=\"text-text-secondary\">\n {tr('analyticsDashboard.loading', 'Loading analytics...')}\n </p>\n </div>\n );\n }\n\n if (!analytics) {\n return (\n <div className=\"p-3 sm:p-6\">\n <IllustratedEmptyState\n illustration=\"empty-data\"\n title={tr('analyticsDashboard.noData', 'No analytics data available')}\n description={tr(\n 'analyticsDashboard.noDataHint',\n 'Analytics appear once this tour has been published and seen by users. Publish the tour and check back after it starts collecting views.'\n )}\n />\n </div>\n );\n }\n\n return (\n <div className=\"space-y-4 sm:space-y-6 p-3 sm:p-6\">\n {/* Header */}\n <div>\n <h1 className=\"text-xl sm:text-2xl font-bold\">\n {tr('analyticsDashboard.title', 'Tour Analytics')}\n </h1>\n <p className=\"text-sm text-text-secondary\">\n {tr('analyticsDashboard.subtitle', 'Performance metrics and insights')}\n </p>\n </div>\n\n <PagePurpose>\n {tr(\n 'analyticsDashboard.purpose',\n 'See how this specific tour is performing: how many people viewed it, how many finished versus skipped, and exactly which step they drop off on. Use the per-step drop-off to find and fix the weak point in your walkthrough.'\n )}\n </PagePurpose>\n\n {/* Summary Cards */}\n <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4\">\n <GlassCard treatment=\"glass\" className=\"p-4\">\n <div className=\"flex items-center gap-3 mb-2\">\n <div className=\"p-2 bg-action-primary-bg/10 rounded-md\">\n <Users className=\"text-primary\" size={20} />\n </div>\n <span className=\"text-sm text-text-secondary\">\n {tr('analyticsDashboard.totalViews', 'Total Views')}\n </span>\n </div>\n <div className=\"text-2xl font-bold tabular-nums\">{formatNumber(analytics.totalViews)}</div>\n </GlassCard>\n\n <GlassCard treatment=\"metric\" className=\"p-4\">\n <div className=\"flex items-center gap-3 mb-2\">\n <div className=\"p-2 bg-success/10 rounded-md\">\n <TrendingUp className=\"text-success\" size={20} />\n </div>\n <span className=\"text-sm text-text-secondary\">\n {tr('analyticsDashboard.completionRate', 'Completion Rate')}\n </span>\n </div>\n <div className=\"text-2xl font-bold tabular-nums\">\n {formatPercentage(getCompletionRate())}\n </div>\n </GlassCard>\n\n <GlassCard treatment=\"metric\" className=\"p-4\">\n <div className=\"flex items-center gap-3 mb-2\">\n <div className=\"p-2 bg-warning/10 rounded-md\">\n <BarChart3 className=\"text-warning\" size={20} />\n </div>\n <span className=\"text-sm text-text-secondary\">\n {tr('analyticsDashboard.skipRate', 'Skip Rate')}\n </span>\n </div>\n <div className=\"text-2xl font-bold tabular-nums\">{formatPercentage(getSkipRate())}</div>\n </GlassCard>\n\n <GlassCard treatment=\"metric\" className=\"p-4\">\n <div className=\"flex items-center gap-3 mb-2\">\n <div className=\"p-2 bg-info/10 rounded-md\">\n <Timer className=\"text-info\" size={20} />\n </div>\n <span className=\"text-sm text-text-secondary\">\n {tr('analyticsDashboard.avgDuration', 'Avg Duration')}\n </span>\n </div>\n <div className=\"text-2xl font-bold tabular-nums\">\n {formatDuration(analytics.averageDuration)}\n </div>\n </GlassCard>\n </div>\n\n {/* Device Breakdown — the key soft-glow data-viz zone */}\n <EmphasisPanel className=\"p-4 sm:p-6\">\n <h2 className=\"text-lg font-semibold mb-4\">\n {tr('analyticsDashboard.deviceBreakdown', 'Device Breakdown')}\n </h2>\n <div className=\"space-y-3\">\n {analytics.byDeviceType.map((device) => (\n <div key={device.deviceType}>\n <div className=\"flex items-center justify-between mb-2\">\n <span className=\"text-sm capitalize\">{device.deviceType}</span>\n <span className=\"text-sm text-text-secondary tabular-nums\">\n {formatNumber(device.count)} views ({formatPercentage(device.completionRate)})\n </span>\n </div>\n <div className=\"w-full bg-bg-sunken rounded-full h-2\">\n <div\n className=\"bg-action-primary-bg h-2 rounded-full shadow-[var(--shadow-pop)]\"\n style={{ width: `${device.completionRate}%` }}\n />\n </div>\n </div>\n ))}\n </div>\n </EmphasisPanel>\n\n {/* Step Analytics */}\n {analytics.stepAnalytics && analytics.stepAnalytics.length > 0 && (\n <GlassCard treatment=\"plain\" className=\"p-4 sm:p-6 border-border-seam\">\n <h2 className=\"text-lg font-semibold mb-4\">\n {tr('analyticsDashboard.stepPerformance', 'Step Performance')}\n </h2>\n <div className=\"overflow-x-auto\">\n <table className=\"w-full\">\n <thead>\n <tr className=\"border-b border-border-seam\">\n <th className=\"text-left py-2 px-4 text-sm font-medium text-text-secondary\">\n {tr('analyticsDashboard.tableStep', 'Step')}\n </th>\n <th className=\"text-right py-2 px-4 text-sm font-medium text-text-secondary\">\n {tr('analyticsDashboard.tableViews', 'Views')}\n </th>\n <th className=\"text-right py-2 px-4 text-sm font-medium text-text-secondary\">\n {tr('analyticsDashboard.tableCompletions', 'Completions')}\n </th>\n <th className=\"text-right py-2 px-4 text-sm font-medium text-text-secondary\">\n {tr('analyticsDashboard.tableDropOffRate', 'Drop-off Rate')}\n </th>\n </tr>\n </thead>\n <tbody>\n {analytics.stepAnalytics.map((step) => (\n <tr key={step.stepId} className=\"border-b border-border-seam\">\n <td className=\"py-2 px-4 text-sm\">\n {tr('analyticsDashboard.stepLabel', 'Step')} {step.stepOrder}\n </td>\n <td className=\"text-right py-2 px-4 text-sm tabular-nums\">\n {formatNumber(step.views)}\n </td>\n <td className=\"text-right py-2 px-4 text-sm tabular-nums\">\n {formatNumber(step.completions)}\n </td>\n <td className=\"text-right py-2 px-4 text-sm tabular-nums\">\n {formatPercentage(step.dropOffRate)}\n </td>\n </tr>\n ))}\n </tbody>\n </table>\n </div>\n </GlassCard>\n )}\n </div>\n );\n}\n"],"mappings":"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"}
|