Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/joaomonteir0/printheritage/llms.txt

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

The Dashboard is the central hub of PrintHeritage — the first screen you see after logging in. It presents every project you have access to as a responsive grid of cards, each showing the project’s name, description, and creation date. From here you can search for projects by name, mark favorites, and jump directly into any project’s detail workspace.

​
Project Cards

Each project is displayed as a card containing:
  • Name — displayed prominently in uppercase, truncated at the card edge.
  • Description — a two-line preview; shows Sem descrição. when none is set.
  • Creation date — formatted via toLocaleDateString() at the bottom of the card.
  • Favorite indicator — a star icon in the top-right corner; amber when favorited, grey otherwise.
  • Navigate button — an arrow icon in the bottom-right corner; clicking it routes you to /project/{id}.
A project card’s icon turns amber when the project is marked as a favorite, giving you an at-a-glance way to identify your most important sites.

​
Searching Projects

The search bar at the top of the dashboard filters results in real time. As you type, the component calls: 
GET /projects?q={search}
The query parameter q is sent on every keystroke via a useEffect that watches the search state variable. An empty string returns all accessible projects.
The search is case-insensitive and matches anywhere in the project name, so you can type partial words to narrow results quickly.

​
Toggling Favorites

Click the star icon on any project card to toggle its favorite status. The action fires: 
PATCH /projects/{projectId}/favorite
After a successful response, the project list is refreshed automatically so the visual state updates immediately. Favorite projects are not sorted separately — they remain in the same order as the rest of the list but are visually distinguished.

​
Responsive Grid Layout

The grid adapts to the available viewport width:
BreakpointColumns
Mobile (default)1 column
Tablet (md)2 columns
Desktop (xl)3 columns
This is achieved with the Tailwind classes grid-cols-1 md:grid-cols-2 xl:grid-cols-3.

​
Empty State

When no projects match the current search — or when the user has no accessible projects at all — the grid is replaced with a full-width placeholder card:

No Projects Found

A bordered, dashed container with the message Sem Projetos is rendered in place of the grid. This state is shown only after the initial data fetch completes, so it never flashes before data has had a chance to load.
The empty state is triggered whenever the projects array is empty and loading is false. If the API call fails silently, the empty state will appear as if there are no projects. Check the browser console for any network errors.
Clicking the arrow button on a project card calls React Router’s navigate('/project/{id}'), taking you to the full Project Detail view where you can inspect sensor data, manage team members, and ingest new datasets.

Build docs developers (and LLMs) love

Get started for freeTalk to us