|
|
|
@@ -0,0 +1,409 @@
|
|
|
|
|
# Yield & Harvest UI Documentation
|
|
|
|
|
|
|
|
|
|
## Overview
|
|
|
|
|
|
|
|
|
|
The `yield-harvest` page is designed as a two-part production dashboard for the farm domain:
|
|
|
|
|
|
|
|
|
|
1. **Interactive plant simulation section** for visual learning and scenario testing.
|
|
|
|
|
2. **Yield and harvest analytics section** for practical production insights and KPI-based monitoring.
|
|
|
|
|
|
|
|
|
|
This page is rendered from `src/app/(dashboard)/(private)/yield-harvest/page.tsx` and uses `PlantProductionPage` as the top-level UI container.
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## Page Structure
|
|
|
|
|
|
|
|
|
|
The page is vertically stacked and contains two full-width blocks:
|
|
|
|
|
|
|
|
|
|
### 1. Plant Simulator Block
|
|
|
|
|
Located at the top of the page.
|
|
|
|
|
|
|
|
|
|
- Full-width section inside a responsive grid.
|
|
|
|
|
- Intended to simulate plant growth visually and numerically.
|
|
|
|
|
- Uses a split layout:
|
|
|
|
|
- **Left column:** animated plant visualization and interactive controls.
|
|
|
|
|
- **Right column:** growth charts, progress indicators, and explanatory text.
|
|
|
|
|
|
|
|
|
|
### 2. Yield & Harvest Analytics Block
|
|
|
|
|
Located below the simulator.
|
|
|
|
|
|
|
|
|
|
- Full-width analytics area.
|
|
|
|
|
- Includes:
|
|
|
|
|
- KPI cards for yield-related summary numbers.
|
|
|
|
|
- Harvest prediction card.
|
|
|
|
|
- Yield prediction line chart.
|
|
|
|
|
|
|
|
|
|
This layout creates a natural flow from **simulation -> monitoring -> prediction**.
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## Detailed UI Breakdown
|
|
|
|
|
|
|
|
|
|
## A. Plant Simulator Section
|
|
|
|
|
|
|
|
|
|
Source: `src/views/dashboards/farm/plantSimulator/PlantSimulator.tsx`
|
|
|
|
|
|
|
|
|
|
### A.1 Section Header
|
|
|
|
|
- Large centered title with a plant emoji.
|
|
|
|
|
- Strong visual emphasis to frame the simulator as the hero feature of the page.
|
|
|
|
|
- Gives the page a more experimental and educational feel before the business analytics area.
|
|
|
|
|
|
|
|
|
|
### A.2 Left Column: Visual Plant Panel
|
|
|
|
|
This side focuses on the animated growth representation.
|
|
|
|
|
|
|
|
|
|
#### Main visualization card
|
|
|
|
|
- White card container with centered content.
|
|
|
|
|
- Contains an SVG-based animated plant.
|
|
|
|
|
- The plant evolves over time based on internal state:
|
|
|
|
|
- height
|
|
|
|
|
- leaves
|
|
|
|
|
- branches
|
|
|
|
|
- fruits
|
|
|
|
|
- yield
|
|
|
|
|
- yield rate
|
|
|
|
|
|
|
|
|
|
#### Stats mini-cards under the plant
|
|
|
|
|
A responsive grid of small statistic cards shows the live simulation state:
|
|
|
|
|
|
|
|
|
|
- Plant height
|
|
|
|
|
- Leaf count
|
|
|
|
|
- Branch count
|
|
|
|
|
- Fruit count
|
|
|
|
|
- Total yield
|
|
|
|
|
- Yield rate
|
|
|
|
|
|
|
|
|
|
UI characteristics:
|
|
|
|
|
- Compact outlined cards
|
|
|
|
|
- Numeric value on top
|
|
|
|
|
- Label below
|
|
|
|
|
- Different semantic colors for different metrics
|
|
|
|
|
|
|
|
|
|
#### Max growth state
|
|
|
|
|
- When the plant reaches maximum growth, a warning-colored animated status text appears.
|
|
|
|
|
- This creates a clear end-state in the simulation flow.
|
|
|
|
|
|
|
|
|
|
### A.3 Left Column: Controls Card
|
|
|
|
|
Below the visualization card there is a separate control panel.
|
|
|
|
|
|
|
|
|
|
#### Action buttons
|
|
|
|
|
- **Start / Stop** button
|
|
|
|
|
- Changes color depending on state.
|
|
|
|
|
- Green when ready to start.
|
|
|
|
|
- Red when running.
|
|
|
|
|
- **Reset** button
|
|
|
|
|
- Secondary outlined style.
|
|
|
|
|
- Stops simulation and resets all values.
|
|
|
|
|
|
|
|
|
|
#### Sliders / range controls
|
|
|
|
|
Three control groups are shown as simple horizontal sliders:
|
|
|
|
|
|
|
|
|
|
- Growth speed
|
|
|
|
|
- Light percentage
|
|
|
|
|
- Water percentage
|
|
|
|
|
|
|
|
|
|
Each control has:
|
|
|
|
|
- left-aligned label
|
|
|
|
|
- right-aligned current numeric value
|
|
|
|
|
- full-width slider below
|
|
|
|
|
|
|
|
|
|
This gives the simulator a lightweight lab-tool feel.
|
|
|
|
|
|
|
|
|
|
#### Effective rate box
|
|
|
|
|
- Small outlined summary card at the bottom of controls.
|
|
|
|
|
- Shows the calculated effective growth rate.
|
|
|
|
|
- Important because it explains how environment and speed combine into the final growth behavior.
|
|
|
|
|
|
|
|
|
|
### A.4 Right Column: Growth Chart Panel
|
|
|
|
|
The right side is a large analytics card for simulation history.
|
|
|
|
|
|
|
|
|
|
#### Main chart area
|
|
|
|
|
- Displays history for:
|
|
|
|
|
- height
|
|
|
|
|
- leaves
|
|
|
|
|
- yield
|
|
|
|
|
- yield rate
|
|
|
|
|
- This section is the analytical companion to the animated plant.
|
|
|
|
|
- Helps the user compare visual growth with numeric changes over time.
|
|
|
|
|
|
|
|
|
|
#### Progress cards row
|
|
|
|
|
Below the chart there are four compact progress status cards:
|
|
|
|
|
|
|
|
|
|
- Growth progress
|
|
|
|
|
- Light status
|
|
|
|
|
- Water status
|
|
|
|
|
- Yield status
|
|
|
|
|
|
|
|
|
|
Each card includes:
|
|
|
|
|
- a small title
|
|
|
|
|
- a progress bar
|
|
|
|
|
- a highlighted numeric value
|
|
|
|
|
|
|
|
|
|
This row acts as a quick operational summary for the simulator.
|
|
|
|
|
|
|
|
|
|
#### Explanatory description card
|
|
|
|
|
- A final outlined text card explains the behavior of the simulator.
|
|
|
|
|
- Works as a help/description area and lowers cognitive load for first-time users.
|
|
|
|
|
|
|
|
|
|
### A.5 UX Role of the Simulator
|
|
|
|
|
The simulator is not only decorative; it shapes the page identity.
|
|
|
|
|
|
|
|
|
|
Its UI purpose is to:
|
|
|
|
|
- create a more engaging entry point for the user
|
|
|
|
|
- support experimentation with light/water/growth speed
|
|
|
|
|
- visually communicate crop development
|
|
|
|
|
- make the production dashboard feel more intelligent and interactive
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## B. Yield & Harvest Analytics Section
|
|
|
|
|
|
|
|
|
|
Source: `src/views/dashboards/farm/YieldHarvestPageWrapper.tsx`
|
|
|
|
|
|
|
|
|
|
This section is data-driven and loads summary information based on the selected farm.
|
|
|
|
|
|
|
|
|
|
### B.1 Loading State
|
|
|
|
|
Before content is available:
|
|
|
|
|
- a centered circular loader is shown
|
|
|
|
|
- the layout remains minimal and clean
|
|
|
|
|
- this avoids rendering broken cards before farm data is ready
|
|
|
|
|
|
|
|
|
|
### B.2 KPI Row
|
|
|
|
|
Source component: `src/views/dashboards/farm/FarmOverviewKPIs.tsx`
|
|
|
|
|
|
|
|
|
|
If yield prediction KPI data exists, a responsive KPI row is displayed.
|
|
|
|
|
|
|
|
|
|
#### KPI card behavior
|
|
|
|
|
- Each KPI is rendered as a vertical statistics card.
|
|
|
|
|
- Cards adapt to the number of items.
|
|
|
|
|
- Common information shown in each card:
|
|
|
|
|
- title
|
|
|
|
|
- subtitle
|
|
|
|
|
- main statistic
|
|
|
|
|
- avatar icon
|
|
|
|
|
- avatar color
|
|
|
|
|
- optional chip badge
|
|
|
|
|
|
|
|
|
|
#### Visual style
|
|
|
|
|
- Dashboard-style summary cards
|
|
|
|
|
- Strong scanability
|
|
|
|
|
- Good at communicating top-level performance in one glance
|
|
|
|
|
|
|
|
|
|
#### UX purpose
|
|
|
|
|
This row acts as the executive summary of the page before the user goes deeper into charts and detailed predictions.
|
|
|
|
|
|
|
|
|
|
### B.3 Bottom Analytics Row
|
|
|
|
|
This row is split into two cards:
|
|
|
|
|
|
|
|
|
|
- **Left:** Harvest prediction card
|
|
|
|
|
- **Right:** Yield prediction chart
|
|
|
|
|
|
|
|
|
|
The ratio is approximately:
|
|
|
|
|
- 4 columns for harvest prediction
|
|
|
|
|
- 8 columns for chart insight
|
|
|
|
|
|
|
|
|
|
This gives the chart more space while preserving a compact side card for the date-based prediction.
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## C. Harvest Prediction Card
|
|
|
|
|
|
|
|
|
|
Source: `src/views/dashboards/farm/HarvestPredictionCard.tsx`
|
|
|
|
|
|
|
|
|
|
### C.1 Card header
|
|
|
|
|
The header includes:
|
|
|
|
|
- success-colored avatar with calendar icon
|
|
|
|
|
- title for harvest prediction
|
|
|
|
|
- AI-estimated date subheader
|
|
|
|
|
- option menu on the right
|
|
|
|
|
|
|
|
|
|
The option menu suggests actions such as:
|
|
|
|
|
- details
|
|
|
|
|
- adjust
|
|
|
|
|
- export
|
|
|
|
|
|
|
|
|
|
This makes the card feel actionable rather than static.
|
|
|
|
|
|
|
|
|
|
### C.2 Main content
|
|
|
|
|
The content is vertically spaced and intentionally minimal.
|
|
|
|
|
|
|
|
|
|
It includes:
|
|
|
|
|
- large harvest date text as the focal point
|
|
|
|
|
- optional chip showing remaining days until harvest
|
|
|
|
|
- secondary description text explaining the context
|
|
|
|
|
|
|
|
|
|
### C.3 UI role
|
|
|
|
|
This card is designed to answer one critical user question fast:
|
|
|
|
|
|
|
|
|
|
**"When is the expected harvest date?"**
|
|
|
|
|
|
|
|
|
|
Because of that, the hierarchy is strong:
|
|
|
|
|
- date first
|
|
|
|
|
- countdown second
|
|
|
|
|
- explanation third
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## D. Yield Prediction Chart
|
|
|
|
|
|
|
|
|
|
Source: `src/views/dashboards/farm/YieldPredictionChart.tsx`
|
|
|
|
|
|
|
|
|
|
### D.1 Card header
|
|
|
|
|
The chart card header includes:
|
|
|
|
|
- title for yield prediction chart
|
|
|
|
|
- subheader comparing current year vs previous year
|
|
|
|
|
- option menu with actions like export, compare, and details
|
|
|
|
|
|
|
|
|
|
This makes the chart feel like a decision-support tool.
|
|
|
|
|
|
|
|
|
|
### D.2 Chart body
|
|
|
|
|
- Uses an Apex line chart.
|
|
|
|
|
- Smooth line strokes.
|
|
|
|
|
- Top legend.
|
|
|
|
|
- Two major comparison colors:
|
|
|
|
|
- primary
|
|
|
|
|
- success
|
|
|
|
|
- Dashed grid lines for a cleaner analytics look.
|
|
|
|
|
- X-axis categories typically represent months.
|
|
|
|
|
- Y-axis values are formatted in tons.
|
|
|
|
|
- Tooltip values are also formatted in tons.
|
|
|
|
|
|
|
|
|
|
### D.3 Summary list under the chart
|
|
|
|
|
If summary items exist, they appear below the chart as stacked summary rows.
|
|
|
|
|
|
|
|
|
|
Each row includes:
|
|
|
|
|
- rounded avatar with icon
|
|
|
|
|
- title
|
|
|
|
|
- subtitle
|
|
|
|
|
- highlighted amount value on the far side
|
|
|
|
|
|
|
|
|
|
This creates a hybrid layout:
|
|
|
|
|
- chart for trend analysis
|
|
|
|
|
- summary rows for quick interpretation
|
|
|
|
|
|
|
|
|
|
### D.4 UI role
|
|
|
|
|
This component gives the page its strongest analytical identity.
|
|
|
|
|
It helps answer:
|
|
|
|
|
- How is production trending?
|
|
|
|
|
- How does this year compare to another reference line?
|
|
|
|
|
- What supporting summary metrics matter most?
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## Responsive Behavior
|
|
|
|
|
|
|
|
|
|
The page is designed with responsive grid behavior.
|
|
|
|
|
|
|
|
|
|
### On large screens
|
|
|
|
|
- Plant simulator is split into left/right columns.
|
|
|
|
|
- Harvest card and yield chart sit side by side.
|
|
|
|
|
- KPI cards spread horizontally.
|
|
|
|
|
|
|
|
|
|
### On medium and small screens
|
|
|
|
|
- Cards stack vertically.
|
|
|
|
|
- Harvest prediction moves above the chart.
|
|
|
|
|
- Simulator sections become more linear and easier to scroll.
|
|
|
|
|
- KPI cards adapt their width based on count.
|
|
|
|
|
|
|
|
|
|
This keeps the page usable on desktop, tablet, and mobile.
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## Visual Hierarchy Summary
|
|
|
|
|
|
|
|
|
|
The UI hierarchy of `yield-harvest` is:
|
|
|
|
|
|
|
|
|
|
1. **Interactive growth simulator** as the experiential top section
|
|
|
|
|
2. **KPI summary cards** for immediate production status
|
|
|
|
|
3. **Harvest date card** for the key operational decision
|
|
|
|
|
4. **Yield trend chart** for deeper forecasting insight
|
|
|
|
|
|
|
|
|
|
This structure is effective because it balances:
|
|
|
|
|
- exploration
|
|
|
|
|
- summary
|
|
|
|
|
- actionability
|
|
|
|
|
- forecasting
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## UX Strengths of the Current Page
|
|
|
|
|
|
|
|
|
|
### Strong points
|
|
|
|
|
- Combines simulation and analytics in one page
|
|
|
|
|
- Good mix of visual and numeric feedback
|
|
|
|
|
- Clear card-based dashboard structure
|
|
|
|
|
- Strong use of progressive disclosure
|
|
|
|
|
- Easy scanning of important information
|
|
|
|
|
- Responsive composition with logical stacking
|
|
|
|
|
|
|
|
|
|
### Product feeling
|
|
|
|
|
The page feels like a mix of:
|
|
|
|
|
- agronomy lab tool
|
|
|
|
|
- farm operations dashboard
|
|
|
|
|
- lightweight forecasting center
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## Suggested Future UI Improvements
|
|
|
|
|
|
|
|
|
|
If this page is expanded later, the following improvements would fit naturally:
|
|
|
|
|
|
|
|
|
|
### 1. Section labels or anchors
|
|
|
|
|
Add explicit section separators such as:
|
|
|
|
|
- Plant Simulation
|
|
|
|
|
- Production Summary
|
|
|
|
|
- Harvest Forecast
|
|
|
|
|
|
|
|
|
|
### 2. Farm-specific header
|
|
|
|
|
A top hero strip could include:
|
|
|
|
|
- selected farm name
|
|
|
|
|
- crop type
|
|
|
|
|
- current season
|
|
|
|
|
- last updated time
|
|
|
|
|
|
|
|
|
|
### 3. Chart filters
|
|
|
|
|
Add filters above the yield chart for:
|
|
|
|
|
- crop type
|
|
|
|
|
- year range
|
|
|
|
|
- unit switching
|
|
|
|
|
- predicted vs actual mode
|
|
|
|
|
|
|
|
|
|
### 4. Harvest readiness indicator
|
|
|
|
|
A radial progress or readiness gauge near the harvest prediction date could improve urgency perception.
|
|
|
|
|
|
|
|
|
|
### 5. Scenario presets in simulator
|
|
|
|
|
Quick buttons such as:
|
|
|
|
|
- Low water
|
|
|
|
|
- High sunlight
|
|
|
|
|
- Optimal growth
|
|
|
|
|
would make the simulator easier to test.
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## File Map
|
|
|
|
|
|
|
|
|
|
Main page entry:
|
|
|
|
|
- `src/app/(dashboard)/(private)/yield-harvest/page.tsx`
|
|
|
|
|
|
|
|
|
|
Top-level page composition:
|
|
|
|
|
- `src/views/dashboards/farm/PlantProductionPage.tsx`
|
|
|
|
|
|
|
|
|
|
Simulator:
|
|
|
|
|
- `src/views/dashboards/farm/plantSimulator/PlantSimulator.tsx`
|
|
|
|
|
|
|
|
|
|
Yield & harvest analytics wrapper:
|
|
|
|
|
- `src/views/dashboards/farm/YieldHarvestPageWrapper.tsx`
|
|
|
|
|
|
|
|
|
|
Analytics components:
|
|
|
|
|
- `src/views/dashboards/farm/FarmOverviewKPIs.tsx`
|
|
|
|
|
- `src/views/dashboards/farm/HarvestPredictionCard.tsx`
|
|
|
|
|
- `src/views/dashboards/farm/YieldPredictionChart.tsx`
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## Final Summary
|
|
|
|
|
|
|
|
|
|
The `yield-harvest` page UI is a full production intelligence screen.
|
|
|
|
|
|
|
|
|
|
It starts with an interactive, highly visual plant-growth simulator and then transitions into a more standard analytics dashboard for yield and harvest planning. The page is especially strong in turning agricultural concepts into understandable interface blocks: simulation, KPIs, predicted date, and long-term yield trend.
|
|
|
|
|
|
|
|
|
|
In short, the UI is not just a reporting surface; it is a combined **simulation + monitoring + forecasting** experience for farm production.
|
