Requirements

Product Requirements Document for Tenant-Specific Custom Pages in RedwoodJS

Objective:

Develop a multi-tenant feature within a RedwoodJS application that allows for the creation of customizable pages for each client, based on attributes fetched from a database.

Features and Functionality:

Dynamic Page Generation: The system should dynamically generate pages based on tenant-specific data.

• Tenant Data Model: Define a data model to store tenant-specific attributes. This model should include fields for layout preferences, color schemes, content placeholders, etc.

  • Prop-Driven Design: Ensure each component can accept props to customize its appearance and behavior. For example, a header component could accept props for background color, text color, logo, etc.
  • Layout Components: Design higher-order layout components that define the page structure, which can be composed with the UI components.

• Dynamic Routing: Implement dynamic routing in RedwoodJS to serve different tenants. Each tenant's page URL could be something like /[tenant-name], where tenant-name is dynamically resolved.

  • File Structure

    • TenantLayout.tsx in /src/Layouts for the main layout template.

    • TenantLayout.tsx: This file will be the main layout for tenant-specific pages. It will accept props like name, logo, colors, etc., and structure the page into navigation, body, and footer.

    • TenantPage.tsx in /src/Pages for handling dynamic tenant-specific content.

      • TenantPage.tsx: The main page that routes to custom components based on the tenant parameter. This page will use the TenantLayout and dynamically render content based on the tenant's data.
        • Dynamic Content: Use a router parameter (like /:tenantName) to determine which tenant's data to fetch and display.

  • TenantSpecficComponent.tsx in /src/Components for tenant-specific and shared functionalities.

    • Navigation: Component for the top navigation bar./src/componets/Common/Navigation.tsx.
    • Body: Component for showing specfic tenant content.
      • TenantSpecificComponent.tsx: Components that are unique to each tenant. Organized into subdirectories for each tenant if the number of custom components grows large. /src/componets/[Tenant-name]/[Componet].tsx
      • CommonComponents.tsx: Any shared components that might be used across different tenants. /src/componets/[Common]/[Componet].tsx
      • FixieAiAgent.tsx: The specific component for displaying the Fixie AI agent, which can be dynamically included in the TenantPage layout's body. /src/componets/[Fixie]/[Componet].tsx

  • Footer: Component for the footer, /src/Componets/Common/Footer.tsx.

Database Integration: Implement a database schema that stores tenant attributes and preferences.

• Identification and Contact Information

  • Tenant ID: A unique identifier for each tenant.
  • Company Name: The name of the tenant's organization.
  • Contact Details: Email, phone number, and other relevant contact information.

• Branding and Aesthetics

  • Logo: The tenant's company logo.
  • Color Scheme: Preferred colors for the website's theme, which could include primary, secondary, and accent colors.
  • Fonts: Specific fonts or font styles they prefer.

• Layout Preferences

  • Header/Footer Customization: Different layouts or content for headers and footers.
  • Navigation Structure: Custom navigation menus or links.
  • Page Templates: Specific templates that tenants can choose for different types of pages.