Version: 1.0.0

Changelog

Author: Carmine Antonio Bonavoglia Creation Date: 08/10/2025
Last Reviewer: Carmine Antonio Bonavoglia Last Updated: 10/11/2025

All notable changes to this project will be documented in this file.

[2.7.0] - 2025-11-10

Summary

This release introduces a comprehensive Brand Identity Management system for team administrators and expands notification customization options for all users.
The new Brand Identity module provides centralized management of team logos, brand assets, and color palettes via an intuitive gallery interface.
Additionally, notification preferences have been enhanced to allow users to individually control the Weekly 3D Assets report notification.

Added

Profile – Brand Identity Management System

New BrandIdentitySection component - Entry point for brand management with responsive team card gallery displaying logos and brand colors.
BrandIdentityGallery modal - Three-tab interface for managing team brand assets:
- Gallery Tab - Image grid (70%) with drag-drop upload panel (30%)
- Details Tab - Image preview (70%) with metadata editor (30%) for display name, description, and alternative text
- Colors Tab - Brand color palette editor for primary, secondary, and two alternative colors
Firebase Storage integration - Scalable image hosting with automatic retry and error handling
Image metadata management - Edit and store custom metadata (displayName, description, alternativeText) for each image
Brand color customization - Pick and save brand colors with live preview
Image dependency checking - Validates if images are used by catalogues before allowing deletion with warnings
Role-based access control - Members can view, Team Admins/Admins/Super Admins can manage
Lazy loading - Images loaded on-demand when gallery modal opens

Components added:

BrandIdentitySection.js — Main container with team card gallery
BrandIdentityGallery.js — Modal with tabbed interface
BrandIdentity/GalleryView.js — Image grid with drag-drop upload
BrandIdentity/DetailsView.js — Image metadata editor
BrandIdentity/ColorsView.js — Brand color picker and editor

Features:

