Feature: Dashboards
Relevant source files
The following files were used as context for generating this wiki page:
The Dashboards feature provides users with a centralized, at-a-glance view of their farming operations. It serves as the primary user interface for monitoring farm health, managing tasks, viewing alerts, and accessing key performance indicators. The system offers different dashboard experiences tailored to specific needs, including a detailed FarmerDashboard for individual farm management and specialized dashboards for Analytics and Performance.
The main goal is to consolidate critical information from various modules into a single, intuitive interface, enabling farmers to make quick, data-driven decisions. Data is fetched from the Supabase backend and presented through a series of interactive React components.
Architecture Overview
The dashboard system is built using Next.js with the App Router, where different routes correspond to different dashboard views. The core logic is encapsulated in reusable React components that fetch and display data from the SupabaseService.
The following diagram illustrates the high-level component architecture for the main FarmerDashboard.
This diagram shows that the /dashboard route renders the FarmerDashboard component, which in turn is composed of several specialized child components. The FarmerDashboard orchestrates data fetching from SupabaseService and WeatherService.
Sources: src/app/dashboard/page.tsx, src/components/dashboard/FarmerDashboard.tsx:173-220
Farmer Dashboard
The FarmerDashboard is the primary interface for a logged-in user, accessible at the /dashboard route. It provides a comprehensive summary of a selected farm.
Sources: src/components/dashboard/FarmerDashboard.tsx
Data Loading and State Management
On component mount, the dashboard initiates a data loading sequence. It first authenticates the user, then fetches a list of their associated farms. Once a farm is selected (or the first one is chosen by default), it fetches a dashboard summary and current weather data.
This sequence diagram shows the data loading process for the FarmerDashboard.
Key Components
The FarmerDashboard is composed of several child components, each responsible for a specific section of the UI.
| Component | Description | Source File |
|---|---|---|
LiveFarmStatus | Displays real-time status of the farm, including weather, soil, water, growth, and financial metrics. | src/components/dashboard/FarmerDashboard.tsx:188-220 |
TodaysTasksSection | Lists pending tasks for the current day. Allows users to mark tasks as complete, trigger actions, or add new tasks. | src/components/dashboard/FarmerDashboard.tsx:222-243 |
AlertsSection | Shows important alerts and notifications. Provides actions for users to address them. | src/components/dashboard/FarmerDashboard.tsx:245-250 |
| Farm Selector | A <Select> dropdown that allows the user to switch between their different farms, triggering a data refresh for the selected farm. | src/components/dashboard/FarmerDashboard.tsx:143-169 |
| Weather Summary Bar | A sticky bar at the top displaying current weather conditions like temperature, humidity, and precipitation. | src/components/dashboard/FarmerDashboard.tsx:173-186 |
Farm Health Status
A key feature of the FarmerDashboard is the dynamic calculation of the farm's health status. This status is determined by the number of critical alerts and overdue tasks. The result is used to color-code the farm identifier in the UI, providing an immediate visual cue.
The logic is implemented in the calculateFarmStatus function.
Data Structures
The dashboard relies on several key data structures fetched via SupabaseService.
Dashboard Summary Data
The getDashboardSummary function in SupabaseService aggregates data from multiple tables to provide a consolidated view for the dashboard.
| Field | Type | Description |
|---|---|---|
farm | Farm | The complete Farm object for the selected farm. |
pendingTasksCount | number | The total number of incomplete tasks. |
recentActivities | Array<any> | A sorted list of the 10 most recent activities across all record types. |
totalHarvest | number | The total quantity of harvested crops. |
totalWaterUsage | number | The total historical water usage in liters. |
pendingTasks | Array<Task> | The top 3 most urgent pending tasks. |
recordCounts | object | A count of records for each activity type (irrigation, spray, etc.). |
Sources: src/lib/supabase-service.ts:468-529
Other Dashboards
In addition to the main FarmerDashboard, the application includes several other specialized dashboard pages.
Analytics Dashboard
The /analytics page provides a high-level overview of all farming operations across all farms. It focuses on trends and aggregate metrics rather than real-time status.
Key Features:
- Aggregate Metrics: Displays total farms, total area, total irrigation hours, and total harvest value.
- Cost & Profitability Analysis: Shows total costs, profit margin, ROI, and a breakdown of expenses.
- Yield Analysis: Includes current yield, yield efficiency, projected yield, and benchmarks against regional averages.
- Performance Insights: A comprehensive performance score with breakdowns by category (irrigation, nutrition, etc.) and AI-generated recommendations.
- Trend Charts: Visualizes irrigation trends by month and treatments by type.
Sources: src/app/analytics/page.tsx
Performance Dashboard
The /performance page is dedicated to farm efficiency metrics. It allows a user to select a farm and view its performance against key benchmarks.
Key Features:
- Overall Efficiency Score: A calculated score based on yield, water use, cost, and quality.
- Key Efficiency Metrics: Tracks Yield per Hectare, Water Use Efficiency, Average Grape Price, and Revenue per Hectare.
- Detailed Breakdowns: Provides specific metrics for Water & Irrigation, and Yield & Quality.
- Best Practices: Offers recommendations to improve efficiency for the selected grape variety.
Sources: src/app/performance/page.tsx
Portfolio Dashboard
The /portfolio route and its associated PortfolioDashboard component exist in the codebase but appear to be placeholders. They currently render a simple "Portfolio Dashboard" heading without any specific functionality or data. This suggests a future feature intended for users who manage multiple farms, such as agricultural consultants or large-scale farm owners.
Sources: src/app/portfolio/page.tsx, src/components/dashboard/PortfolioDashboard.tsx
Conclusion
The dashboard system is a central and critical feature of the Vinesight application. It effectively aggregates and presents complex farm data in an accessible format. The FarmerDashboard serves as the operational hub for daily activities, while the Analytics and Performance dashboards provide strategic insights for long-term planning and optimization. The modular component-based architecture allows for clear separation of concerns and easy extension with new data visualizations and tools.