### React Router Setup for Application Navigation

Source: https://context7.com/sudo-warrior/cursor_nakuru/llms.txt

This code snippet sets up the main application routing using React Router. It defines routes for various pages like Dashboard, AddExpense, Payment, and others, and includes a Navbar component for navigation. It utilizes functional components and hooks from 'react-router-dom'.

```tsx
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Dashboard from './pages/Dashboard';
import AddExpense from './pages/AddExpense';
import Payment from './pages/Payment';
import WorkerPayout from './pages/WorkerPayout';
import Analytics from './pages/Analytics';
import CreditProfile from './pages/CreditProfile';
import Education from './pages/Education';
import Navbar from './components/Navbar';

export function App() {
  return (
    <Router>
      <div className="flex flex-col min-h-screen bg-[#f8f9fa] w-full">
        <Navbar />
        <main className="flex-grow container mx-auto px-4 py-6">
          <Routes>
            <Route path="/" element={<Dashboard />} />
            <Route path="/add-expense" element={<AddExpense />} />
            <Route path="/payment" element={<Payment />} />
            <Route path="/worker-payout" element={<WorkerPayout />} />
            <Route path="/analytics" element={<Analytics />} />
            <Route path="/credit-profile" element={<CreditProfile />} />
            <Route path="/educate" element={<Education />} />
          </Routes>
        </main>
      </div>
    </Router>
  );
}
```

--------------------------------

### Expandable Farmer Education Content (React/TSX)

Source: https://context7.com/sudo-warrior/cursor_nakuru/llms.txt

This React component displays expandable educational topics for farmers. It manages the expanded state of each topic and renders HTML content dynamically. Dependencies include React. It takes an array of topic objects as input and outputs a collapsible educational display.

```tsx
import React, { useState } from 'react';

interface EducationTopic {
  id: string;
  title: string;
  content: string;
  expanded: boolean;
}

const Education: React.FC = () => {
  const [topics, setTopics] = useState<EducationTopic[]>([
    {
      id: 'financial-literacy',
      title: 'Financial Literacy for Farmers',
      content: `
        <h3>Understanding Farm Finances</h3>
        <p>Managing farm finances is crucial for sustainable agriculture. Start by separating personal and business finances.</p>
        <h3>Record Keeping</h3>
        <p>Keep detailed records of all income and expenses for tax preparation and loan applications.</p>
        <h3>Building Farm Credit</h3>
        <p>Make timely payments to build your credit score over time.</p>
      `,
      expanded: false
    },
    {
      id: 'crop-management',
      title: 'Crop Management Techniques',
      content: `
        <h3>Crop Selection</h3>
        <p>Choose crops well-suited to your climate, soil, and market demand. Diversify to reduce risk.</p>
        <h3>Soil Health Management</h3>
        <p>Regular soil testing helps determine nutrient needs. Use crop rotation and organic matter.</p>
      `,
      expanded: false
    }
  ]);

  const toggleTopic = (id: string) => {
    setTopics(topics.map(topic =>
      topic.id === id ? { ...topic, expanded: !topic.expanded } : topic
    ));
  };

  return (
    <div>
      {topics.map(topic => (
        <div key={topic.id}>
          <div onClick={() => toggleTopic(topic.id)}>
            <h3>{topic.title}</h3>
          </div>
          {topic.expanded && (
            <div dangerouslySetInnerHTML={{ __html: topic.content }} />
          )}
        </div>
      ))}

      <div>
        <h2>Upcoming Farmer Training Sessions</h2>
        <div>
          <h3>Modern Irrigation Techniques</h3>
          <p>Learn water-saving irrigation methods for small farms.</p>
          <span>Oct 25, 2023</span>
        </div>
        <div>
          <h3>Farm Record Keeping Workshop</h3>
          <p>Practical session on maintaining financial records.</p>
          <span>Nov 10, 2023</span>
        </div>
      </div>
    </div>
  );
};

```

--------------------------------

### Add Farm Expenses with Quantity and Cost Tracking (React)

Source: https://context7.com/sudo-warrior/cursor_nakuru/llms.txt

The AddExpense component allows users to input farm expenses, including item name, quantity, and cost. It stores a history of expenses, calculates running totals, and displays them with KSH currency conversion. It also includes functionality to delete individual expense entries.

