Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/tutosrive/ferreandina-nosql/llms.txt

Use this file to discover all available pages before exploring further.

Every resource managed by Ferreandina — customers, branches, categories, products, suppliers, and workers — is served by a set of four dedicated pages: a list view, a create form, an update/edit form, and a view detail page. All routes are declared in src/routes/routes.tsx using React’s lazy() API so that each page bundle is fetched from the server only when the user navigates to it. A top-level <Suspense> boundary wraps the router outlet and shows a fallback while the chunk loads.

​
Route Map

The complete list of routes registered in routes.tsx is shown below. Dynamic segments (:id) are resolved from the URL at runtime and forwarded to the corresponding service call.
PathComponentDescription
/HomePageDashboard overview — live record counts for all resources and navigation shortcuts
/customersCustomersPageList all customer records
/customers/createCreateCustomerPageForm to register a new customer
/customers/update/:idUpdateCustomerPagePre-filled form to edit an existing customer
/customers/view/:idViewCustomerPageRead-only detail view for a single customer
/branchesBranchesPageList all branch locations
/branches/createCreateBranchPageForm to add a new branch
/branches/update/:idUpdateBranchPageForm to edit a branch’s information
/branches/view/:idViewBranchPageRead-only detail view for a single branch
/categoriesCategoriesPageList all product categories
/categories/createCreateCategoryPageForm to create a new category
/categories/update/:idUpdateCategoryPageForm to rename or update a category
/categories/view/:idViewCategoryPageRead-only detail view for a single category
/productsProductsPageList all products in the global catalog
/products/createCreateProductPageForm to add a new product
/products/update/:idUpdateProductPageForm to edit product details, price, or stock
/products/view/:idViewProductPageRead-only detail view for a single product
/suppliersSuppliersPageList all registered suppliers
/suppliers/createCreateSupplierPageForm to register a new supplier
/suppliers/update/:idUpdateSupplierPageForm to edit supplier contact details
/suppliers/view/:idViewSupplierPageRead-only detail view for a single supplier
/workersWorkersPageList all workers across branches
/workers/createCreateWorkerPageForm to add a new worker
/workers/update/:idUpdateWorkerPageForm to edit a worker’s information
/workers/view/:idViewWorkerPageRead-only detail view for a single worker
/advanced-queriesAdvancedQueriesPagePanel for cross-collection analytical queries and bulk operations

​
Code-Splitting

All page components are loaded with React.lazy() so that each route’s JavaScript is only downloaded when the user first visits that path. The pattern used in routes.tsx is consistent across every resource: 
import { lazy } from "react";

const BranchesPage = lazy(() => import("../pages/branches/branch.page"));
const CreateBranchPage = lazy(
  () => import("../pages/branches/createBranch.page"),
);
const UpdateBranchPage = lazy(
  () => import("../pages/branches/updateBranch.page"),
);
const ViewBranchPage = lazy(() => import("../pages/branches/viewBranch.page"));
The dynamic import() call tells Vite to emit a separate chunk for each page during the production build. Each chunk is cached by the browser, so navigating back to a previously visited route incurs no additional network round-trip. The wrapping <Suspense> component in the router outlet provides a loading fallback while any chunk is in flight.
Because every route entry is a plain object ({ path, element, title }), the router configuration is data-driven and easy to extend — adding a new resource requires only appending four objects to the routers array.

​
Advanced Queries Page

The AdvancedQueriesPage at /advanced-queries provides a self-contained UI panel for six special API operations that go beyond standard CRUD. Each operation is rendered as its own card with an optional input field and a trigger button.
CardHTTP MethodEndpointDescription
Branches Low StockGET/branches/low-stockLists every product across all branches whose quantity is below 10
Defective Supplies ReportGET/supplies/defective-reportAggregates defective quantities grouped by supplier
Clean Out Of Stock (Global)PATCH/branches/clean-out-of-stockRemoves all products with quantity <= 0 from every branch
Products in BranchGET/branches/:branchId/productsReturns the product list belonging to a specific branch (requires a Branch ID input)
Products By CategoryGET/products/category/:categoryIdFilters the global catalog to a single category (requires a Category ID input)
Remove Product from BranchPATCH/branches/:branchId/remove-product/:productIdDetaches a specific product from a branch (requires both a Branch ID and a Product ID)
All six operations are triggered by a shared fetchQuery function that uses the raw Axios instance from axios.config.ts: 
const fetchQuery = async (endpoint: string, method = "GET") => {
  setIsLoading(true);
  try {
    const res = await api({ url: endpoint, method: method });
    const json = res.data;

    if (method === "PATCH" || method === "DELETE") {
      Swal.fire("Success", json.message || "Operation completed", "success");
    } else {
      processAndShowTable(
        json,
        endpoint.includes("/products") && endpoint.includes("/branches/"),
      );
    }
  } catch (error) {
    Swal.fire("Error", "Failed to communicate with backend", "error");
  }
  setIsLoading(false);
};
GET responses are normalised by processAndShowTable, which flattens nested arrays, derives column definitions dynamically from the first result row’s keys, and hydrates a react-tabulator <TableTabulatorComponent> rendered below the query cards. Mutating operations (PATCH) skip the table and show a SweetAlert2 confirmation dialog instead.

​
Layout

All routes — including the home page and the advanced-queries page — are rendered inside Default.layout.tsx, which provides the consistent outer navigation shell: the sidebar, the top bar, and the content wrapper. The layout component wraps the <Outlet /> from React Router, meaning every page automatically inherits navigation without any per-page boilerplate.

Build docs developers (and LLMs) love

Get started for freeTalk to us