PortPlateAI is a comprehensive data analytics dashboard and AI assistant for analyzing California's top agricultural commodities. Built with React, this production-quality application provides interactive visualizations, AI-powered insights, and spoilage simulation tools.

• Features
• Tech Stack
• Project Structure
• Installation
• Usage
• Backend Integration Guide
• Available Scripts
• Data Sources
• Future Enhancements

• Commodity selector with 8 major California crops
• Real-time metric cards (Total Value, Production, Export Value, etc.)
• Multiple chart types (Bar, Pie) using Recharts
• Comprehensive data table with all attributes
• Responsive design with TailwindCSS

• Natural language query interface
• Mock AI responses (ready for LangGraph/LLM integration)
• Conversation history tracking
• Example queries for user guidance

• Transportation delay modeling
• Temperature impact calculation
• Cold storage factor analysis
• Risk categorization (Low, Medium, High, Critical)
• Economic loss estimation
• Actionable recommendations

• Project mission and problem statement
• Technology stack overview
• Data source documentation
• Roadmap for future features

portplateai/
├── public/
├── src/
│   ├── components/
│   │   ├── Navbar.jsx              # Navigation bar
│   │   ├── Footer.jsx              # Footer component
│   │   ├── CommodityDropdown.jsx   # Commodity selector
│   │   ├── SummaryCards.jsx        # Metric cards display
│   │   ├── CommodityCharts.jsx     # Recharts visualizations
│   │   ├── CommodityTable.jsx      # Detailed data table
│   │   ├── AIInputBox.jsx          # AI query interface
│   │   └── SimulationForm.jsx      # Simulation input form
│   ├── pages/
│   │   ├── Dashboard.jsx           # Main analytics page
│   │   ├── AIInsights.jsx          # AI query page
│   │   ├── Simulation.jsx          # Spoilage simulation page
│   │   └── About.jsx               # About/info page
│   ├── data/
│   │   └── commodities.csv         # Agricultural data (2023)
│   ├── App.jsx                     # Main app component with routing
│   ├── main.jsx                    # React entry point
│   └── index.css                   # Global styles with Tailwind
├── index.html
├── package.json
├── vite.config.js
├── tailwind.config.js
├── postcss.config.js
└── README.md

• Node.js (v16 or higher)
• npm or yarn

1. Navigate to project directory:

cd portplateai

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open in browser: Navigate to http://localhost:3000

1. Select a commodity from the dropdown
2. View key metrics in the summary cards
3. Explore interactive charts
4. Review detailed data in the table

1. Type a question in the input box (or select an example)
2. Click "Ask AI" to get insights
3. View conversation history below
4. Note: Currently shows mock responses

1. Select a commodity
2. Enter transportation delay (hours)
3. Set average temperature (°F)
4. Choose cold storage availability
5. Click "Run Simulation" to see results
6. Review spoilage %, economic loss, and risk category
7. Note: Uses mock formulas

Location: src/pages/AIInsights.jsx

Current Code:

const handleAIQuery = async (query) => {
  // TODO: Replace this with actual backend API call
  const mockResponse = generateMockResponse(query, commodityData);
  // ...
};

Replace with:

import axios from 'axios';

const handleAIQuery = async (query) => {
  try {
    const response = await axios.post('YOUR_BACKEND_URL/api/ai/query', {
      query: query,
      data: commodityData
    });
    
    const aiResponse = response.data.response;
    
    const newEntry = {
      query,
      response: aiResponse,
      timestamp: new Date().toISOString(),
    };

    setResponse(aiResponse);
    setConversationHistory(prev => [...prev, newEntry]);
  } catch (error) {
    console.error('AI Query Error:', error);
    setResponse('Sorry, there was an error processing your request.');
  }
};

Location: src/pages/Simulation.jsx

Current Code:

const runSimulation = (formData) => {
  // TODO: Replace with actual backend API call
  const baselineSpoilage = calculateSpoilage(...);
  // ...
};

Replace with:

import axios from 'axios';

const runSimulation = async (formData) => {
  try {
    const response = await axios.post('YOUR_BACKEND_URL/api/simulate', formData);
    
    setResults({
      spoilagePercent: response.data.spoilagePercent,
      economicLoss: response.data.economicLoss,
      riskCategory: response.data.riskCategory,
      ...formData,
    });
  } catch (error) {
    console.error('Simulation Error:', error);
    // Handle error appropriately
  }
};

Create a .env file in the root directory:

VITE_API_BASE_URL=http://localhost:5000
VITE_AI_ENDPOINT=/api/ai/query
VITE_SIMULATION_ENDPOINT=/api/simulate

Update your code to use:

const API_URL = import.meta.env.VITE_API_BASE_URL;

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

The application uses data from:

1. California Department of Food & Agriculture (CDFA)

   • Production statistics
   • Organic certification data

2. USDA National Agricultural Statistics Service (NASS)

   • Crop reports
   • Yield data

3. USDA Economic Research Service

   • Export values
   • Market analysis

The commodities.csv file includes:

• Commodity name
• Year
• Planted/Harvested Acres
• Yield (with units)
• Production (with units)
• Price (with units)
• Total Value (USD)
• U.S. Rank
• CA Share percentages
• Export data
• Organic statistics
• Notes

• Multi-year trend analysis
• LangGraph-powered AI integration
• Real-time price feeds
• Weather impact analysis
• Expanded commodity coverage
• User authentication
• Custom report generation
• Mobile app version

• LangGraph/LLM API for AI insights
• Predictive modeling API for simulations
• Data pipeline for real-time updates
• User management system

This project is designed to be extensible. To add new features:

1. New Commodity: Add data to commodities.csv
2. New Page: Create in src/pages/ and add to App.jsx routes
3. New Component: Create in src/components/ and import where needed
4. New Chart: Use Recharts components in CommodityCharts.jsx

• CSV is loaded on app mount via PapaParse
• All currency values use USD formatting
• Charts are responsive and mobile-friendly
• Mock responses clearly labeled for future replacement
• TailwindCSS provides consistent styling
• Component-based architecture for easy maintenance

For questions, suggestions, or issues:

• Review the code comments for implementation details
• Check the console for any error messages
• Ensure commodities.csv is properly formatted

This project is for educational and demonstration purposes.

Built with ❤️ for agricultural innovation

🌾 PortPlateAI - Empowering agriculture through data-driven insights