Add Database Explorer page to Staff Portal Tech Admin section for MongoDB collections/documents

[nnoce14]

Summary

Add a new page to the Tech Admin section in ui-staff called Database Explorer.

Purpose

• Provide developers with a UI for viewing MongoDB documents for collections.
• Support selecting a collection and optionally filtering/narrowing results (with a simple query field for advanced filtering).
• Render documents in a unified, extensible manner (avoid hardcoding collection schemas or layouts).
• Collections list and document queries must be permission-protected (permissions.techAdminPermissions.canViewDatabaseDocuments).
• Only staff with tech admin role/permission should access this functionality (mirroring existing Tech Admin route permission patterns).

UI Expectations

• Use a paginated table (such as Ant Design's Table component) to display results, with each row representing a MongoDB document.
• Each row should be expandable/collapsible; when expanded, the full JSON of the record is rendered in a clear, human-readable format.
• For each field shown in the expanded view, display both the type and current value (key, type, value).
• Table should support moderate-to-large record counts gracefully with pagination controls.

Requirements

• Page must be registered under ui-staff-route-tech-admin, using the shared VerticalTabs component from @ocom/ui-shared for navigation.
• The backend (@ocom/graphql and/or related API) must expose new GraphQL queries:
  • Query available MongoDB collections (permission-protected)
  • Query documents for a given collection with support for limited filtering
  • Ensure all GraphQL queries related to this feature enforce the correct permission
• The frontend page should:
  • Allow tech admin users to select a collection
  • Display results using a paginated, expandable table as described above
  • Support optional query/filter input for narrowing results
  • Be built for extensibility to support future persistence model changes; avoid brittle, hardcoded interfaces
  • All API calls must require permissions.techAdminPermissions.canViewDatabaseDocuments
• Add route-level permission checks on the new page (using existing section-level permission guard patterns).

Implementation Guidance

• Investigate existing patterns for route-level and API permission enforcement in ui-staff and @ocom/graphql
• Use the shared VerticalTabs UI for integrating into the Tech Admin area
• Leverage Ant Design Table for paginated/collapsible record viewing
• Expanded rows render full JSON with field types and values (key, type, value)
• Ensure all backend and frontend security is in place
• Document the new page and API usage in both code and developer wiki (if applicable)

Acceptance Criteria

• New Tech Admin page is accessible only to users with the database documents permission
• Collections can be listed and selected (with results shown as paginated/collapsible table per document)
• Each expanded row shows fields, types, and values clearly
• Filtering/query functionality works and returned documents are accurate
• Page is extensible for future backend/persistence adaptation
• Code and security reviews are approved