```tsx
import React, { useState } from 'react';
import { mockExpenses } from '../utils/mockData';
import type { Expense } from '../utils/mockData';

const AddExpense: React.FC = () => {
  const [expenses, setExpenses] = useState<Expense[]>(mockExpenses);
  const [newExpense, setNewExpense] = useState({
    name: '',
    quantity: 1,
    cost: 0
  });
  const [showSuccess, setShowSuccess] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const expense: Expense = {
      id: expenses.length + 1,
      name: newExpense.name,
      quantity: newExpense.quantity,
      cost: newExpense.cost,
      date: new Date().toISOString().split('T')[0]
    };
    setExpenses([...expenses, expense]);
    setNewExpense({ name: '', quantity: 1, cost: 0 });
    setShowSuccess(true);
    setTimeout(() => setShowSuccess(false), 3000);
  };

  const deleteExpense = (id: number) => {
    setExpenses(expenses.filter(expense => expense.id !== id));
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <input
        type="text"
        name="name"
        value={newExpense.name}
        onChange={(e) => setNewExpense({...newExpense, name: e.target.value})}
        placeholder="Item Name"
        required
      />
      <input
        type="number"
        name="quantity"
        min="1"
        value={newExpense.quantity}
        onChange={(e) => setNewExpense({...newExpense, quantity: Number(e.target.value)})
        required
      />
      <input
        type="number"
        name="cost"
        min="0"
        step="0.01"
        value={newExpense.cost}
        onChange={(e) => setNewExpense({...newExpense, cost: Number(e.target.value)})
        placeholder="Cost (KSH)"
        required
      />
      <button type="submit">Save Expense</button>

      {/* Display expenses table with total */}
      <div>Total: KSH {(expenses.reduce((sum, exp) => sum + exp.cost, 0) * 130).toFixed(0)}</div>
    </form>
  );
};

```

--------------------------------

### Process Payments and Track Transactions (React)

Source: https://context7.com/sudo-warrior/cursor_nakuru/llms.txt

The Payment component handles incoming payments from buyers, displaying their status as completed or pending. It simulates asynchronous payment processing with loading indicators and maintains a history of all transactions, showing the total amount received in KSH.

```tsx
import React, { useState } from 'react';
import { mockTransactions } from '../utils/mockData';
import type { Transaction } from '../utils/mockData';

const Payment: React.FC = () => {
  const [transactions, setTransactions] = useState<Transaction[]>(mockTransactions);
  const [formData, setFormData] = useState({ buyerName: '', amount: 0 });
  const [paymentStatus, setPaymentStatus] = useState<null | 'processing' | 'success' | 'error'>(null);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setPaymentStatus('processing');

    // Simulate API call
    setTimeout(() => {
      const newTransaction: Transaction = {
        id: transactions.length + 1,
        buyerName: formData.buyerName,
        amount: formData.amount,
        date: new Date().toISOString().split('T')[0],
        status: 'completed'
      };
      setTransactions([...transactions, newTransaction]);
      setFormData({ buyerName: '', amount: 0 });
      setPaymentStatus('success');
      setTimeout(() => setPaymentStatus(null), 3000);
    }, 2000);
  };

  const totalReceived = transactions
    .filter(t => t.status === 'completed')
    .reduce((sum, t) => sum + t.amount, 0) * 130;

  return (
    <div>
      {paymentStatus === 'processing' && <p>Processing payment...</p>}
      {paymentStatus === 'success' && <p>Payment received successfully! ✅</p>}

      <form onSubmit={handleSubmit}>
        <input
          type="text"
          name="buyerName"
          value={formData.buyerName}
          onChange={(e) => setFormData({...formData, buyerName: e.target.value})}
          placeholder="Buyer Name"
          required
        />
        <input
          type="number"
          name="amount"
          value={formData.amount}
          onChange={(e) => setFormData({...formData, amount: Number(e.target.value)})
          placeholder="Amount (KSH)"
          required
        />
        <button type="submit" disabled={paymentStatus === 'processing'}>
          Receive Payment
        </button>
      </form>

      <div>Total Received: KSH {totalReceived.toFixed(0)}</div>
    </div>
  );
};

```

--------------------------------

### Calculate Financial Totals (TypeScript)

Source: https://context7.com/sudo-warrior/cursor_nakuru/llms.txt

