Conversation
Introduce support for fetching a user's personal cohorts and wire it into the dashboard. Changes include: - Add PersonalUserCohortsResponse type to app types. - Add cohorts.getPersonalUserCohorts API method with validation and JWT header. - Add usePersonalUserCohorts React Query hook (with query key, enabled flag, select and a 1-minute staleTime). - Integrate the hook into DashboardStatsCards: obtain userId from session/store, fetch personal cohort IDs for personal scope, and update device count loading logic to depend on cohort loading. - Expand the home page Accordion defaultValue to include 'cohorts' and tidy a minor parentheses in loading computation. These changes ensure personal-scope device counts are correctly gated on the user's cohorts and expose the cohorts panel in the dashboard UI.
Refine personal cohort fetching and adjust device-count logic. usePersonalUserCohorts now awaits API results, verifies each cohort via verifyCohortIdApi, filters out cohorts named "airqo", and returns an array of valid cohort IDs. useDeviceCount now gives explicit cohortIds priority (personal scope), treats AirQo group only when no explicit cohorts were passed, normalizes queryKey (uses a 'personal' sentinel when applicable), and tightens the query enabled logic. Also removed an unused redux import and small comment tweaks in the dashboard component.
Always render the Device Visibility accordion on the home page (removed external-org conditional and 'cohorts' default selection). Enhance NetworkVisibilityCard to handle personal user scope: import and use usePersonalUserCohorts, useSession and redux user info, derive effective cohort IDs (personal vs group), update query enabled/loading logic, and invalidate personal cohorts cache after updates. Also adjust UI copy and visuals to reflect personal vs organization scope, and apply minor formatting/cleanup changes.
Handle personal user cohort scope and refine cohort-loading logic. This change adds useSession and useAppSelector to derive the user ID, introduces usePersonalUserCohorts, and resolves target cohort IDs from either personal or group APIs depending on userScope and org membership. It adjusts enabled flags for fetching, consolidates loading flags into isResolvingIds/tableLoading, and updates empty/error display logic. Also updates table title to show "My Cohorts" for personal scope and includes minor formatting/cleanup.
Split and refactor the Claim Device modal into a multi-step flow and move bulk/step logic into separate components. The main modal was rewritten to introduce explicit FlowStep types, shared Error/Loading UI, and better state handling (including useSession and useQueryClient). Cohort verification/import, single and bulk claim handlers, QR parsing, cache invalidation for personal/group contexts, and cohort assignment flows were implemented. Several step components and utilities were added (BulkInputStep, CohortImportStep, ConfirmationSteps, ManualInputStep, MethodSelectStep, QRScanStep, SuccessStep, utils.parseQRCode) and BulkClaimResults was relocated to steps/. Overall improves modularity, error handling, and cache invalidation after claims.
Introduce a new OnboardingChecklist component (src/vertex/components/features/home/onboarding-checklist.tsx) and wire it into the authenticated Home page. The checklist replaces the previous empty-state flow for workspaces with no devices and provides step-based guidance (add device, group devices, set visibility) with persisted frontend state keyed per org/personal user in localStorage. Also added small helpers in the page for reading/saving checklist state, a local org-specific key, and an updater callback. Claim/import device modals and navigation to cohorts are integrated with the checklist actions; the checklist auto-dismisses when all steps complete. Misc: minor formatting refactors, improved dynamic import args, and small Accordion/JSX tidy-ups.
Introduce an 'Add a device' choice dialog in the welcome page so users can pick between claiming an AirQo device or importing a different manufacturer sensor. Add state and callbacks (isAddDeviceChoiceOpen, openAddDeviceChoice, openClaimModal, openImportModal) and a handleDeviceAdded routine that updates the onboarding checklist when a device is added. Wire ClaimDeviceModal and ImportDeviceModal to call onSuccess so the checklist gets updated on successful claim/import. Update ImportDeviceModal to accept an optional onSuccess prop and invoke it on all success/partial-success paths. Add onAddDevice prop to OnboardingChecklist and map the 'add-device' step to open the choice dialog. Minor code style adjustments for consistency.
Comment out claim/import device handlers and related UI in the onboarding checklist. The WelcomePage no longer passes onClaimDevice/onImportDevice to the OnboardingChecklist, and the contextual help block that offered "Claim an AirQo device" / "add one from a different manufacturer" has been removed (commented) from the component. This temporarily disables the claim/import flows while preserving the code for easy restoration. Files changed: src/vertex/app/(authenticated)/home/page.tsx, src/vertex/components/features/home/onboarding-checklist.tsx.
Remove the collapsible behavior and dismiss control from OnboardingChecklist. Deleted the isCollapsed localStorage state, the collapse toggle and dismiss button (and their icon imports: ChevronDown, ChevronUp, X). Steps are now always rendered while the progress bar remains visible, simplifying the component and removing persisted collapsed state.
Introduce ClaimFlowMode ('guided' | 'fast') and a mode prop on ClaimDeviceModal (defaults to 'fast'). Guided mode limits flow to single-device QR/manual claiming and disables cohort assignment/bulk paths; fast mode preserves bulk, cohort import and auto-assignment behavior. Major refactor and cleanup of the modal: reorganized sections (modes, types, state, handlers, effects, render), consolidated cache invalidation helpers, improved effect dependencies, added QR parsing/confirmation flow, tracked previousStep for correct back behavior, separated single vs bulk handlers (add/remove/update/import/clear), and simplified cohort verification/assignment logic with shorter success timeouts. MethodSelectStep now accepts mode and only shows allowed methods per mode. Removed unused imports (cohorts API and Device), adjusted form defaults and dialog config/buttons to match modes and steps, and consolidated UI conditionals to hide fast-mode-only UI in guided mode.
- Implement fetching of recent readings in analytics service with batching - Normalize recent readings data for site cards - Update device service to handle cohort details fallback - Refactor environment variable handling in deployment workflow - Improve login page redirect logic - Add production mode instructions to README - Clean up Dockerfile and package.json for better clarity
…rformance and styling
- Change banner background color - Update banner copy - Improved contrast across all severities for banner component — bumped background saturation, stronger border colors, and darker text for light mode, richer tones for dark
Introduce a shared StepLoader spinner and use it as the loading fallback for next/dynamic imports in claim-device-modal.tsx and import-device-modal.tsx. This ensures a consistent loading indicator is shown while lazy-loaded step components (e.g. various import/claim steps and confirmation/results components) are fetched, improving UX.
Use NEXT_PUBLIC_ENV to determine the analytics base URL. Adds an isProduction flag and selects https://analytics.airqo.net when NEXT_PUBLIC_ENV === "production", otherwise falls back to the staging URL. Keeps existing BASE_API_URL behavior unchanged.
Delete the dedicated /devices/claim page and update UI text and routing to reflect a unified "Add AirQo Device" flow. Button labels changed across home, devices overview, my devices, cohorts and empty-state components; changelog updated accordingly. Sidebar entries for the old claim page were removed, the ROUTE_LINKS entry for ORG_REGISTER_DEVICE was deleted, and the recently-visited mapping for /devices/claim was removed to avoid referencing the removed route.
Load the ClaimDeviceModal dynamically and open it in-place instead of navigating to /devices/claim. Replaced router.push(...) calls with local isClaimModalOpen state and rendered the modal in: my-devices page, devices overview page, deploy-device-component, and device-assignment-modal. Removed /devices/claim from prefetch routes and from the page title & routing config. Also removed unused useRouter imports and a redundant context comparison in useContextAwareRouting. This switches the Claim flow to a client-only modal (ssr: false) for a smoother in-app UX.
Raise frontend inactivity auto-logout from 30 minutes to 6 hours in src/vertex/core/auth/authProvider.tsx to reduce login friction during long-running tasks; updated the debug log message accordingly. Update changelog (src/vertex/app/changelog.md) to add a 'Session Management' section describing the change and include authProvider in the modified files list.
Use a namespaced cookie flag and preserve it on logout so the cookie banner preference survives session clears. Renamed localStorage key in CookieInfoBanner to `vertex_cookies_accepted` and added it to the session manager whitelist in `clearSessionData`. Updated changelog to document the session/onboarding changes and the modified files list.
Introduce cohort-scoped groups API and hook, expand types, and refactor the CohortOrganizationsCard to fetch and present organizations itself. Added groupsApi.getGroupsByCohortApi and useGroupsByCohort hook, plus CohortGroupsResponse and new Group fields (cohorts, organization_slug). CohortOrganizationsCard now loads organizations, shows a compact list of up to 3 entries with copy-ID and unassign actions, provides a "View more" dialog with a searchable table, and refetches after unassign; loading state and toasts added. Removed prop-driven organizations/loading from the cohort page and updated changelog count/notes to reflect the refactor.
Add changelog entry describing device management enhancements (guided/fast add flow, smart save routing, improved validation). In device-details-modal.tsx remove unused RefreshCw import, add onSubmit that routes to onSubmitLocal or onSubmitGlobal based on device.network === 'airqo', and consolidate the separate "Sync Global" / "Save Local" buttons into a single "Save" button with unified loading/icon handling.
Refine wording around adding/registering AirQo sensors to improve clarity and user encouragement. Updated the welcome card prompt to "Have an AirQo sensor? Easily add it to your workspace" and adjusted the checklist step to "Register your new AirQo sensor..." — text-only changes, no functional behavior modified.
Wrap the unassign Switch in a Tooltip (TooltipProvider/TooltipTrigger/TooltipContent) to show a "Remove cohort assignment" hint on hover; import the tooltip components. Rename table column prop from `title` to `label` and update labels: "Organization Name" → "Name", "Group ID" → "Org ID", and "Unassign" → "Action". Use `formatTitle` (imported) and uppercase rendering for organization titles. Functional behavior (checked state, disabled `canUnassign`, and unassign handler) is preserved.
Standardize wording for claiming devices to 'Add AirQo device' across the app. Update UI button labels and modal error messages, adjust DownloadHero step text, correct the RBAC doc to reference DEVICE.CLAIM, and update the permissionService description for DEVICE.CLAIM. Modified files: my-devices page, claim-device-modal, DownloadHero, RBAC-Feature-Access.md, and permissionService.
feat: First-Time User Onboarding Flow, Modular Device Addition, and Personal Cohorts Integration (vertex app)
Codebmk
approved these changes
Jun 4, 2026
OchiengPaul442
approved these changes
Jun 4, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.