Drag-drop image upload with validation (image/*, max 3MB)
Responsive gallery grid (1-4 columns based on screen size)
Image deletion with dependency checking against catalogues
Firestore metadata storage at Teams/{teamId}/brand_identity
Automatic fallback to brand colors if no logo present
Non-blocking concurrent uploads with progress indication

Profile – Notifications Customization

Weekly 3D Assets notification control - Users can now individually enable/disable the weeklyPublishedVariantsReport notification preference
Enhanced notification preferences system to support granular control per notification within the "Weekly 3D Assets" notification group
Notification settings persist per user profile and are synchronized with backend preferences

MyCatalogues – Brand Identity Image Selection

Brand Identity gallery integration - Users can now select brand images directly from their Brand Identity gallery when creating/editing catalogues
BannerStep.js enhancements - Added support for selecting Logo, Banner Image Desktop, and Banner Image Mobile from Brand Identity gallery
SEOStep.js enhancements - Added support for selecting Featured Image from Brand Identity gallery
Dual image selection - Each catalogue image field now offers two options:
- Select from Brand Identity - Browse and choose from existing team brand assets (with live preview)
- Upload from device - Traditional file upload for new images
Benefits:
- Maintain brand consistency across catalogues using pre-approved assets
- Faster catalogue creation using existing brand images
- Centralized image management through Brand Identity gallery
- Ability to switch between gallery images and device uploads seamlessly
Supported image fields:
- Logo (catalogue header/navigation)
- Banner Image Desktop (hero banner on desktop)
- Banner Image Mobile (hero banner on mobile)
- Featured Image (catalogue listing/SEO thumbnail)

Changed

Notifications UI - Extended notification groups management to support individual notification toggle control within groups
Profile modal styling - Improved color picker and gallery modal appearance for better consistency

Support icon with submenu - Replaced the traditional SupportModal.js full-modal with a sleek icon-based submenu navigation
Two menu options:
- Help - Opens the support modal for contact/help resources (inline modal)
- Link resources - Direct link to documentation (opens in new tab with target="_blank")
Benefits:
- Non-intrusive help access (icon takes minimal space)
- Faster access to documentation via direct link
- Flexible support options for users (modal vs. external docs)
- Cleaner navbar without dedicated support button

Dashboard – Product Detail Performance

UnifiedProductDetail.js optimizations:
- Removed unnecessary removeWhiteBackground() function from Variant Gallery
- Optimized image loading in the Available Variants section for better performance
- Image lazy-loading and caching improvements

Fixed

UnifiedProductDetail.js – Variant Gallery - Removed removeWhiteBackground() function that was causing unnecessary image processing overhead
UnifiedProductDetail.js – Available Variants - Optimized image loading with improved caching strategy and lazy-loading to reduce initial render time and bandwidth usage

Technical Details

Firebase Storage Structure:

teams/{teamId}/logos/ — Team logos
teams/{teamId}/images/ — Brand asset images

Firestore Schema Update:

Teams/{teamId}/brand_identity {
    primaryColor: string (hex),
    secondaryColor: string (hex),
    altColorOne: string (hex),
    altColorTwo: string (hex)
}

Notification Enhancement:

Notification key: weeklyPublishedVariantsReport
Notification group: "Weekly 3D Assets"
Sync method: updateNotificationPreferences(userId, 'weeklyPublishedVariantsReport', enabled)

[2.6.2] - 2025-10-31

Fixed

In Model.js dynamically adjusted the global opacity to 1.0 or 0.95 of transmissive materials based on the presence of a transmission texture.

[2.6.1] - 2025-10-23

Summary

This release addresses several UI rendering issues and introduces improved multi-domain support for team member invitations.
Display problems affecting the Orders and Subscriptions sections have been resolved, along with fixes for modals containing tutorials and step-by-step guides.
The My Teams section in Profile now supports multiple email domains per client, enhancing flexibility for organisations with diverse domain structures.

Changed

Profile – My Teams Multi-domain Support

Updated the Add Member functionality in the My Teams section.
The email domain input now references list_mail_domain (array of strings) instead of mailDomain (single string).
Benefits:
- Clients with multiple authorised domains can now select which domain to use when adding team members.
- For clients with a single domain, the interface remains identical to the previous version.
- Improved flexibility for organisations managing multiple email domains under the same client account.

Fixed

UI and Display Issues

Resolved display issues in the Orders section affecting layout consistency and data presentation.
Fixed rendering problems in the Subscriptions section.
Corrected visual inconsistencies in modals containing tutorials and step-by-step guides.
Improved overall modal responsiveness and content alignment across different screen sizes.

[2.6.0] - 2025-10-17

Summary

This release introduces a complete redesign of the Profile section, with the addition of Team management and user-specific notification settings.
On the backend, three key processes were implemented to standardise data and automate structure generation:

TeamsGenerator.js for dynamic team creation based on active client subscriptions.
ProfilesTeamsRolesRefactor.js for refactoring roles, profiles, and team–profile relationships.
ProfilesNotificationsMapper.js for granular notification mapping per role.

On the frontend, the Profile section has been completely redesigned with a new sidebar layout and four dedicated tabs: Personal Info, Change Password, My Teams, and Notifications.
The result is a unified, modern system for managing profiles, teams, and notifications, ensuring consistent data across frontend and backend.

Added

Profile – New Structure

The Profile section now features a new layout divided into four subsections:
1. Personal Info – user personal information.
2. Change Password – password and authentication management.
3. My Teams – view and manage teams linked to active licences.
4. Notifications – manage notification preferences based on user role.

TeamsGenerator.js – Automated Team Creation

Implemented a new process for generating teams based on each client’s active subscriptions.
The process includes five main phases:
1. Initialisation: retrieve client and validate data (Client, ARShadesSubscriptions).
2. Active licence filtering: only licences with status: "Active" are processed.
3. Duplicate cleanup: remove existing teams with the same clientId + subscriptionId combination.
4. Team creation per licence:
  - Automatically associate compatible profiles based on subscription catalogues.
  - Assign roles (admin, member) and status (active).
5. Save to Firestore with progress tracking and UI pagination.
Each generated team contains:
- clientRef and subscriptionRef
- list_profiles with roles, statuses, and timestamps
- list_client_admins for client admin management

ProfilesTeamsRolesRefactor.js – Role and Relationship Refactor

Introduced an automated refactor process to standardise role handling and introduce new metadata fields.
Key operations include:
- Automatic conversion of roles Validator → Cliente in both Teams and Profiles collections.
- Addition of the isClientAdmin field in profiles to identify main administrators.
- Team updates with isAdmin and isValidator flags for each profile in list_profiles.
- Full progress tracking and detailed logging for:
  - Teams updated
  - Profiles updated
  - Roles converted
Final result:
- Consistent role structure across Profiles and Teams
- Updated documents with administrative metadata
- Removal of obsolete “Validator” vs “Cliente” distinction

ProfilesNotificationsMapper.js – Role-based Notification Mapping

Introduced a centralised notification type map by role, managed dynamically through script.
The notificationTypesByRole map defines which notifications are enabled for each role.
Supported roles:
- Admin (16 active notifications, all in Bcc)
- Client Admin (12 active notifications)
- Cliente (11 active notifications)
- Validator (1 notification – Weekly 3D Assets)
- Modellista / ModellerSupervisor (1 notification – Weekly 3D Modelling)
- Other (no notifications enabled)
For each profile:
- Determine the effective role.
- Special handling for “Client Admin” if listed in mainProfileList or list_client_admins.
- Update the notification_types field in the profile document.
- Record per-role statistics and detailed logs of the process.
Final result:
- Each profile receives only the notifications relevant to its role.
- Centralised and coherent notification configuration.
- Safe fallback for unrecognised roles.

Frontend – Profile UI

Added

New Profile interface with a vertical sidebar layout and four distinct tabs:
- Personal Info and Change Password retain existing logic but have been visually refined with unified components.
- My Teams introduces a tabular view of teams associated with the user’s active licences:
  - Displays team name, subscription, members, and roles.
  - Highlights admins and validators with dedicated badges.
  - Includes quick actions (view, invite, remove) for member management.
- Notifications enables viewing and editing of personal notification preferences:
  - Each notification type is represented by a toggle switch.
  - Notifications are grouped by category (Catalogue, Orders, Subscription, Support, Teams).
  - The system syncs automatically with Firestore in real time.

Changed

Fully refactored the ProfileView component into modular subsections.
Introduced a persistent sidebar menu for intuitive navigation between tabs.
Improved state handling and Firestore sync through custom hooks.
Optimised mobile experience with responsive design and smooth vertical scrolling.
Updated the real-time notification system to reflect changes immediately upon user updates.

Improved UX/UI

Modern, cohesive interface with updated typography and colour palette.
Contextual modals and toast messages for confirmation and error handling.
Progressive data loading with clear state indicators.
Enhanced accessibility (focus states, aria-labels, improved readability).

Changed

Data and Role Standardisation

Removed the “Validator” role, replaced by “Cliente” across all collections.
Added metadata fields (isAdmin, isValidator, isClientAdmin) for granular management.
Refactored Client, Teams, and Profiles relationships for consistency and scalability.
Updated validation and synchronisation logic between teams and profiles.

Fixed

Resolved duplicate team creation for the same client + subscription combination.
Corrected mapping of profiles with undefined roles (now set as "Other").
Fixed Firestore timestamp and metadata synchronisation.
Improved logging in TeamsGenerator, ProfilesTeamsRolesRefactor, and ProfilesNotificationsMapper.
Fixed real-time sync of frontend notification preferences after temporary disconnection.
Resolved rendering issues for multi-licence profiles in the Teams list.
Fixed mapping issues related to the creation and modification of new catalogues in both Catalogues and DraftedCatalogues collections.

[2.5.1] - 2025-10-08

Changed

Updated role validation in Log component

Added the "Validator" role alongside "Cliente" for decline variants.
Enhanced filtering logic to improve accuracy in status representation within the Log component.
This update ensures that both Validator and Cliente roles are correctly included in decline-related workflows and UI filters.

[2.5.0] - 2025-10-07

Summary

This release introduces major improvements to the Orders, Notifications, and Tickets modules.
A real-time ticket chat system has been implemented using Firebase, allowing instant communication between users and support.
Orders now feature enhanced status mapping, new Revise Quote and New Ticket actions, and integrated email notifications.
Notifications have been redesigned to support direct navigation and unified updates across the entire platform.

Added

Orders

Order status mapping update:
- Revised the internal mapping logic in getStatusText for improved clarity and localisation.
- Standardised status naming for better workflow readability:
  - pending_analysis → Pending Analysis
  - analysis_complete → Analysis Complete
  - processing_addition → Processing Addition
  - working_3d_assets → Batch Created (Frame Validation)
  - freezing_time → Working – Freezing Time
  - quote_requested → Quote Requested
  - quote_sent → Quote Provided
  - quote_accepted → Quote Accepted
  - quote_rejected → Quote Rejected
  - completed → Assets Delivered
  - deleted → Order Cancelled
  - error → Analysis Error
- Added conditional label mapping:
  - For users with the Client or Cliente role, the quote_sent status now appears as Quote Received.

3D Asset Creation: Order Status Reference

Order Status	When It Occurs	Description
Pending Analysis	After the client submits the SKU list	The system is checking if the requested SKUs can be processed.
Analysis Complete	Once the SKU analysis is finished	The requested SKUs have been successfully analysed.
Analysis Error	If an error occurs during SKU analysis	The SKU analysis failed due to invalid or missing data.
Quote Requested	When the client requests a quotation	A quotation for the analysed SKUs has been requested.
Quote Provided	When Spaarkly issues the quotation	The client sees “Quote Received”, Spaarkly sees “Quote Sent”.
Quote Rejected	When the client rejects the quotation	The order is halted because the quotation was not accepted.
Quote Accepted	When the client accepts the quotation	The order is confirmed and moves to the production workflow.
Order Cancelled	When the client or Spaarkly cancels the order	The order has been cancelled and will not be processed further.
Batch Created (Frame Validation)	When the ordered batch is created and enters validation	The order moves to the frame validation step prior to production.
Working – Freezing Time	When the supervisor assigns the first model of the batch	Production has started. SKU list cannot be modified (except up to 10 SKUs).
Assets Delivered	When the 3D asset creation and validation are completed	The ordered assets are finalised, validated, and ready for publication.

Revise Quote feature for administrators:
- Introduced a new Revise Quote action available exclusively to Spaarkly administrators.
- When a client rejects a quote, administrators can reopen and revise it directly from the order interface.
- A dedicated ticket is automatically created for each Rejected Quote, ensuring traceable and structured communication.
New Ticket action in Orders:
- Added a new New Ticket button to the Orders section.
- Visible to all users who have permission to view orders (creators and assignees).
- Allows opening a new ticket directly linked to the selected order.
Confirmation modal for Sent Quote:
- Added a confirmation modal triggered when a quotation is sent.
- Features include:
  - Summary of quotation details.
  - Confirmation step before dispatch.
  - Validation of required fields before submission.
Email and Firebase integration:
- Added two new environment variables for automated email notifications:
  - process.env.REACT_APP_CATALOG_ORDER_REJECT_NOTIFICATION – sends an email when a quote is rejected.
  - process.env.REACT_APP_SEND_QUOTATION_EMAIL – sends an email when a quote is sent.
- Both actions trigger updates in Firestore and notifications across the system.

Notifications

Unified notification structure:
- Introduced a unified notification model to handle both Orders and Tickets events.
- Notifications now include contextual information such as:
  - Type of event (Order update, Ticket message, Rejected Quote, etc.).
  - Related collection reference (collectionRef).
  - User who triggered the action.
- Each notification links directly to its related view (Order or Ticket).
Dedicated subsections and UI integration:
- Added separate subsections for Orders and Tickets inside the Notifications panel.
- Integrated notification previews into:
  - NotificationsDropdown (header area).
  - GeneralInfoSection on the Home page.
- Each notification now includes live timestamps and badge counters.
Direct navigation from notifications:
- Clicking an Order notification redirects the user to the corresponding Order page.
- Clicking a Ticket notification opens the Tickets modal directly with the selected ticket already loaded.
- At present, this feature is fully active for the Orders section, with Ticket navigation available in preview mode.
Real-time updates:
- Implemented Firebase listeners for real-time notification streaming.
- Updates now appear instantly across open tabs and sessions.

Tickets

Ticketing system (initial release):

Introduced the Tickets collection for structured communication between users and support.
Each ticket document includes:
- collectionRef: reference ID to the related entity (e.g. Order or Catalogue).
- object: short description or title of the ticket.
- status: can be open or closed, editable only by Spaarkly users.
- messages: chronological list of message objects including author, text, timestamp, and attachments.

Example of the ticket JSON structure:

{
    "collectionRef": "DEFAULT_COLLECTION_REF_ID",
    "createdAt": "1 January 2024 at 10:00:00 UTC+1",
    "messages": [
        {
            "attachments": [
                {
                    "nameAttachment": "initial_document.pdf",
                    "urlAttachment": "https://storage.example.com/attachments/default/doc_1.pdf"
                }
            ],
            "author": "user_default@mail.com",
            "text": "Good morning, I've attached the requested **PDF** document for the standard order.",
            "timestamp": "1 January 2024 at 10:00:00 UTC+1"
        }
    ],
    "object": "Default Order Object",
    "status": "open",
    "ticketId": "DEFAULT_TICKET_XYZ123",
    "type": "defaultType",
    "updatedAt": "1 January 2024 at 10:07:45 UTC+1"
}

Instant chat system with Firebase:
- Implemented real-time messaging for Tickets using Firebase listeners, enabling an instant chat experience similar to Telegram.
- Messages are updated live across all active sessions without needing manual refresh.
- The chat supports both text and attachment exchange in real time.
- Each message includes sender details, timestamp, and attachment metadata.
Tickets modal and interface:
- Introduced a new Tickets modal designed with two main sections:
  - Sidebar (left panel) — lists all existing tickets with status and preview of the last message.
  - Chat area (main content) — displays the selected ticket conversation with instant updates.
- Added a New Ticket button directly inside the modal, allowing users to open a new ticket without leaving the interface.
Ticket management in Orders:
- Tickets can be created from within the Orders page by:
  - Users with access to the Orders section.
  - The creator or assignee of the related order.
- Tickets can be opened regardless of order status.
- Automatically generated tickets for Rejected Quotes to facilitate communication with support.
Ticket notifications:
- Added a dedicated subsection for ticket updates within the Notifications panel.
- Integrated ticket alerts into:
  - NotificationsDropdown.
  - GeneralInfoSection on the Home page.
- Notifications display the ticket’s object, latest author, and related order reference.

Changed

Orders

Refactored getStatusText for consistency and localisation.
Updated all order interfaces to reflect the new status mapping and conditional labelling.
Improved integration between Orders, Tickets, and Notifications for unified data flow.
Enhanced visibility and access control for Revise Quote and New Ticket actions in the Orders table and detail views.

Notifications

Refined UI hierarchy and typography for better visual distinction between Order and Ticket updates.
Enhanced performance of Firebase listeners to reduce latency in multi-session environments.
Updated notification icons and colour accents to match their context (Orders, Tickets, System).

Tickets

Adjusted message rendering logic for improved readability and alignment.
Updated attachment preview handling for PDF and image formats.
Refined access control: only Spaarkly staff can modify ticket statuses.
Improved scroll behaviour and focus handling when sending messages in the chat.

Fixed

Orders

Fixed missing visual feedback on quote_sent status for non-admin users.
Resolved UI desynchronisation when switching between quote states (Sent, Rejected, Accepted).
Corrected automatic creation of notifications for rejected quotes.

Notifications

Fixed issue where duplicate notifications appeared in the dropdown when multiple updates occurred in short intervals.
Resolved inconsistent badge counter updates in the Home page’s GeneralInfoSection.
Improved error handling for real-time listener disconnections.
Fixed navigation logic for Order notifications to ensure direct access to the correct order detail view.

Tickets

Fixed timestamp formatting inconsistencies in message lists.
Corrected URL encoding for attachments containing special characters.
Prevented duplication of ticket notifications when reopened for the same order.
Resolved occasional rendering flicker when switching rapidly between multiple open tickets.

[2.7.0] - 2025-11-10​

Summary​

Added​

Profile – Brand Identity Management System​

Profile – Notifications Customization​

MyCatalogues – Brand Identity Image Selection​

Changed​

Dashboard – Support Navigation​

Dashboard – Product Detail Performance​

Fixed​

Technical Details​

[2.6.2] - 2025-10-31​

Fixed​

[2.6.1] - 2025-10-23​

Summary​

Changed​

Profile – My Teams Multi-domain Support​

Fixed​

UI and Display Issues​

[2.6.0] - 2025-10-17​

Summary​

Added​

Profile – New Structure​

TeamsGenerator.js – Automated Team Creation​

ProfilesTeamsRolesRefactor.js – Role and Relationship Refactor​

ProfilesNotificationsMapper.js – Role-based Notification Mapping​

Frontend – Profile UI​

Added​

Changed​

Improved UX/UI​

Changed​

Data and Role Standardisation​

Fixed​

[2.5.1] - 2025-10-08​

Changed​

Updated role validation in Log component​

[2.5.0] - 2025-10-07​

Summary​

Added​

Orders​

3D Asset Creation: Order Status Reference​

Notifications​

Tickets​

Changed​

Orders​

Notifications​

Tickets​

Fixed​

Orders​

Notifications​

Tickets​

[2.7.0] - 2025-11-10

Summary

Added

Profile – Brand Identity Management System

Profile – Notifications Customization

MyCatalogues – Brand Identity Image Selection

Changed

Dashboard – Support Navigation

Dashboard – Product Detail Performance

Fixed

Technical Details

[2.6.2] - 2025-10-31

Fixed

[2.6.1] - 2025-10-23

Summary

Changed

Profile – My Teams Multi-domain Support

Fixed

UI and Display Issues

[2.6.0] - 2025-10-17

Summary

Added

Profile – New Structure

TeamsGenerator.js – Automated Team Creation

ProfilesTeamsRolesRefactor.js – Role and Relationship Refactor

ProfilesNotificationsMapper.js – Role-based Notification Mapping

Frontend – Profile UI

Added

Changed

Improved UX/UI

Changed

Data and Role Standardisation

Fixed

[2.5.1] - 2025-10-08

Changed

Updated role validation in Log component

[2.5.0] - 2025-10-07

Summary

Added

Orders

3D Asset Creation: Order Status Reference

Notifications

Tickets

Changed

Orders

Notifications

Tickets

Fixed

Orders

Notifications

Tickets