-
Notifications
You must be signed in to change notification settings - Fork 2
Frontend Structure
Paulo Gomes da Cruz Junior edited this page May 6, 2026
·
1 revision
This page documents the directory layout and file taxonomy for the
frontend/src/ source tree. Each file entry includes a short description
of its purpose and architectural role.
src/
│
├── main.ts # Application entry point; wires Vue app, router,
│ # plugins (Amplify, VueDOMPurifyHTML, VueTheMask),
│ # custom directives, and global properties
│
├── App.vue # Root component; owns global event buses
│ # (modal-notification, toast-notification,
│ # overlay-event), renders router-view with
│ # keep-alive for SearchPage
│
├── routes.ts # Vue Router configuration; all route definitions,
│ # meta (requireAuth, visibleTo, redirectTo,
│ # featureFlagged), and the beforeEach navigation
│ # guard for auth and role enforcement
│
├── CoreConstants.ts # Environment variable accessors (featureFlags,
│ # backendUrl, frontendUrl, AWS Cognito config);
│ # reads from window.localStorage or import.meta.env
│
├── directivesMap.ts # Registers custom Vue directives:
│ # v-masked (Carbon input masking) and v-shadow
│ # (Shadow DOM part exposure)
│
├── styles.ts # Global style imports: BC Sans font, global SCSS
│
├── shims-vue.d.ts # TypeScript declaration shim for *.vue modules
│
├── assets/
│ └── styles/
│ └── global.scss # Global SCSS variables, resets, and layout classes
│
├── dto/ # Data Transfer Object interfaces and enums
│ │ # shared across pages, services, and composables
│ ├── CommonTypesDto.ts # Shared types: CodeDescrType, CodeNameType,
│ │ # ValidationMessageType, FuzzyMatchResult,
│ │ # ClientDetails, ClientLocation, ClientContact,
│ │ # UserRole, SessionProperties, Submitter enums
│ └── ApplyClientNumberDto.ts # Submission-specific types: Address, Contact,
│ # FormDataDto for BCeID/BCSC/Staff application forms
│
├── services/
│ └── ForestClientService.ts # Pure utility functions for data transformation:
│ # addNewAddress, addNewContact, toTitleCase,
│ # toSentenceCase, codeConversionFn,
│ # buildProviderAuthority, formatDate, getAddressDescription,
│ # getContactDescription, retrieveClientType,
│ # retrieveLegalTypeDesc (no class, no HTTP calls)
│
├── composables/ # Reusable Vue composition functions (use* prefix)
│ ├── useFetch.ts # useFetch and useFetchTo: Axios-based data fetching
│ │ # with reactive data/error/loading refs, Bearer token
│ │ # injection, AbortController cancellation, and
│ │ # error-notification event bus emission
│ ├── useElementVisibility.ts # IntersectionObserver wrapper returning a promise-
│ │ # based reactive visibility ref
│ ├── useFocus.ts # Focus and scroll management: setFocusedComponent,
│ │ # safeSetFocusedComponent, setScrollPoint using
│ │ # querySelector with attribute selectors
│ ├── useScreenSize.ts # Reactive media-query breakpoints:
│ │ # isSmallScreen (≤671px), isMediumScreen (672–1055px),
│ │ # isTouchScreen (hover:none)
│ └── useSvg.ts # Factory that wraps @carbon/pictograms SVG objects
│ # into render-function Vue components
│
├── helpers/ # Non-composable utility modules
│ ├── ForestClientUserSession.ts # Singleton session class implementing SessionProperties;
│ │ # manages Cognito sign-in/sign-out, token parsing,
│ │ # user/authorities state, and session refresh interval
│ ├── DataConverters.ts # Stateless lookup functions: retrieveClientType (legalType→clientType),
│ │ # retrieveLegalTypeDesc (legalType→human label)
│ ├── CustomDirectives.ts # Directive factories: masking() for Carbon Web Component
│ │ # shadow-root input masking; shadowPart for MutationObserver-
│ │ # based ::part() attribute injection
│ └── validators/
│ ├── GlobalValidators.ts # Composable validator functions: isNotEmpty, isNotEmptyArray,
│ │ # isOnlyNumbers, isMinSize, isMaxSize, isWithinRange,
│ │ # isValidDayOfMonth, isEmail, isPhoneNumber, isPostalCode,
│ │ # isNullOrUndefinedOrBlank — return error string or ""
│ ├── BCeIDFormValidations.ts # Validator compositions for the BCeID application form
│ ├── StaffFormValidations.ts # Validator compositions for the staff application form
│ ├── SubmissionReviewValidations.ts # Validators for staff submission review fields
│ └── SubmissionValidators.ts # Cross-field and cross-step form validators
│
├── components/ # Reusable Vue components (not page-specific)
│ ├── DataFetcher.vue # Renderless component wrapping useFetchTo;
│ │ # exposes content/response/loading/error via slots
│ │ # for declarative data fetching in templates
│ ├── MainHeaderComponent.vue # Top navigation bar: logo, env indicator, help modal,
│ │ # logout modal, user profile panel (IDIR roles/provider)
│ ├── UserProfileComponent.vue # Avatar with initials, provider badge, and role list
│ ├── LoadingOverlayComponent.vue # Full-screen overlay with Carbon loading spinner;
│ │ # dismissible via Escape key or overlay-event bus
│ ├── forms/ # Atomic form-field components
│ │ ├── AutoCompleteInputComponent.vue # Text input with debounced API autocomplete
│ │ ├── ComboBoxInputComponent.vue # Carbon cds-combo-box wrapper
│ │ ├── DateInputComponent/ # Three-part date input (year/month/day)
│ │ │ ├── index.vue # Orchestrator; wires DateInputPart trio,
│ │ │ │ # cross-validates day-of-month on month/year change
│ │ │ ├── DateInputPart.vue # Individual year/month/day input field
│ │ │ └── common.ts # DatePart enum and shared date utilities
│ │ ├── DropdownInputComponent.vue # Carbon cds-dropdown wrapper with validation
│ │ ├── MultiselectInputComponent.vue # Carbon cds-multi-select wrapper
│ │ ├── RadioInputComponent.vue # Carbon cds-radio-button-group wrapper
│ │ ├── ReadOnlyComponent.vue # Displays a labelled read-only field value
│ │ ├── SimpleCheckboxInputComponent.vue # Single checkbox with validation support
│ │ ├── TextInputComponent.vue # Carbon cds-text-input wrapper with mask support
│ │ ├── TextareaInputComponent.vue # Carbon cds-textarea wrapper
│ │ └── ToggleComponent.vue # Carbon cds-toggle wrapper
│ ├── grouping/ # Composite form-section components
│ │ ├── AddressGroupComponent.vue # Full address entry group (street, country,
│ │ │ # province, city, postal, phone, fax, email)
│ │ ├── ContactGroupComponent.vue # Contact entry group (type, name, phone, email,
│ │ │ # location associations)
│ │ ├── StaffContactGroupComponent.vue # Staff-specific contact group variant
│ │ ├── StaffDetailsLocationGroupComponent.vue # Staff address+details composite
│ │ ├── StaffLocationGroupComponent.vue # Staff location entry group
│ │ ├── ErrorNotificationGroupingComponent.vue # Collects and renders field-level
│ │ │ # validation errors from submission-error-notification bus
│ │ └── FuzzyMatchNotificationGroupingComponent.vue # Renders fuzzy-match warnings
│ └── types.ts # Shared component-level TypeScript types
│
└── pages/ # Route-level page components (Page suffix)
│
├── LandingPage.vue # Public landing: login buttons per provider
├── UserLoadingPage.vue # Post-Cognito callback; parses session and redirects
├── ErrorPage.vue # Generic error display
├── NotFoundPage.vue # 404 page
├── LogoutPage.vue # Triggers Cognito sign-out and redirects
├── UnauthorizedErrorPage.vue # Shown inline when meta.showUnauthorized is true
├── FormSubmittedPage.vue # External user submission confirmation
├── FormStaffConfirmationPage.vue # Staff client-created confirmation
├── FormStaffProcessingPage.vue # Polls/displays async processor status after staff submit
├── SubmissionListPage.vue # Staff paginated list of pending submissions
├── SearchPage.vue # Staff client search (keep-alive cached)
├── SubmissionReviewPage.vue # Staff manual review of a single submission
├── ClientDetailsPage.vue # Staff client record viewer/editor
│
├── FormBCeIDPage.vue # BCeID multi-step application form (external company)
├── FormBCSCPage.vue # BCSC multi-step application form (individual)
│
├── bceidform/ # Wizard step components for BCeID/BCSC forms
│ ├── BusinessInformationWizardStep.vue # Step 1: company/individual details
│ ├── AddressWizardStep.vue # Step 2: location addresses
│ ├── ContactWizardStep.vue # Step 3: contacts
│ └── ReviewWizardStep.vue # Step 4: review and submit
│
├── staffform/ # Wizard step components for Staff form
│ ├── BcRegisteredClientInformationWizardStep.vue # BC registered company
│ ├── CombinedClientInformationWizardStep.vue # Combined/other entity type
│ ├── FirstNationClientInformationWizardStep.vue # First Nation entity
│ ├── IndividualClientInformationWizardStep.vue # Individual applicant
│ ├── ContactsWizardStep.vue # Contacts for staff form
│ ├── LocationsWizardStep.vue # Locations for staff form
│ └── ReviewWizardStep.vue # Review and submit
│
├── search/
│ └── AdvancedSearch.vue # Advanced filter panel for SearchPage
│
└── client-details/ # Sub-components for ClientDetailsPage
├── SummaryView.vue # Client summary card
├── LocationView.vue # Client location details and edit
├── LocationRelationshipsView.vue # Location-contact relationship table
├── ContactView.vue # Contact details and edit
├── HistoryView.vue # Client change history log
├── RegistrationNumber.vue # Registration number display/edit
├── ClientRelationshipForm.vue # Form for adding/editing related clients
├── ClientRelationshipRow.vue # Single row in the relationships table
└── shared.ts # Shared types and utility functions for
# client-details sub-components
CLIENT application (The Ministry of Forests' client management system)
Frontend
General