The `calculateTotals` utility function aggregates financial data, summing completed transaction income, total expenses, and worker payments. It also computes AI-predicted profit. This function relies on `mockTransactions`, `mockExpenses`, and `mockWorkers` data structures.

```typescript
export interface Expense {
  id: number;
  name: string;
  quantity: number;
  cost: number;
  date: string;
}

export interface Worker {
  id: number;
  name: string;
  role: string;
  amount: number;
  phone: string;
}

export interface Transaction {
  id: number;
  buyerName: string;
  amount: number;
  date: string;
  status: 'completed' | 'pending';
}

export const calculateTotals = () => {
  const totalIncome = mockTransactions
    .filter(t => t.status === 'completed')
    .reduce((sum, transaction) => sum + transaction.amount, 0);

  const totalExpenses = mockExpenses
    .reduce((sum, expense) => sum + expense.cost, 0);

  const workersPayment = mockWorkers
    .reduce((sum, worker) => sum + worker.amount, 0);

  // AI predicted profit calculation
  const predictedProfit = totalIncome - totalExpenses - workersPayment;

  return {
    totalIncome,
    totalExpenses,
    workersPayment,
    predictedProfit
  };
};

```

--------------------------------

### Display Farm Financial Dashboard Overview in React/TypeScript

Source: https://context7.com/sudo-warrior/cursor_nakuru/llms.txt

The Dashboard component in hambaPay displays a financial overview for farmers. It aggregates total income, expenses, worker payments, and predicted profit using the `calculateTotals` utility. This component relies on `SummaryCard` for displaying individual financial metrics and integrates with `mockData` for calculations. It aims to provide a quick, data-driven view of farm financial health.

```tsx
import React from 'react';
import SummaryCard from '../components/SummaryCard';
import { calculateTotals } from '../utils/mockData';

const Dashboard: React.FC = () => {
  const { totalIncome, totalExpenses, workersPayment, predictedProfit } = calculateTotals();

  return (
    <div className="space-y-8">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold text-gray-800">
          Welcome, John the Farmer 👨🏾‍🌾
        </h1>
        <div className="bg-[#2e7d32] text-white px-4 py-2 rounded-md">
          Today: {new Date().toLocaleDateString()}
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <SummaryCard title="Total Income" value={totalIncome} type="income" />
        <SummaryCard title="Total Expenses" value={totalExpenses} type="expense" />
        <SummaryCard title="Predicted Profit (AI)" value={predictedProfit} type="profit" />
      </div>

      <div className="bg-blue-50 border border-blue-200 rounded-lg p-5 mt-8">
        <h3 className="text-lg font-semibold text-blue-800">AI Farm Assistant</h3>
        <p className="text-blue-700 mt-2">
          Based on your recent expenses and income, consider investing in more
          drought-resistant seeds for the next season to increase your yield by up to 15%.
        </p>
      </div>
    </div>
  );
};

export default Dashboard;
```

--------------------------------

### SummaryCard Financial Metrics Component (React/TSX)

Source: https://context7.com/sudo-warrior/cursor_nakuru/llms.txt

This React component displays financial metrics with color-coded styling and icons. It formats currency values and uses Lucide React for icons. Dependencies include React and Lucide React. It accepts title, value, and type props, rendering a styled card with a currency value.

```tsx
import React from 'react';
import { DollarSign, TrendingUp, TrendingDown } from 'lucide-react';

interface SummaryCardProps {
  title: string;
  value: number;
  type: 'income' | 'expense' | 'profit' | 'payment';
}

const SummaryCard: React.FC<SummaryCardProps> = ({ title, value, type }) => {
  const getCardDetails = () => {
    switch (type) {
      case 'income':
        return {
          bgColor: 'bg-green-50',
          textColor: 'text-green-700',
          icon: <DollarSign className="h-8 w-8 text-green-500" />
        };
      case 'expense':
        return {
          bgColor: 'bg-red-50',
          textColor: 'text-red-700',
          icon: <TrendingDown className="h-8 w-8 text-red-500" />
        };
      case 'profit':
        return {
          bgColor: 'bg-blue-50',
          textColor: 'text-blue-700',
          icon: <TrendingUp className="h-8 w-8 text-blue-500" />
        };
      default:
        return {
          bgColor: 'bg-gray-50',
          textColor: 'text-gray-700',
          icon: <DollarSign className="h-8 w-8 text-gray-500" />
        };
    }
  };

  const { bgColor, textColor, icon } = getCardDetails();

  return (
    <div className={`${bgColor} border rounded-lg p-5 shadow-sm`}>
      <div className="flex justify-between items-center">
        <div>
          <h3 className="text-lg font-medium text-gray-700">{title}</h3>
          <p className={`text-2xl font-bold ${textColor}`}>
            KSH {(value * 130).toLocaleString()}
          </p>
        </div>
        <div>{icon}</div>
      </div>
    </div>
  );
};

export default SummaryCard;

```

