Extensibility and Customization
Relevant source files
The following files were used as context for generating this wiki page:
Extensibility and customization within the Monarch Property Management platform are primarily driven by a robust design system, modular component architecture, and a flexible data-import framework. The system is designed to allow developers to modify visual properties through a centralized token specification while enabling administrative users to customize project-specific documents like Requests for Quotation (RFQs) via templates.
The architecture emphasizes a "single source of truth" for design tokens and uses React-based providers to manage global states such as theming, language, and security headers. This ensures that the application can scale and adapt to different branding requirements or functional extensions without significant refactoring of core logic.
Design Token System
The core of the project's customization capabilities lies in the Monarch Design System. Visual properties are defined in a tokens.json file, which serves as the specification for colors, spacing, typography, and motion duration.
Token Architecture
The design tokens are integrated into the Tailwind CSS configuration and exported as CSS custom properties, allowing for global updates to the UI by modifying a single JSON file.
| Token Category | Description | Implementation Detail |
|---|---|---|
| Colors | Brand, semantic (success, warning, error, info), and surface colors. | Integrated via CSS variables in src/index.css. |
| Spacing | Standardized scale from 4px to 128px. | Ensures consistent layout across components. |
| Typography | Font families (Inter, Playfair Display), sizes, and weights. | Defined in src/index.css and tokens.json. |
| Motion | Duration and easing functions for animations. | Respects prefers-reduced-motion settings. |
Sources: src/design-system/README.md:12-25, src/index.css:7-50
Theming Foundation
The ThemeProvider.tsx component manages theme persistence and system preference detection. It provides automatic switching between light and dark modes while ensuring WCAG 2.2 AA compliance for color contrast.
The diagram above shows how the ThemeProvider intercepts preferences to apply global CSS variables.
Sources: src/design-system/README.md:27-36, src/index.css:122-160
RFQ Template Customization
The Request for Quotation (RFQ) module provides high extensibility through its support for external data structures. Administrators can customize the scope of a project by importing or exporting configuration data in multiple formats.
Data Import/Export Framework
The RFQ system utilizes a flexible schema that allows for the customization of building details, technical specifications, and commercial frameworks.
- JSON Templates: Allows for complete RFQ structure migration and backup.
- CSV/XLSX Imports: Supports bulk customization of unit configurations and technical loads.
- Manual Overrides: Administrators can override document control fields, such as issuer details and project addresses, independently of property links.
Sources: src/pages/admin/RFQEdit.tsx:280-350, src/pages/admin/RFQEdit.tsx:88-150
Modular Tab Configuration
The RFQ editor is broken down into modular tabs, each responsible for a specific subset of project customization. This modularity allows developers to add new sections to the RFQ process without impacting existing data flows.
| Tab | Customizable Scope |
|---|---|
| Executive Summary | Building overview, project scope, and design intent. |
| System Strategy | System types and prohibited configurations. |
| Commercial Framework | Payment milestones and maintenance terms. |
| Compliance | Custom regulatory requirements (OSHA, NFPA, etc.). |
Sources: src/pages/admin/RFQEdit.tsx:156-170, src/pages/admin/RFQEdit.tsx:500-580
SEO and Metadata Extensibility
The platform supports deep customization of metadata and structured data through the EnhancedSEO and SEOHead components. This allows for page-specific customization of how properties and services are indexed by search engines.
Structured Data Customization
The system supports multiple Schema.org types, which can be extended or modified on a per-page basis to optimize for different business entities.
This flow ensures that metadata remains extensible as new pages or business types (e.g., LocalBusiness, RealEstateAgent) are added.
Sources: src/components/EnhancedSEOLayout.tsx:15-40, src/components/SEO/EnhancedSEO.tsx:30-60
UI Component Extensibility
Phase 2 of the design system focuses on token-driven components that support visual variants. Components like Card and CTABanner are designed to be customized via props to support different visual "flavors" (e.g., default, elevated, neumorphic, glass).
Component Variants
Developers can customize component appearances through a standardized variant prop, which maps to specific CSS classes defined in the design system.
Sources: src/pages/DesignSystemShowcase.tsx:135-180, src/index.css:470-520
Conclusion
Extensibility in the Monarch Property Management project is achieved by decoupling visual configuration from component logic and project data from hardcoded schemas. The use of design tokens ensures visual consistency while enabling global changes, and the modular RFQ system allows for the detailed customization of property management workflows. This architecture provides a scalable foundation for future enhancements, such as Headless CMS integration and advanced analytics instrumentation.
Sources: src/design-system/README.md:65-80, src/App.tsx:20-80