# rs-talentos-ufsm/sulflux.frontend architecture

> Architecture diagram of the GitHub repository rs-talentos-ufsm/sulflux.frontend, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/rs-talentos-ufsm/sulflux.frontend
- Repository: https://github.com/rs-talentos-ufsm/sulflux.frontend

## Overview

This is Sulflux’s React frontend for an agricultural property-management workflow: users authenticate, find or enter a property, manage fields, and configure seasonal crop phases. The app also exposes document, profile/settings, and user-facing health routes. The sampled hooks show API-backed authentication and property/field operations with React Query caching and Zustand auth state; documents appear to use local mock data in the excerpt. Other pages and API wiring are represented only where the tree or README supports them, so uncertain relationships are omitted.

Main entry points: [`src/App.tsx`](https://github.com/rs-talentos-ufsm/sulflux.frontend/blob/main/src/App.tsx) (Route App), [`src/api/api.ts`](https://github.com/rs-talentos-ufsm/sulflux.frontend/blob/main/src/api/api.ts) (API Client), [`src/hooks/useProperty.ts`](https://github.com/rs-talentos-ufsm/sulflux.frontend/blob/main/src/hooks/useProperty.ts) (Property Operations), [`src/hooks/useAuth.ts`](https://github.com/rs-talentos-ufsm/sulflux.frontend/blob/main/src/hooks/useAuth.ts) (Auth Operations)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App Shell"]
  node_app["Route App<br/>[App.tsx]"]
  node_layout["App Layout<br/>[AppLayout.tsx]"]
  node_api["API Client<br/>[api.ts]"]
  node_querycache[("Query Cache<br/>[main.tsx]")]
  node_health["Health Page<br/>[Health.tsx]"]
end

subgraph group_identity["Identity"]
  node_authpage["Auth Screen<br/>[Auth.tsx]"]
  node_authhooks["Auth Operations<br/>[useAuth.ts]"]
  node_authstate[("Auth State<br/>[authStore.ts]")]
  node_users["User Operations<br/>[useUsers.ts]"]
end

subgraph group_farm["Farm Management"]
  node_properties["Property List<br/>[Properties.tsx]"]
  node_sicar["CAR Search<br/>[SearchSicar.tsx]"]
  node_propertyform["Property Entry<br/>[NewProperty.tsx]"]
  node_propertydetail["Property Detail<br/>[Property.tsx]"]
  node_propertyhooks["Property Operations<br/>[useProperty.ts]"]
  node_fieldcreate["Field Creation<br/>[NewField.tsx]"]
  node_fieldhooks["Field Operations<br/>[useField.ts]"]
  node_season["Season Planner<br/>[Season.tsx]"]
end

subgraph group_workspace["Workspace"]
  node_documents["Documents<br/>[Documents.tsx]"]
  node_settings["Settings<br/>[Settings.tsx]"]
end

node_visitor(("User"))
node_backend{{"Backend API"}}

node_visitor -->|"opens app"| node_app
node_app -->|"checks session"| node_authhooks
node_authhooks -->|"requests"| node_api
node_api -->|"calls"| node_backend
node_authhooks -->|"updates auth"| node_authstate
node_authhooks -->|"invalidates cache"| node_querycache
node_app -->|"routes unauthenticated"| node_authpage
node_app -->|"renders protected"| node_layout
node_visitor -->|"signs in"| node_authpage
node_app -->|"routes"| node_properties
node_properties -->|"loads properties"| node_propertyhooks
node_propertyhooks -->|"requests"| node_api
node_visitor -->|"enters CAR"| node_sicar
node_sicar -->|"navigates with CAR"| node_propertyform
node_visitor -->|"enters details"| node_propertyform
node_propertyform -->|"creates property"| node_propertyhooks
node_properties -->|"opens property"| node_propertydetail
node_propertydetail -->|"loads property"| node_propertyhooks
node_propertydetail -->|"starts field entry"| node_fieldcreate
node_fieldcreate -->|"creates field"| node_fieldhooks
node_fieldhooks -->|"requests"| node_api
node_fieldcreate -->|"opens season planner"| node_season
node_season -->|"loads property"| node_propertyhooks
node_season -->|"loads field"| node_fieldhooks
node_app -->|"routes"| node_documents
node_visitor -->|"browses files"| node_documents
node_app -->|"routes"| node_settings
node_settings -->|"updates profile"| node_users
node_users -->|"requests"| node_api
node_app -->|"routes"| node_health

click node_app "https://github.com/rs-talentos-ufsm/sulflux.frontend/blob/main/src/App.tsx"
click node_layout "https://github.com/rs-talentos-ufsm/sulflux.frontend/blob/main/src/components/layout/app-layout/AppLayout.tsx"
click node_authpage "https://github.com/rs-talentos-ufsm/sulflux.frontend/blob/main/src/pages/auth/Auth.tsx"
click node_authhooks "https://github.com/rs-talentos-ufsm/sulflux.frontend/blob/main/src/hooks/useAuth.ts"
click node_authstate "https://github.com/rs-talentos-ufsm/sulflux.frontend/blob/main/src/store/authStore.ts"
click node_api "https://github.com/rs-talentos-ufsm/sulflux.frontend/blob/main/src/api/api.ts"
click node_properties "https://github.com/rs-talentos-ufsm/sulflux.frontend/blob/main/src/pages/properties/Properties.tsx"
click node_sicar "https://github.com/rs-talentos-ufsm/sulflux.frontend/blob/main/src/pages/properties/search-sicar/SearchSicar.tsx"
click node_propertyform "https://github.com/rs-talentos-ufsm/sulflux.frontend/blob/main/src/pages/properties/new-property/NewProperty.tsx"
click node_propertydetail "https://github.com/rs-talentos-ufsm/sulflux.frontend/blob/main/src/pages/properties/property/Property.tsx"
click node_propertyhooks "https://github.com/rs-talentos-ufsm/sulflux.frontend/blob/main/src/hooks/useProperty.ts"
click node_fieldcreate "https://github.com/rs-talentos-ufsm/sulflux.frontend/blob/main/src/pages/field/NewField.tsx"
click node_fieldhooks "https://github.com/rs-talentos-ufsm/sulflux.frontend/blob/main/src/hooks/useField.ts"
click node_season "https://github.com/rs-talentos-ufsm/sulflux.frontend/blob/main/src/pages/season/Season.tsx"
click node_documents "https://github.com/rs-talentos-ufsm/sulflux.frontend/blob/main/src/pages/documents/Documents.tsx"
click node_settings "https://github.com/rs-talentos-ufsm/sulflux.frontend/blob/main/src/pages/settings/Settings.tsx"
click node_users "https://github.com/rs-talentos-ufsm/sulflux.frontend/blob/main/src/hooks/useUsers.ts"
click node_querycache "https://github.com/rs-talentos-ufsm/sulflux.frontend/blob/main/src/main.tsx"
click node_health "https://github.com/rs-talentos-ufsm/sulflux.frontend/blob/main/src/pages/health/Health.tsx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_layout,node_api,node_querycache,node_health,node_visitor toneBlue
class node_authpage,node_authhooks,node_authstate,node_users toneAmber
class node_properties,node_sicar,node_propertyform,node_propertydetail,node_propertyhooks,node_fieldcreate,node_fieldhooks,node_season,node_backend toneMint
class node_documents,node_settings toneRose
```

## Components

### App Shell

- [Route App](https://github.com/rs-talentos-ufsm/sulflux.frontend/blob/main/src/App.tsx): `src/App.tsx`
- [App Layout](https://github.com/rs-talentos-ufsm/sulflux.frontend/blob/main/src/components/layout/app-layout/AppLayout.tsx): `src/components/layout/app-layout/AppLayout.tsx`
- [API Client](https://github.com/rs-talentos-ufsm/sulflux.frontend/blob/main/src/api/api.ts): `src/api/api.ts`
- [Query Cache](https://github.com/rs-talentos-ufsm/sulflux.frontend/blob/main/src/main.tsx): `src/main.tsx`
- [Health Page](https://github.com/rs-talentos-ufsm/sulflux.frontend/blob/main/src/pages/health/Health.tsx): `src/pages/health/Health.tsx`

### Identity

- [Auth Screen](https://github.com/rs-talentos-ufsm/sulflux.frontend/blob/main/src/pages/auth/Auth.tsx): `src/pages/auth/Auth.tsx`
- [Auth Operations](https://github.com/rs-talentos-ufsm/sulflux.frontend/blob/main/src/hooks/useAuth.ts): `src/hooks/useAuth.ts`
- [Auth State](https://github.com/rs-talentos-ufsm/sulflux.frontend/blob/main/src/store/authStore.ts): `src/store/authStore.ts`
- [User Operations](https://github.com/rs-talentos-ufsm/sulflux.frontend/blob/main/src/hooks/useUsers.ts): `src/hooks/useUsers.ts`

### Farm Management

- [Property List](https://github.com/rs-talentos-ufsm/sulflux.frontend/blob/main/src/pages/properties/Properties.tsx): `src/pages/properties/Properties.tsx`
- [CAR Search](https://github.com/rs-talentos-ufsm/sulflux.frontend/blob/main/src/pages/properties/search-sicar/SearchSicar.tsx): `src/pages/properties/search-sicar/SearchSicar.tsx`
- [Property Entry](https://github.com/rs-talentos-ufsm/sulflux.frontend/blob/main/src/pages/properties/new-property/NewProperty.tsx): `src/pages/properties/new-property/NewProperty.tsx`
- [Property Detail](https://github.com/rs-talentos-ufsm/sulflux.frontend/blob/main/src/pages/properties/property/Property.tsx): `src/pages/properties/property/Property.tsx`
- [Property Operations](https://github.com/rs-talentos-ufsm/sulflux.frontend/blob/main/src/hooks/useProperty.ts): `src/hooks/useProperty.ts`
- [Field Creation](https://github.com/rs-talentos-ufsm/sulflux.frontend/blob/main/src/pages/field/NewField.tsx): `src/pages/field/NewField.tsx`
- [Field Operations](https://github.com/rs-talentos-ufsm/sulflux.frontend/blob/main/src/hooks/useField.ts): `src/hooks/useField.ts`
- [Season Planner](https://github.com/rs-talentos-ufsm/sulflux.frontend/blob/main/src/pages/season/Season.tsx): `src/pages/season/Season.tsx`

### Workspace

- [Documents](https://github.com/rs-talentos-ufsm/sulflux.frontend/blob/main/src/pages/documents/Documents.tsx): `src/pages/documents/Documents.tsx`
- [Settings](https://github.com/rs-talentos-ufsm/sulflux.frontend/blob/main/src/pages/settings/Settings.tsx): `src/pages/settings/Settings.tsx`

### Other components

- **User**
- **Backend API**

## Connections

- User → Route App: opens app
- Route App → Auth Operations: checks session
- Auth Operations → API Client: requests
- API Client → Backend API: calls
- Auth Operations → Auth State: updates auth
- Auth Operations → Query Cache: invalidates cache
- Route App → Auth Screen: routes unauthenticated
- Route App → App Layout: renders protected
- User → Auth Screen: signs in
- Route App → Property List: routes
- Property List → Property Operations: loads properties
- Property Operations → API Client: requests
- User → CAR Search: enters CAR
- CAR Search → Property Entry: navigates with CAR
- User → Property Entry: enters details
- Property Entry → Property Operations: creates property
- Property List → Property Detail: opens property
- Property Detail → Property Operations: loads property
- Property Detail → Field Creation: starts field entry
- Field Creation → Field Operations: creates field
- Field Operations → API Client: requests
- Field Creation → Season Planner: opens season planner
- Season Planner → Property Operations: loads property
- Season Planner → Field Operations: loads field
- Route App → Documents: routes
- User → Documents: browses files
- Route App → Settings: routes
- Settings → User Operations: updates profile
- User Operations → API Client: requests
- Route App → Health Page: routes