--------------------------------

### Analytics Dashboard with Recharts (React/TSX)

Source: https://context7.com/sudo-warrior/cursor_nakuru/llms.txt

This React component displays an analytics dashboard using Recharts. It generates bar and pie charts to visualize monthly income vs. expenses and expense distribution by category, respectively. It relies on mock data and calculation utilities. The charts include interactive tooltips formatted with KSH currency.

```tsx
import React from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';
import { mockExpenses, mockTransactions, calculateTotals } from '../utils/mockData';

const Analytics: React.FC = () => {
  const { totalIncome, totalExpenses, predictedProfit } = calculateTotals();

  // Monthly data for bar chart
  const monthlyData = [
    { name: 'Jan', income: 0, expenses: 0 },
    { name: 'Feb', income: 0, expenses: 0 },
    // ... other months
    { name: 'Oct', income: totalIncome, expenses: totalExpenses },
    { name: 'Nov', income: 0, expenses: 0 },
    { name: 'Dec', income: 0, expenses: 0 }
  ];

  // Expense distribution for pie chart
  const expenseCategories = mockExpenses.reduce((acc, expense) => {
    const existing = acc.find(cat => cat.name === expense.name);
    if (existing) {
      existing.value += expense.cost;
    } else {
      acc.push({ name: expense.name, value: expense.cost });
    }
    return acc;
  }, [] as { name: string; value: number }[]);

  const COLORS = ['#2e7d32', '#1976d2', '#7b1fa2', '#f57c00', '#d32f2f', '#388e3c'];

  return (
    <div>
      <ResponsiveContainer width="100%" height={300}>
        <BarChart data={monthlyData}>
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="name" />
          <YAxis />
          <Tooltip formatter={value => `KSH ${(Number(value) * 130).toLocaleString()}`} />
          <Legend />
          <Bar dataKey="income" name="Income" fill="#2e7d32" />
          <Bar dataKey="expenses" name="Expenses" fill="#d32f2f" />
        </BarChart>
      </ResponsiveContainer>

      <ResponsiveContainer width="100%" height={300}>
        <PieChart>
          <Pie
            data={expenseCategories}
            cx="50%"
            cy="50%"
            labelLine={true}
            label={({name, percent}) => `${name}: ${(percent * 100).toFixed(0)}%`}
            outerRadius={80}
            dataKey="value"
          >
            {expenseCategories.map((entry, index) => (
              <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
            ))}
          </Pie>
          <Tooltip formatter={value => `KSH ${(Number(value) * 130).toLocaleString()}`} />
        </PieChart>
      </ResponsiveContainer>
    </div>
  );
};

```

--------------------------------

### React Worker Payout Component with M-Pesa Integration

Source: https://context7.com/sudo-warrior/cursor_nakuru/llms.txt

This React component, WorkerPayout, facilitates M-Pesa payments to workers. It manages worker selection, payment status, and simulates backend processing for mobile money transactions. Dependencies include React and mock data utilities.

