Routes / Navigation

Author: Domenico Cerone Creation Date: 13/10/2025
Last Reviewer: Domenico Cerone

This document describes all web routes and navigation patterns for the Frame Validation application.

Route Overview

The Frame Validation application uses an ID-based hierarchical routing system to manage navigation through catalog orders, products, and variants.

Path / Route Name	Component / Page	Parameters	Description
/framevalidation	Home.js	None	Main homepage - Displays all catalog orders with status "working_3d_assets" and type "order_3d_asset".
/framevalidation/:catalogOrderId	Products.js	catalogOrderId (string)	Products page - Builds the products view starting from variants of the specified catalog order.
/framevalidation/:catalogOrderId/:productId	Variants.js	catalogOrderId (string), productId (string)	Variants page - Filters variants by specified catalog order and product.
/framevalidation/:catalogOrderId/:productId/:variantId	VariantDetails.js	catalogOrderId (string), productId (string), variantId (string)	Variant details - Complete interface for managing and validating the specific variant.

Navigation Hierarchy

Level 1: Catalog Orders

The homepage retrieves catalog orders from the user profile and filters them:

// Homepage logic
// 1. Retrieve catalogOrders from list_3d_catalogOrders property in user profile
const userProfile = await getDoc(doc(db, "Profiles", userId));
const catalogOrderIds = userProfile.data().list_3d_catalogOrders;

// 2. Filter only catalogOrders with status "working_3d_assets" and type "order_3d_asset"
const filteredOrders = catalogOrderIds.filter(
  (order) =>
    order.status === "working_3d_assets" && order.type === "order_3d_asset"
);

// 3. For each filtered catalog order, count variant states
for (const order of filteredOrders) {
  const variantsQuery = query(
    collection(db, "CataloguesVariants"),
    where("catalogOrdersRef", "==", order.id)
  );
  const variants = await getDocs(variantsQuery);
  // Count states and show colored indicators
}

Features:

• Card/row layout visualization for catalog orders
• Variant state counting with colored indicators
• User profile-based filtering
• Direct access to products via click

Level 2: Products

Access via URL: /framevalidation/{catalogOrderId}

The products page is built starting from variants:

// Products page logic
// 1. Go directly to Variants
const variantsQuery = query(
  collection(db, "CataloguesVariants"),
  where("catalogOrdersRef", "==", catalogOrderId)
);
const variants = await getDocs(variantsQuery);

// 2. From variants, get all unique productRef
const uniqueProductRefs = [
  ...new Set(variants.docs.map((v) => v.data().productRef)),
];

// 3. Load products using these productRef
const products = await Promise.all(
  uniqueProductRefs.map((ref) => getDoc(doc(db, "CataloguesProducts", ref)))
);

// 4. Organize variants under each product
const productsWithVariants = products.map((product) => ({
  ...product.data(),
  variants: variants.docs.filter((v) => v.data().productRef === product.id),
}));

Features:

• Responsive product grid built from variants
• Advanced search and filtering
• Image and metadata management
• Variant counting per product
• Navigation to variants

Level 3: Variants

Access via URL: /framevalidation/{catalogOrderId}/{productId}

// Retrieve variants for specific product
const variantsQuery = query(
  collection(db, "CataloguesVariants"),
  where("catalogOrdersRef", "==", catalogOrderId),
  where("productRef", "==", productId)
);

Features:

• Grid visualization of variants
• Tag, badge and category management
• QR code generation
• Validation status filtering

Level 4: Variant Details

Access via URL: /framevalidation/{catalogOrderId}/{productId}/{variantId}

// Retrieve specific variant details
const variantRef = doc(db, "CataloguesVariants", variantId);
const variantData = await getDoc(variantRef);

Features:

• Complete variant management interface
• Validation and decline workflow
• 3D asset management (GLB, USDZ)
• Notes and comments system

Data Flow Pattern

The Frame Validation system uses a variant-centric approach, where logic always starts from variants to build views:

1. Homepage Data Loading

The homepage loads catalog orders from user profile and counts variants:

// Homepage data loading
const loadHomepageData = async () => {
  // 1. Retrieve catalog orders from profile
  const userProfile = await getDoc(doc(db, "Profiles", userId));
  const catalogOrders = userProfile.data().list_3d_catalogOrders;

  // 2. For each catalog order, count variants by status
  for (const order of catalogOrders) {
    const variants = await getDocs(
      query(
        collection(db, "CataloguesVariants"),
        where("catalogOrdersRef", "==", order.id)
      )
    );

    // Count states and update UI with colored indicators
    order.statusCounts = countVariantsByStatus(variants);
  }
};

2. Products Page Construction

The products page is built starting from catalog order variants:

const loadProductsPage = async (catalogOrderId) => {
  // 1. Retrieve all variants from catalog order
  const variants = await getDocs(
    query(
      collection(db, "CataloguesVariants"),
      where("catalogOrdersRef", "==", catalogOrderId)
    )
  );

  // 2. Extract unique productRef and load products
  const productRefs = [
    ...new Set(variants.docs.map((v) => v.data().productRef)),
  ];
  const products = await loadProductsByRefs(productRefs);

  // 3. Organize variants under each product
  return organizeVariantsByProduct(products, variants);
};

3. Variant Navigation

Navigation to variants maintains catalog order context:

const navigateToVariantDetails = (catalogOrderId, productId, variantId) => {
  navigate(`/framevalidation/${catalogOrderId}/${productId}/${variantId}`);
};