```tsx
import React, { useState } from 'react';
import { mockWorkers } from '../utils/mockData';
import type { Worker } from '../utils/mockData';

const WorkerPayout: React.FC = () => {
  const [workers, setWorkers] = useState<Worker[]>(mockWorkers);
  const [selectedWorkers, setSelectedWorkers] = useState<number[]>([]);
  const [paymentStatus, setPaymentStatus] = useState<null | 'processing' | 'success' | 'backend-processing'>(null);

  const handleSelectWorker = (workerId: number) => {
    if (selectedWorkers.includes(workerId)) {
      setSelectedWorkers(selectedWorkers.filter(id => id !== workerId));
    } else {
      setSelectedWorkers([...selectedWorkers, workerId]);
    }
  };

  const handlePayWorkers = () => {
    if (selectedWorkers.length === 0) return;

    setPaymentStatus('backend-processing'); // Connecting to M-Pesa gateway
    setTimeout(() => {
      setPaymentStatus('processing'); // Processing mobile money payments
      setTimeout(() => {
        setPaymentStatus('success'); // Workers paid, SMS sent
        setTimeout(() => {
          setPaymentStatus(null);
          setSelectedWorkers([]);
        }, 3000);
      }, 2000);
    }, 1500);
  };

  const totalAmount = workers
    .filter(worker => selectedWorkers.includes(worker.id))
    .reduce((sum, worker) => sum + worker.amount, 0);

  return (
    <div>
      {paymentStatus === 'backend-processing' && <p>Connecting to M-Pesa payment gateway...</p>}
      {paymentStatus === 'processing' && <p>Processing mobile money payments via M-Pesa...</p>}
      {paymentStatus === 'success' && <p>Workers paid successfully via M-Pesa! ✅ SMS notifications sent.</p>}

      <button
        onClick={handlePayWorkers}
        disabled={selectedWorkers.length === 0 || paymentStatus !== null}
      >
        Pay Selected Workers via M-Pesa
      </button>

      <div>Total Selected: KSH {(totalAmount * 130).toFixed(0)}</div>

      {workers.map(worker => (
        <div key={worker.id}>
          <input
            type="checkbox"
            checked={selectedWorkers.includes(worker.id)}
            onChange={() => handleSelectWorker(worker.id)}
            disabled={paymentStatus !== null}
          />
          <span>{worker.name} - {worker.role} - {worker.phone} - KSH {(worker.amount * 130).toFixed(0)}</span>
        </div>
      ))}
    </div>
  );
};

```

--------------------------------

### Display Farm Credit Score and Loan Eligibility (React)

Source: https://context7.com/sudo-warrior/cursor_nakuru/llms.txt

The CreditProfile component displays a farmer's credit score, loan eligibility status (Excellent/Good/Fair/Poor), and available loan products. It calculates payment reliability based on transaction history. Dependencies include React and mock data utilities.

```tsx
import React from 'react';
import { mockTransactions } from '../utils/mockData';

const CreditProfile: React.FC = () => {
  const creditScore = 720;
  const maxCreditScore = 850;
  const loanLimit = 250000; // KSH

  const totalTransactions = mockTransactions.length;
  const completedTransactions = mockTransactions.filter(t => t.status === 'completed').length;
  const paymentReliability = Math.round((completedTransactions / totalTransactions) * 100);

  const getLoanEligibility = () => {
    if (creditScore >= 700) return {
      status: 'Excellent',
      message: 'You qualify for our best rates and highest loan amounts.'
    };
    if (creditScore >= 600) return {
      status: 'Good',
      message: 'You qualify for standard loans with competitive rates.'
    };
    if (creditScore >= 500) return {
      status: 'Fair',
      message: 'You qualify for smaller loans with higher interest rates.'
    };
    return {
      status: 'Poor',
      message: 'Improve your score by completing more transactions.'
    };
  };

  const loanEligibility = getLoanEligibility();

  return (
    <div>
      <div>
        <h2>Farm Credit Score</h2>
        <span>{creditScore} / {maxCreditScore}</span>
        <div>Loan Limit: KSH {loanLimit.toLocaleString()}</div>
        <span>{loanEligibility.status} Credit</span>
      </div>

      <div>
        <h3>Payment Reliability: {paymentReliability}%</h3>
        <p>Higher reliability leads to better loan terms.</p>
      </div>

      <div>
        <h3>Available Loan Products:</h3>
        <ul>
          <li>Farm Equipment Loan - Up to KSH 150,000</li>
          <li>Seasonal Planting Loan - Up to KSH 75,000</li>
          <li>Farm Expansion Loan - Up to KSH 250,000</li>
        </ul>
      </div>

      {/* Payment history with credit impact */}
      {mockTransactions.map(transaction => (
        <div key={transaction.id}>
          <span>{transaction.date} - {transaction.buyerName}</span>
          <span>KSH {(transaction.amount * 130).toFixed(0)}</span>
          <span>{transaction.status === 'completed' ? '+5 points' : 'Pending'}</span>
        </div>
      ))}
    </div>
  );
};

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.