Merge branch 'main' into feature-farm-setup

frontend/app/(sidebar)/marketplace/CustomTooltip.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { Card } from "@/components/ui/card";
+
+interface CustomTooltipProps {
+  active?: boolean;
+  payload?: { value: number }[];
+  label?: string;
+}
+
+export default function CustomTooltip({ active, payload, label }: CustomTooltipProps) {
+  if (active && payload && payload.length) {
+    return (
+      <Card className="bg-white dark:bg-gray-800 p-2 shadow-md border-none">
+        <p className="text-sm font-medium">{label}</p>
+        <p className="text-sm text-primary">Price: ${payload[0].value}</p>
+        {payload[1] && <p className="text-sm text-gray-500">Volume: {payload[1].value} units</p>}
+      </Card>
+    );
+  }
+  return null;
+}

frontend/app/(sidebar)/marketplace/DemandAnalysis.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
+import MarketOpportunity from "./MarketOpportunity";
+import { IMarketComparison } from "@/lib/marketData";
+
+interface DemandAnalysisProps {
+  selectedCrop: string;
+  marketComparison: IMarketComparison[];
+}
+
+export default function DemandAnalysis({ selectedCrop, marketComparison }: DemandAnalysisProps) {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+      <Card>
+        <CardHeader className="pb-2">
+          <CardTitle className="text-lg">Demand Forecast</CardTitle>
+          <CardDescription>Projected demand for {selectedCrop} over the next 30 days</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            {marketComparison.map((market) => (
+              <div key={market.name} className="space-y-1">
+                <div className="flex justify-between text-sm">
+                  <span>{market.name}</span>
+                  <span className="font-medium">{market.demand}%</span>
+                </div>
+                <Progress value={market.demand} className="h-2" />
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+      <MarketOpportunity crop={selectedCrop} data={marketComparison} />
+    </div>
+  );
+}

frontend/app/(sidebar)/marketplace/MarketComparisonTab.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, Cell } from "recharts";
+import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Button } from "@/components/ui/button";
+import { ArrowUpRight, ArrowDownRight, ChevronRight } from "lucide-react";
+import { Progress } from "@/components/ui/progress";
+import { IMarketComparison } from "@/lib/marketData";
+
+interface MarketComparisonTabProps {
+  marketComparison: IMarketComparison[];
+  selectedCrop: string;
+  onSelectCrop: (crop: string) => void;
+}
+
+export default function MarketComparisonTab({
+  marketComparison,
+  selectedCrop,
+  onSelectCrop,
+}: MarketComparisonTabProps) {
+  return (
+    <>
+      <div className="h-[300px] w-full">
+        <ResponsiveContainer width="100%" height="100%">
+          <BarChart data={marketComparison} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
+            <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
+            <XAxis dataKey="name" tick={{ fontSize: 12 }} />
+            <YAxis tick={{ fontSize: 12 }} tickFormatter={(value) => `$${value}`} />
+            <Tooltip />
+            <Legend />
+            <Bar dataKey="price" name="Price per unit" fill="#16a34a" radius={[4, 4, 0, 0]}>
+              {marketComparison.map((entry, index) => (
+                <Cell
+                  key={`cell-${index}`}
+                  fill={entry.price === Math.max(...marketComparison.map((item) => item.price)) ? "#15803d" : "#16a34a"}
+                />
+              ))}
+            </Bar>
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+
+      <div className="mt-4">
+        <Table>
+          <TableCaption>
+            Market comparison for {selectedCrop} as of {new Date().toLocaleDateString()}
+          </TableCaption>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Market</TableHead>
+              <TableHead>Price</TableHead>
+              <TableHead>Demand</TableHead>
+              <TableHead>Price Difference</TableHead>
+              <TableHead className="text-right">Action</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {marketComparison.map((market) => {
+              const avgPrice = marketComparison.reduce((sum, m) => sum + m.price, 0) / marketComparison.length;
+              const priceDiff = (((market.price - avgPrice) / avgPrice) * 100).toFixed(1);
+              const isPriceHigh = Number.parseFloat(priceDiff) > 0;
+
+              return (
+                <TableRow
+                  key={market.name}
+                  className="cursor-pointer hover:bg-muted/50"
+                  onClick={() => onSelectCrop(market.name)}>
+                  <TableCell className="font-medium">{market.name}</TableCell>
+                  <TableCell>${market.price.toFixed(2)}</TableCell>
+                  <TableCell>
+                    <div className="flex items-center gap-2">
+                      <Progress value={market.demand} className="h-2 w-16" />
+                      <span>{market.demand}%</span>
+                    </div>
+                  </TableCell>
+                  <TableCell className={isPriceHigh ? "text-green-600" : "text-red-600"}>
+                    <div className="flex items-center gap-1">
+                      {isPriceHigh ? <ArrowUpRight className="h-4 w-4" /> : <ArrowDownRight className="h-4 w-4" />}
+                      {priceDiff}%
+                    </div>
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <Button variant="ghost" size="sm" className="h-8 gap-1">
+                      Details <ChevronRight className="h-4 w-4" />
+                    </Button>
+                  </TableCell>
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </Table>
+      </div>
+    </>
+  );
+}

frontend/app/(sidebar)/marketplace/MarketOpportunity.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Progress } from "@/components/ui/progress";
+import { Separator } from "@/components/ui/separator";
+import { ArrowUpRight, ArrowDownRight, TrendingUp, MapPin, AlertCircle } from "lucide-react";
+import { IMarketComparison } from "@/lib/marketData";
+
+interface MarketOpportunityProps {
+  crop: string;
+  data: IMarketComparison[];
+}
+
+export default function MarketOpportunity({ crop, data }: MarketOpportunityProps) {
+  const highestPrice = Math.max(...data.map((item) => item.price));
+  const bestMarket = data.find((item) => item.price === highestPrice);
+  const highestDemand = Math.max(...data.map((item) => item.demand));
+  const highDemandMarket = data.find((item) => item.demand === highestDemand);
+
+  return (
+    <Card className="border-l-4 border-l-green-500">
+      <CardHeader className="pb-2">
+        <CardTitle className="text-lg flex items-center">
+          <TrendingUp className="h-5 w-5 mr-2 text-green-500" />
+          Sales Opportunity for {crop}
+        </CardTitle>
+        <CardDescription>Based on current market conditions</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-4">
+          <div>
+            <p className="text-sm font-medium mb-1">Best Price Opportunity</p>
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-lg font-bold text-green-600">${bestMarket?.price}</p>
+                <p className="text-sm text-muted-foreground">{bestMarket?.name}</p>
+              </div>
+              <Badge className="bg-green-100 text-green-800 hover:bg-green-200">
+                {Math.round((bestMarket!.price / (highestPrice - 1)) * 100)}% above average
+              </Badge>
+            </div>
+          </div>
+
+          <Separator />
+
+          <div>
+            <p className="text-sm font-medium mb-1">Highest Demand</p>
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-lg font-bold">{highDemandMarket?.name}</p>
+                <div className="flex items-center">
+                  <Progress value={highDemandMarket?.demand} className="h-2 w-24 mr-2" />
+                  <span className="text-sm">{highDemandMarket?.demand}% demand</span>
+                </div>
+              </div>
+              <Button variant="outline" size="sm" className="gap-1">
+                <MapPin className="h-4 w-4" /> View Market
+              </Button>
+            </div>
+          </div>
+
+          <Alert className="bg-amber-50 border-amber-200">
+            <AlertCircle className="h-4 w-4 text-amber-600" />
+            <AlertTitle className="text-amber-800">Recommendation</AlertTitle>
+            <AlertDescription className="text-amber-700">
+              Consider selling your {crop} at {bestMarket?.name} within the next 7 days to maximize profit.
+            </AlertDescription>
+          </Alert>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

frontend/app/(sidebar)/marketplace/MarketPriceTable.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { Table, TableBody, TableHeader, TableRow, TableHead, TableCell } from "@/components/ui/table";
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { ArrowUpRight, ArrowDownRight } from "lucide-react";
+import { IMarketData, ITrend } from "@/lib/marketData";
+
+interface MarketPriceTableProps {
+  marketData: IMarketData[];
+  isLoading: boolean;
+  onSelectCrop: (crop: string) => void;
+}
+
+const getTrendColor = (trend: ITrend) => (trend.direction === "up" ? "text-green-600" : "text-red-600");
+
+const getTrendIcon = (trend: ITrend) =>
+  trend.direction === "up" ? (
+    <ArrowUpRight className="h-4 w-4 text-green-600" />
+  ) : (
+    <ArrowDownRight className="h-4 w-4 text-red-600" />
+  );
+
+export default function MarketPriceTable({ marketData, isLoading, onSelectCrop }: MarketPriceTableProps) {
+  if (isLoading) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>Market Price Table</CardTitle>
+          <CardDescription>Comprehensive price data across all markets and crops</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-3">
+            <Skeleton className="h-8 w-full" />
+            <Skeleton className="h-8 w-full" />
+            <Skeleton className="h-8 w-full" />
+            <Skeleton className="h-8 w-full" />
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Market Price Table</CardTitle>
+        <CardDescription>Comprehensive price data across all markets and crops</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="overflow-x-auto">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Crop</TableHead>
+                {marketData[0]?.marketPrices.map((market) => (
+                  <TableHead key={market.market}>{market.market}</TableHead>
+                ))}
+                <TableHead>Average</TableHead>
+                <TableHead>Recommended</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {marketData.map((crop) => (
+                <TableRow
+                  key={crop.id}
+                  className="cursor-pointer hover:bg-muted/50"
+                  onClick={() => onSelectCrop(crop.name)}>
+                  <TableCell className="font-medium">{crop.name}</TableCell>
+                  {crop.marketPrices.map((market) => (
+                    <TableCell key={market.market}>
+                      <div className="flex items-center gap-1">
+                        <span>${market.price.toFixed(2)}</span>
+                        <span className={getTrendColor(market.trend)}>{getTrendIcon(market.trend)}</span>
+                      </div>
+                    </TableCell>
+                  ))}
+                  <TableCell>${crop.averagePrice.toFixed(2)}</TableCell>
+                  <TableCell className="font-medium text-amber-600">${crop.recommendedPrice.toFixed(2)}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

frontend/app/(sidebar)/marketplace/MarketSummary.tsx

@@ -0,0 +1,64 @@
+// components/MarketSummary.tsx
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Skeleton } from "@/components/ui/skeleton";
+import { ArrowUpRight, ArrowDownRight } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { IMarketData } from "@/lib/marketData";
+
+interface MarketSummaryProps {
+  marketData: IMarketData[];
+  isLoading: boolean;
+  onSelectCrop: (crop: string) => void;
+}
+
+export default function MarketSummary({ marketData, isLoading, onSelectCrop }: MarketSummaryProps) {
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-lg">Market Summary</CardTitle>
+        <CardDescription>Today's market overview</CardDescription>
+      </CardHeader>
+      <CardContent>
+        {isLoading ? (
+          <div className="space-y-3">
+            <Skeleton className="h-4 w-full" />
+            <Skeleton className="h-4 w-3/4" />
+            <Skeleton className="h-4 w-5/6" />
+          </div>
+        ) : (
+          <ScrollArea className="h-[220px] pr-4">
+            <div className="space-y-4">
+              {marketData.slice(0, 5).map((crop) => (
+                <div key={crop.id} className="flex items-center justify-between">
+                  <div>
+                    <p className="font-medium">{crop.name}</p>
+                    <div className="flex items-center text-sm text-muted-foreground">
+                      <span>${crop.averagePrice.toFixed(2)}</span>
+                      {crop.marketPrices[0].trend.direction === "up" ? (
+                        <span className="flex items-center text-green-600 ml-1">
+                          <ArrowUpRight className="h-3 w-3 mr-0.5" />
+                          {crop.marketPrices[0].trend.value}%
+                        </span>
+                      ) : (
+                        <span className="flex items-center text-red-600 ml-1">
+                          <ArrowDownRight className="h-3 w-3 mr-0.5" />
+                          {crop.marketPrices[0].trend.value}%
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                  <Button variant="ghost" size="sm" className="h-8" onClick={() => onSelectCrop(crop.name)}>
+                    View
+                  </Button>
+                </div>
+              ))}
+            </div>
+          </ScrollArea>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

frontend/app/(sidebar)/marketplace/PriceAnalytics.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "recharts";
+import { Card, CardContent } from "@/components/ui/card";
+import { RefreshCw, Leaf, Calendar } from "lucide-react";
+import CustomTooltip from "./CustomTooltip";
+import { Badge } from "@/components/ui/badge";
+import { Progress } from "@/components/ui/progress";
+import { IHistoricalData } from "@/lib/marketData";
+
+interface PriceAnalyticsProps {
+  historicalData: IHistoricalData[];
+  isLoading: boolean;
+  selectedCrop: string;
+}
+
+export default function PriceAnalytics({ historicalData, isLoading, selectedCrop }: PriceAnalyticsProps) {
+  if (isLoading) {
+    return (
+      <div className="w-full h-[300px] flex items-center justify-center">
+        <div className="text-center">
+          <RefreshCw className="h-8 w-8 animate-spin mx-auto text-primary/70" />
+          <p className="mt-2 text-sm text-muted-foreground">Loading market data...</p>
+        </div>
+      </div>
+    );
+  }
+
+  const currentPrice = historicalData[historicalData.length - 1]?.price ?? 0;
+  const averagePrice = historicalData.reduce((sum, item) => sum + item.price, 0) / historicalData.length;
+  const recommendedPrice = currentPrice * 1.05;
+
+  return (
+    <>
+      <div className="h-[300px] w-full">
+        <ResponsiveContainer width="100%" height="100%">
+          <LineChart data={historicalData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
+            <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
+            <XAxis
+              dataKey="date"
+              tick={{ fontSize: 12 }}
+              tickFormatter={(value) => {
+                const date = new Date(value);
+                return `${date.getMonth() + 1}/${date.getDate()}`;
+              }}
+            />
+            <YAxis
+              tick={{ fontSize: 12 }}
+              tickFormatter={(value) => `$${value}`}
+              domain={["dataMin - 0.5", "dataMax + 0.5"]}
+            />
+            <YAxis
+              yAxisId={1}
+              orientation="right"
+              tick={{ fontSize: 12 }}
+              hide={true}
+              domain={["dataMin", "dataMax"]}
+            />
+            <Tooltip content={<CustomTooltip />} />
+            <Legend />
+            <Line
+              type="monotone"
+              dataKey="price"
+              stroke="#16a34a"
+              strokeWidth={2}
+              dot={{ r: 2 }}
+              activeDot={{ r: 6 }}
+              name="Price per unit"
+            />
+            <Line
+              type="monotone"
+              dataKey="volume"
+              stroke="#9ca3af"
+              strokeWidth={1.5}
+              strokeDasharray="5 5"
+              dot={false}
+              name="Trading volume"
+              yAxisId={1}
+              hide={true}
+            />
+          </LineChart>
+        </ResponsiveContainer>
+      </div>
+
+      <div className="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-4">
+        <Card className="bg-green-50 dark:bg-green-950/20">
+          <CardContent className="p-4">
+            <div className="flex justify-between items-center">
+              <div>
+                <p className="text-sm font-medium text-muted-foreground">Current Price</p>
+                <p className="text-2xl font-bold text-green-700">${currentPrice.toFixed(2)}</p>
+              </div>
+              <div className="h-10 w-10 rounded-full bg-green-100 flex items-center justify-center">
+                <Leaf className="h-5 w-5 text-green-700" />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="p-4">
+            <div className="flex justify-between items-center">
+              <div>
+                <p className="text-sm font-medium text-muted-foreground">30-Day Average</p>
+                <p className="text-2xl font-bold">${averagePrice.toFixed(2)}</p>
+              </div>
+              <div className="h-10 w-10 rounded-full bg-gray-100 flex items-center justify-center">
+                <Calendar className="h-5 w-5 text-gray-700" />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="p-4">
+            <div className="flex justify-between items-center">
+              <div>
+                <p className="text-sm font-medium text-muted-foreground">Recommended Price</p>
+                <p className="text-2xl font-bold text-amber-600">${recommendedPrice.toFixed(2)}</p>
+              </div>
+              <Badge variant="outline" className="bg-amber-50 text-amber-700 border-amber-200">
+                +5% margin
+              </Badge>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </>
+  );
+}

frontend/app/(sidebar)/marketplace/PriceAnalyticsCard.tsx

@@ -0,0 +1,114 @@
+// components/PriceAnalyticsCard.tsx
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { RefreshCw } from "lucide-react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import PriceAnalytics from "./PriceAnalytics";
+import MarketComparisonTab from "./MarketComparisonTab";
+import DemandAnalysis from "./DemandAnalysis";
+
+interface PriceAnalyticsCardProps {
+  isLoading: boolean;
+  selectedCrop: string;
+  timeRange: string;
+  lastUpdated: Date;
+  onSelectCrop: (crop: string) => void;
+  onTimeRangeChange: (value: string) => void;
+  onRefresh: () => void;
+  historicalData: any;
+  marketComparison: any;
+}
+
+export default function PriceAnalyticsCard({
+  isLoading,
+  selectedCrop,
+  timeRange,
+  lastUpdated,
+  onSelectCrop,
+  onTimeRangeChange,
+  onRefresh,
+  historicalData,
+  marketComparison,
+}: PriceAnalyticsCardProps) {
+  return (
+    <Card className="md:col-span-3">
+      <CardHeader className="pb-2">
+        <div className="flex flex-col md:flex-row justify-between md:items-center gap-4">
+          <div>
+            <CardTitle>Price Analytics</CardTitle>
+            <CardDescription>Track price trends and market movements</CardDescription>
+          </div>
+          <div className="flex flex-col sm:flex-row gap-2">
+            <Select value={selectedCrop} onValueChange={onSelectCrop}>
+              <SelectTrigger className="w-[180px]">
+                <SelectValue placeholder="Select crop" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="Corn">Corn</SelectItem>
+                <SelectItem value="Wheat">Wheat</SelectItem>
+                <SelectItem value="Soybeans">Soybeans</SelectItem>
+                <SelectItem value="Rice">Rice</SelectItem>
+                <SelectItem value="Potatoes">Potatoes</SelectItem>
+                <SelectItem value="Tomatoes">Tomatoes</SelectItem>
+                <SelectItem value="Apples">Apples</SelectItem>
+                <SelectItem value="Oranges">Oranges</SelectItem>
+              </SelectContent>
+            </Select>
+
+            <Select value={timeRange} onValueChange={onTimeRangeChange}>
+              <SelectTrigger className="w-[140px]">
+                <SelectValue placeholder="Time range" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="7">7 days</SelectItem>
+                <SelectItem value="14">14 days</SelectItem>
+                <SelectItem value="30">30 days</SelectItem>
+                <SelectItem value="90">90 days</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        {isLoading ? (
+          <div className="w-full h-[300px] flex items-center justify-center">
+            <div className="text-center">
+              <RefreshCw className="h-8 w-8 animate-spin mx-auto text-primary/70" />
+              <p className="mt-2 text-sm text-muted-foreground">Loading market data...</p>
+            </div>
+          </div>
+        ) : (
+          <Tabs defaultValue="price">
+            <TabsList className="mb-4">
+              <TabsTrigger value="price" className="gap-1">
+                Price Trend
+              </TabsTrigger>
+              <TabsTrigger value="comparison" className="gap-1">
+                Market Comparison
+              </TabsTrigger>
+              <TabsTrigger value="demand" className="gap-1">
+                Demand Analysis
+              </TabsTrigger>
+            </TabsList>
+            <TabsContent value="price" className="mt-0">
+              <PriceAnalytics historicalData={historicalData} isLoading={isLoading} selectedCrop={selectedCrop} />
+            </TabsContent>
+            <TabsContent value="comparison" className="mt-0">
+              <MarketComparisonTab
+                marketComparison={marketComparison}
+                selectedCrop={selectedCrop}
+                onSelectCrop={onSelectCrop}
+              />
+            </TabsContent>
+            <TabsContent value="demand" className="mt-0">
+              <DemandAnalysis selectedCrop={selectedCrop} marketComparison={marketComparison} />
+            </TabsContent>
+          </Tabs>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

frontend/app/(sidebar)/marketplace/TopOpportunities.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { TrendingUp } from "lucide-react";
+import { IMarketData } from "@/lib/marketData";
+
+interface TopOpportunitiesProps {
+  marketData: IMarketData[];
+  isLoading: boolean;
+  onSelectCrop: (crop: string) => void;
+}
+
+export default function TopOpportunities({ marketData, isLoading, onSelectCrop }: TopOpportunitiesProps) {
+  if (isLoading) {
+    return (
+      <Card>
+        <CardHeader className="pb-2">
+          <CardTitle className="text-lg">Top Opportunities</CardTitle>
+          <CardDescription>Best selling opportunities today</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-3">
+            <Skeleton className="h-4 w-full" />
+            <Skeleton className="h-4 w-3/4" />
+            <Skeleton className="h-4 w-5/6" />
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-lg">Top Opportunities</CardTitle>
+        <CardDescription>Best selling opportunities today</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-3">
+          {marketData
+            .filter((crop) => crop.opportunity)
+            .slice(0, 3)
+            .map((crop) => {
+              const bestMarket = crop.marketPrices.reduce(
+                (best, current) => (current.price > best.price ? current : best),
+                crop.marketPrices[0]
+              );
+              return (
+                <div key={crop.id} className="border rounded-lg p-3 bg-green-50/50 dark:bg-green-950/10">
+                  <div className="flex justify-between items-start">
+                    <div>
+                      <p className="font-medium">{crop.name}</p>
+                      <p className="text-sm text-muted-foreground">
+                        {bestMarket.market} - ${bestMarket.price.toFixed(2)}
+                      </p>
+                    </div>
+                    <Badge className="bg-green-100 text-green-800 hover:bg-green-200">High Demand</Badge>
+                  </div>
+                  <div className="mt-2 flex justify-between items-center">
+                    <div className="flex items-center gap-1">
+                      <TrendingUp className="h-4 w-4 text-green-600" />
+                      <span className="text-sm text-green-600">Recommended</span>
+                    </div>
+                    <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => onSelectCrop(crop.name)}>
+                      View Details
+                    </Button>
+                  </div>
+                </div>
+              );
+            })}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

frontend/app/(sidebar)/marketplace/page.tsx

@@ -2,26 +2,9 @@
 
 import { useState, useEffect } from "react";
 import { useSearchParams } from "next/navigation";
-import {
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-  Card,
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-  CardContent,
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-  CardDescription,
-  CardHeader,
-  CardTitle
-} from "@/components/ui/card";
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger
-} from "@/components/ui/tabs";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue
-} from "@/components/ui/select";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import {
@@ -35,7 +18,7 @@ import {
   ResponsiveContainer,
   BarChart,
   Bar,
-  Cell
+  Cell,
 } from "recharts";
 import {
   ArrowUpRight,
@@ -49,26 +32,14 @@ import {
   Leaf,
   BarChart3,
   LineChartIcon,
-  PieChart
+  PieChart,
 } from "lucide-react";
 import { Skeleton } from "@/components/ui/skeleton";
-import {
+import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-  Table,
-  TableBody,
-  TableCaption,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow
-} from "@/components/ui/table";
 import { Progress } from "@/components/ui/progress";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Separator } from "@/components/ui/separator";
-import {
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-  Alert,
-  AlertDescription,
-  AlertTitle
-} from "@/components/ui/alert";
 
 // Define types for market data
 
@@ -121,26 +92,10 @@ interface MarketOpportunityProps {
 
 // Mock data for market prices
 const generateMarketData = (): IMarketData[] => {
-  const crops = [
+  const crops = ["Corn", "Wheat", "Soybeans", "Rice", "Potatoes", "Tomatoes", "Apples", "Oranges"];
-    "Corn",
+  const markets = ["National Market", "Regional Hub", "Local Market", "Export Market", "Wholesale Market"];
-    "Wheat",
-    "Soybeans",
-    "Rice",
-    "Potatoes",
-    "Tomatoes",
-    "Apples",
-    "Oranges"
-  ];
-  const markets = [
-    "National Market",
-    "Regional Hub",
-    "Local Market",
-    "Export Market",
-    "Wholesale Market"
-  ];
 
-  const getRandomPrice = (base: number) =>
+  const getRandomPrice = (base: number) => Number((base + Math.random() * 2).toFixed(2));
-    Number((base + Math.random() * 2).toFixed(2));
   const getRandomDemand = () => Math.floor(Math.random() * 100);
   const getRandomTrend = (): ITrend =>
     Math.random() > 0.5
@@ -172,21 +127,18 @@ const generateMarketData = (): IMarketData[] => {
         market,
         price: getRandomPrice(basePrice),
         demand: getRandomDemand(),
-        trend: getRandomTrend()
+        trend: getRandomTrend(),
       })),
       averagePrice: getRandomPrice(basePrice - 0.5),
       recommendedPrice: getRandomPrice(basePrice + 0.2),
       demandScore: getRandomDemand(),
-      opportunity: Math.random() > 0.7
+      opportunity: Math.random() > 0.7,
     };
   });
 };
 
 // Generate historical price data for a specific crop
-const generateHistoricalData = (
+const generateHistoricalData = (crop: string, days = 30): IHistoricalData[] => {
-  crop: string,
-  days = 30
-): IHistoricalData[] => {
   const basePrice =
     crop === "Corn"
       ? 4
@@ -216,7 +168,7 @@ const generateHistoricalData = (
     data.push({
       date: date.toISOString().split("T")[0],
       price: Number(currentPrice.toFixed(2)),
-      volume: Math.floor(Math.random() * 1000) + 200
+      volume: Math.floor(Math.random() * 1000) + 200,
     });
   }
 
@@ -224,16 +176,8 @@ const generateHistoricalData = (
 };
 
 // Generate market comparison data
-const generateMarketComparisonData = (
+const generateMarketComparisonData = (crop: string): IMarketComparison[] => {
-  crop: string
+  const markets = ["National Market", "Regional Hub", "Local Market", "Export Market", "Wholesale Market"];
-): IMarketComparison[] => {
-  const markets = [
-    "National Market",
-    "Regional Hub",
-    "Local Market",
-    "Export Market",
-    "Wholesale Market"
-  ];
   const basePrice =
     crop === "Corn"
       ? 4
@@ -254,26 +198,18 @@ const generateMarketComparisonData = (
   return markets.map((market) => ({
     name: market,
     price: Number((basePrice + (Math.random() - 0.5) * 2).toFixed(2)),
-    demand: Math.floor(Math.random() * 100)
+    demand: Math.floor(Math.random() * 100),
   }));
 };
 
 // Custom tooltip for the price chart
-const CustomTooltip = ({
+const CustomTooltip = ({ active, payload, label }: CustomTooltipProps) => {
-  active,
-  payload,
-  label
-}: CustomTooltipProps) => {
   if (active && payload && payload.length) {
     return (
       <Card className="bg-white dark:bg-gray-800 p-2 shadow-md border-none">
         <p className="text-sm font-medium">{label}</p>
         <p className="text-sm text-primary">Price: ${payload[0].value}</p>
-        {payload[1] && (
+        {payload[1] && <p className="text-sm text-gray-500">Volume: {payload[1].value} units</p>}
-          <p className="text-sm text-gray-500">
-            Volume: {payload[1].value} units
-          </p>
-        )}
       </Card>
     );
   }
@@ -285,9 +221,7 @@ const MarketOpportunity = ({ crop, data }: MarketOpportunityProps) => {
   const highestPrice = Math.max(...data.map((item) => item.price));
   const bestMarket = data.find((item) => item.price === highestPrice);
   const highestDemand = Math.max(...data.map((item) => item.demand));
-  const highDemandMarket = data.find(
+  const highDemandMarket = data.find((item) => item.demand === highestDemand);
-    (item) => item.demand === highestDemand
-  );
 
   return (
     <Card className="border-l-4 border-l-green-500">
@@ -296,28 +230,19 @@ const MarketOpportunity = ({ crop, data }: MarketOpportunityProps) => {
           <TrendingUp className="h-5 w-5 mr-2 text-green-500" />
           Sales Opportunity for {crop}
         </CardTitle>
-        <CardDescription>
+        <CardDescription>Based on current market conditions</CardDescription>
-          Based on current market conditions
-        </CardDescription>
       </CardHeader>
       <CardContent>
         <div className="space-y-4">
           <div>
-            <p className="text-sm font-medium mb-1">
+            <p className="text-sm font-medium mb-1">Best Price Opportunity</p>
-              Best Price Opportunity
-            </p>
             <div className="flex items-center justify-between">
               <div>
-                <p className="text-lg font-bold text-green-600">
+                <p className="text-lg font-bold text-green-600">${bestMarket?.price}</p>
-                  ${bestMarket?.price}
+                <p className="text-sm text-muted-foreground">{bestMarket?.name}</p>
-                </p>
-                <p className="text-sm text-muted-foreground">
-                  {bestMarket?.name}
-                </p>
               </div>
               <Badge className="bg-green-100 text-green-800 hover:bg-green-200">
-                {Math.round((bestMarket!.price / (highestPrice - 1)) * 100)}%
+                {Math.round((bestMarket!.price / (highestPrice - 1)) * 100)}% above average
-                above average
               </Badge>
             </div>
           </div>
@@ -325,22 +250,13 @@ const MarketOpportunity = ({ crop, data }: MarketOpportunityProps) => {
           <Separator />
 
           <div>
-            <p className="text-sm font-medium mb-1">
+            <p className="text-sm font-medium mb-1">Highest Demand</p>
-              Highest Demand
-            </p>
             <div className="flex items-center justify-between">
               <div>
-                <p className="text-lg font-bold">
+                <p className="text-lg font-bold">{highDemandMarket?.name}</p>
-                  {highDemandMarket?.name}
-                </p>
                 <div className="flex items-center">
-                  <Progress
+                  <Progress value={highDemandMarket?.demand} className="h-2 w-24 mr-2" />
-                    value={highDemandMarket?.demand}
+                  <span className="text-sm">{highDemandMarket?.demand}% demand</span>
-                    className="h-2 w-24 mr-2"
-                  />
-                  <span className="text-sm">
-                    {highDemandMarket?.demand}% demand
-                  </span>
                 </div>
               </div>
               <Button variant="outline" size="sm" className="gap-1">
@@ -351,12 +267,9 @@ const MarketOpportunity = ({ crop, data }: MarketOpportunityProps) => {
 
           <Alert className="bg-amber-50 border-amber-200">
             <AlertCircle className="h-4 w-4 text-amber-600" />
-            <AlertTitle className="text-amber-800">
+            <AlertTitle className="text-amber-800">Recommendation</AlertTitle>
-              Recommendation
-            </AlertTitle>
             <AlertDescription className="text-amber-700">
-              Consider selling your {crop} at {bestMarket?.name} within
+              Consider selling your {crop} at {bestMarket?.name} within the next 7 days to maximize profit.
-              the next 7 days to maximize profit.
             </AlertDescription>
           </Alert>
         </div>
@@ -374,17 +287,14 @@ export default function MarketplacePage() {
   const [isLoading, setIsLoading] = useState(true);
   const [marketData, setMarketData] = useState<IMarketData[]>([]);
   const [historicalData, setHistoricalData] = useState<IHistoricalData[]>([]);
-  const [marketComparison, setMarketComparison] =
+  const [marketComparison, setMarketComparison] = useState<IMarketComparison[]>([]);
-    useState<IMarketComparison[]>([]);
   const [lastUpdated, setLastUpdated] = useState<Date>(new Date());
 
   useEffect(() => {
     setIsLoading(true);
     const timer = setTimeout(() => {
       setMarketData(generateMarketData());
-      setHistoricalData(
+      setHistoricalData(generateHistoricalData(selectedCrop, Number.parseInt(timeRange)));
-        generateHistoricalData(selectedCrop, Number.parseInt(timeRange))
-      );
       setMarketComparison(generateMarketComparisonData(selectedCrop));
       setLastUpdated(new Date());
       setIsLoading(false);
@@ -397,9 +307,7 @@ export default function MarketplacePage() {
     setIsLoading(true);
     setTimeout(() => {
       setMarketData(generateMarketData());
-      setHistoricalData(
+      setHistoricalData(generateHistoricalData(selectedCrop, Number.parseInt(timeRange)));
-        generateHistoricalData(selectedCrop, Number.parseInt(timeRange))
-      );
       setMarketComparison(generateMarketComparisonData(selectedCrop));
       setLastUpdated(new Date());
       setIsLoading(false);
@@ -424,33 +332,18 @@ export default function MarketplacePage() {
     <div className="container mx-auto py-6 px-4 md:px-6">
       <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
         <div>
-          <h1 className="text-3xl font-bold tracking-tight">
+          <h1 className="text-3xl font-bold tracking-tight">Marketplace Information</h1>
-            Marketplace Information
-          </h1>
           <p className="text-muted-foreground mt-1">
-            Make informed decisions with real-time market data and price
+            Make informed decisions with real-time market data and price analytics
-            analytics
           </p>
         </div>
 
         <div className="flex items-center gap-2">
-          <Button
+          <Button variant="outline" size="sm" className="gap-1" onClick={handleRefresh} disabled={isLoading}>
-            variant="outline"
+            <RefreshCw className={`h-4 w-4 ${isLoading ? "animate-spin" : ""}`} />
-            size="sm"
-            className="gap-1"
-            onClick={handleRefresh}
-            disabled={isLoading}
-          >
-            <RefreshCw
-              className={`h-4 w-4 ${
-                isLoading ? "animate-spin" : ""
-              }`}
-            />
             {isLoading ? "Updating..." : "Refresh Data"}
           </Button>
-          <div className="text-xs text-muted-foreground">
+          <div className="text-xs text-muted-foreground">Last updated: {lastUpdated.toLocaleTimeString()}</div>
-            Last updated: {lastUpdated.toLocaleTimeString()}
-          </div>
         </div>
       </div>
 
@@ -460,9 +353,7 @@ export default function MarketplacePage() {
             <div className="flex flex-col md:flex-row justify-between md:items-center gap-4">
               <div>
                 <CardTitle>Price Analytics</CardTitle>
-                <CardDescription>
+                <CardDescription>Track price trends and market movements</CardDescription>
-                  Track price trends and market movements
-                </CardDescription>
               </div>
               <div className="flex flex-col sm:flex-row gap-2">
                 <Select value={selectedCrop} onValueChange={setSelectedCrop}>
@@ -500,9 +391,7 @@ export default function MarketplacePage() {
               <div className="w-full h-[300px] flex items-center justify-center">
                 <div className="text-center">
                   <RefreshCw className="h-8 w-8 animate-spin mx-auto text-primary/70" />
-                  <p className="mt-2 text-sm text-muted-foreground">
+                  <p className="mt-2 text-sm text-muted-foreground">Loading market data...</p>
-                    Loading market data...
-                  </p>
                 </div>
               </div>
             ) : (
@@ -528,21 +417,15 @@ export default function MarketplacePage() {
                           top: 5,
                           right: 30,
                           left: 20,
-                          bottom: 5
+                          bottom: 5,
-                        }}
+                        }}>
-                      >
+                        <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
-                        <CartesianGrid
-                          strokeDasharray="3 3"
-                          stroke="#e5e7eb"
-                        />
                         <XAxis
                           dataKey="date"
                           tick={{ fontSize: 12 }}
                           tickFormatter={(value) => {
                             const date = new Date(value);
-                            return `${date.getMonth() + 1}/${
+                            return `${date.getMonth() + 1}/${date.getDate()}`;
-                              date.getDate()
-                            }`;
                           }}
                         />
                         <YAxis
@@ -588,14 +471,9 @@ export default function MarketplacePage() {
                       <CardContent className="p-4">
                         <div className="flex justify-between items-center">
                           <div>
-                            <p className="text-sm font-medium text-muted-foreground">
+                            <p className="text-sm font-medium text-muted-foreground">Current Price</p>
-                              Current Price
-                            </p>
                             <p className="text-2xl font-bold text-green-700">
-                              $
+                              ${historicalData[historicalData.length - 1]?.price.toFixed(2)}
-                              {historicalData[
-                                historicalData.length - 1
-                              ]?.price.toFixed(2)}
                             </p>
                           </div>
                           <div className="h-10 w-10 rounded-full bg-green-100 flex items-center justify-center">
@@ -609,16 +487,11 @@ export default function MarketplacePage() {
                       <CardContent className="p-4">
                         <div className="flex justify-between items-center">
                           <div>
-                            <p className="text-sm font-medium text-muted-foreground">
+                            <p className="text-sm font-medium text-muted-foreground">30-Day Average</p>
-                              30-Day Average
-                            </p>
                             <p className="text-2xl font-bold">
                               $
                               {(
-                                historicalData.reduce(
+                                historicalData.reduce((sum, item) => sum + item.price, 0) / historicalData.length
-                                  (sum, item) => sum + item.price,
-                                  0
-                                ) / historicalData.length
                               ).toFixed(2)}
                             </p>
                           </div>
@@ -633,21 +506,12 @@ export default function MarketplacePage() {
                       <CardContent className="p-4">
                         <div className="flex justify-between items-center">
                           <div>
-                            <p className="text-sm font-medium text-muted-foreground">
+                            <p className="text-sm font-medium text-muted-foreground">Recommended Price</p>
-                              Recommended Price
-                            </p>
                             <p className="text-2xl font-bold text-amber-600">
-                              $
+                              ${(historicalData[historicalData.length - 1]?.price * 1.05).toFixed(2)}
-                              {(
-                                historicalData[historicalData.length - 1]
-                                  ?.price * 1.05
-                              ).toFixed(2)}
                             </p>
                           </div>
-                          <Badge
+                          <Badge variant="outline" className="bg-amber-50 text-amber-700 border-amber-200">
-                            variant="outline"
-                            className="bg-amber-50 text-amber-700 border-amber-200"
-                          >
                             +5% margin
                           </Badge>
                         </div>
@@ -665,36 +529,19 @@ export default function MarketplacePage() {
                           top: 5,
                           right: 30,
                           left: 20,
-                          bottom: 5
+                          bottom: 5,
-                        }}
+                        }}>
-                      >
+                        <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
-                        <CartesianGrid
-                          strokeDasharray="3 3"
-                          stroke="#e5e7eb"
-                        />
                         <XAxis dataKey="name" tick={{ fontSize: 12 }} />
-                        <YAxis
+                        <YAxis tick={{ fontSize: 12 }} tickFormatter={(value) => `$${value}`} />
-                          tick={{ fontSize: 12 }}
-                          tickFormatter={(value) => `$${value}`}
-                        />
                         <Tooltip />
                         <Legend />
-                        <Bar
+                        <Bar dataKey="price" name="Price per unit" fill="#16a34a" radius={[4, 4, 0, 0]}>
-                          dataKey="price"
-                          name="Price per unit"
-                          fill="#16a34a"
-                          radius={[4, 4, 0, 0]}
-                        >
                           {marketComparison.map((entry, index) => (
                             <Cell
                               key={`cell-${index}`}
                               fill={
-                                entry.price ===
+                                entry.price === Math.max(...marketComparison.map((item) => item.price))
-                                Math.max(
-                                  ...marketComparison.map(
-                                    (item) => item.price
-                                  )
-                                )
                                   ? "#15803d"
                                   : "#16a34a"
                               }
@@ -708,8 +555,7 @@ export default function MarketplacePage() {
                   <div className="mt-4">
                     <Table>
                       <TableCaption>
-                        Market comparison for {selectedCrop} as of{" "}
+                        Market comparison for {selectedCrop} as of {new Date().toLocaleDateString()}
-                        {new Date().toLocaleDateString()}
                       </TableCaption>
                       <TableHeader>
                         <TableRow>
@@ -717,54 +563,30 @@ export default function MarketplacePage() {
                           <TableHead>Price</TableHead>
                           <TableHead>Demand</TableHead>
                           <TableHead>Price Difference</TableHead>
-                          <TableHead className="text-right">
+                          <TableHead className="text-right">Action</TableHead>
-                            Action
-                          </TableHead>
                         </TableRow>
                       </TableHeader>
                       <TableBody>
                         {marketComparison.map((market) => {
                           const avgPrice =
-                            marketComparison.reduce(
+                            marketComparison.reduce((sum, m) => sum + m.price, 0) / marketComparison.length;
-                              (sum, m) => sum + m.price,
+                          const priceDiff = (((market.price - avgPrice) / avgPrice) * 100).toFixed(1);
-                              0
-                            ) / marketComparison.length;
-                          const priceDiff = (
-                            ((market.price - avgPrice) / avgPrice) *
-                            100
-                          ).toFixed(1);
                           const isPriceHigh = Number.parseFloat(priceDiff) > 0;
 
                           return (
                             <TableRow
                               key={market.name}
                               className="cursor-pointer hover:bg-muted/50"
-                              onClick={() =>
+                              onClick={() => setSelectedCrop(market.name)}>
-                                setSelectedCrop(market.name)
+                              <TableCell className="font-medium">{market.name}</TableCell>
-                              }
+                              <TableCell>${market.price.toFixed(2)}</TableCell>
-                            >
-                              <TableCell className="font-medium">
-                                {market.name}
-                              </TableCell>
-                              <TableCell>
-                                ${market.price.toFixed(2)}
-                              </TableCell>
                               <TableCell>
                                 <div className="flex items-center gap-2">
-                                  <Progress
+                                  <Progress value={market.demand} className="h-2 w-16" />
-                                    value={market.demand}
-                                    className="h-2 w-16"
-                                  />
                                   <span>{market.demand}%</span>
                                 </div>
                               </TableCell>
-                              <TableCell
+                              <TableCell className={isPriceHigh ? "text-green-600" : "text-red-600"}>
-                                className={
-                                  isPriceHigh
-                                    ? "text-green-600"
-                                    : "text-red-600"
-                                }
-                              >
                                 <div className="flex items-center gap-1">
                                   {isPriceHigh ? (
                                     <ArrowUpRight className="h-4 w-4" />
@@ -775,11 +597,7 @@ export default function MarketplacePage() {
                                 </div>
                               </TableCell>
                               <TableCell className="text-right">
-                                <Button
+                                <Button variant="ghost" size="sm" className="h-8 gap-1">
-                                  variant="ghost"
-                                  size="sm"
-                                  className="h-8 gap-1"
-                                >
                                   Details <ChevronRight className="h-4 w-4" />
                                 </Button>
                               </TableCell>
@@ -795,12 +613,8 @@ export default function MarketplacePage() {
                   <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                     <Card>
                       <CardHeader className="pb-2">
-                        <CardTitle className="text-lg">
+                        <CardTitle className="text-lg">Demand Forecast</CardTitle>
-                          Demand Forecast
+                        <CardDescription>Projected demand for {selectedCrop} over the next 30 days</CardDescription>
-                        </CardTitle>
-                        <CardDescription>
-                          Projected demand for {selectedCrop} over the next 30 days
-                        </CardDescription>
                       </CardHeader>
                       <CardContent>
                         <div className="space-y-4">
@@ -808,9 +622,7 @@ export default function MarketplacePage() {
                             <div key={market.name} className="space-y-1">
                               <div className="flex justify-between text-sm">
                                 <span>{market.name}</span>
-                                <span className="font-medium">
+                                <span className="font-medium">{market.demand}%</span>
-                                  {market.demand}%
-                                </span>
                               </div>
                               <Progress value={market.demand} className="h-2" />
                             </div>
@@ -831,9 +643,7 @@ export default function MarketplacePage() {
           <Card>
             <CardHeader className="pb-2">
               <CardTitle className="text-lg">Market Summary</CardTitle>
-              <CardDescription>
+              <CardDescription>Today&apos;s market overview</CardDescription>
-                Today&apos;s market overview
-              </CardDescription>
             </CardHeader>
             <CardContent>
               {isLoading ? (
@@ -846,10 +656,7 @@ export default function MarketplacePage() {
                 <ScrollArea className="h-[220px] pr-4">
                   <div className="space-y-4">
                     {marketData.slice(0, 5).map((crop) => (
-                      <div
+                      <div key={crop.id} className="flex items-center justify-between">
-                        key={crop.id}
-                        className="flex items-center justify-between"
-                      >
                         <div>
                           <p className="font-medium">{crop.name}</p>
                           <div className="flex items-center text-sm text-muted-foreground">
@@ -867,12 +674,7 @@ export default function MarketplacePage() {
                             )}
                           </div>
                         </div>
-                        <Button
+                        <Button variant="ghost" size="sm" className="h-8" onClick={() => setSelectedCrop(crop.name)}>
-                          variant="ghost"
-                          size="sm"
-                          className="h-8"
-                          onClick={() => setSelectedCrop(crop.name)}
-                        >
                           View
                         </Button>
                       </div>
@@ -886,9 +688,7 @@ export default function MarketplacePage() {
           <Card>
             <CardHeader className="pb-2">
               <CardTitle className="text-lg">Top Opportunities</CardTitle>
-              <CardDescription>
+              <CardDescription>Best selling opportunities today</CardDescription>
-                Best selling opportunities today
-              </CardDescription>
             </CardHeader>
             <CardContent>
               {isLoading ? (
@@ -904,40 +704,30 @@ export default function MarketplacePage() {
                     .slice(0, 3)
                     .map((crop) => {
                       const bestMarket = crop.marketPrices.reduce(
-                        (best, current) =>
+                        (best, current) => (current.price > best.price ? current : best),
-                          current.price > best.price ? current : best,
                         crop.marketPrices[0]
                       );
                       return (
-                        <div
+                        <div key={crop.id} className="border rounded-lg p-3 bg-green-50/50 dark:bg-green-950/10">
-                          key={crop.id}
-                          className="border rounded-lg p-3 bg-green-50/50 dark:bg-green-950/10"
-                        >
                           <div className="flex justify-between items-start">
                             <div>
                               <p className="font-medium">{crop.name}</p>
                               <p className="text-sm text-muted-foreground">
-                                {bestMarket.market} - $
+                                {bestMarket.market} - ${bestMarket.price.toFixed(2)}
-                                {bestMarket.price.toFixed(2)}
                               </p>
                             </div>
-                            <Badge className="bg-green-100 text-green-800 hover:bg-green-200">
+                            <Badge className="bg-green-100 text-green-800 hover:bg-green-200">High Demand</Badge>
-                              High Demand
-                            </Badge>
                           </div>
                           <div className="mt-2 flex justify-between items-center">
                             <div className="flex items-center gap-1">
                               <TrendingUp className="h-4 w-4 text-green-600" />
-                              <span className="text-sm text-green-600">
+                              <span className="text-sm text-green-600">Recommended</span>
-                                Recommended
-                              </span>
                             </div>
                             <Button
                               variant="outline"
                               size="sm"
                               className="h-7 text-xs"
-                              onClick={() => setSelectedCrop(crop.name)}
+                              onClick={() => setSelectedCrop(crop.name)}>
-                            >
                               View Details
                             </Button>
                           </div>
@@ -954,9 +744,7 @@ export default function MarketplacePage() {
       <Card>
         <CardHeader>
           <CardTitle>Market Price Table</CardTitle>
-          <CardDescription>
+          <CardDescription>Comprehensive price data across all markets and crops</CardDescription>
-            Comprehensive price data across all markets and crops
-          </CardDescription>
         </CardHeader>
         <CardContent>
           {isLoading ? (
@@ -973,9 +761,7 @@ export default function MarketplacePage() {
                   <TableRow>
                     <TableHead>Crop</TableHead>
                     {marketData[0]?.marketPrices.map((market) => (
-                      <TableHead key={market.market}>
+                      <TableHead key={market.market}>{market.market}</TableHead>
-                        {market.market}
-                      </TableHead>
                     ))}
                     <TableHead>Average</TableHead>
                     <TableHead>Recommended</TableHead>
@@ -986,27 +772,18 @@ export default function MarketplacePage() {
                     <TableRow
                       key={crop.id}
                       className="cursor-pointer hover:bg-muted/50"
-                      onClick={() => setSelectedCrop(crop.name)}
+                      onClick={() => setSelectedCrop(crop.name)}>
-                    >
+                      <TableCell className="font-medium">{crop.name}</TableCell>
-                      <TableCell className="font-medium">
-                        {crop.name}
-                      </TableCell>
                       {crop.marketPrices.map((market) => (
                         <TableCell key={market.market}>
                           <div className="flex items-center gap-1">
                             <span>${market.price.toFixed(2)}</span>
-                            <span className={getTrendColor(market.trend)}>
+                            <span className={getTrendColor(market.trend)}>{getTrendIcon(market.trend)}</span>
-                              {getTrendIcon(market.trend)}
-                            </span>
                           </div>
                         </TableCell>
                       ))}
-                      <TableCell>
+                      <TableCell>${crop.averagePrice.toFixed(2)}</TableCell>
-                        ${crop.averagePrice.toFixed(2)}
+                      <TableCell className="font-medium text-amber-600">${crop.recommendedPrice.toFixed(2)}</TableCell>
-                      </TableCell>
-                      <TableCell className="font-medium text-amber-600">
-                        ${crop.recommendedPrice.toFixed(2)}
-                      </TableCell>
                     </TableRow>
                   ))}
                 </TableBody>

frontend/lib/marketData.ts

@@ -0,0 +1,142 @@
+export interface ITrend {
+  direction: "up" | "down";
+  value: string;
+}
+
+export interface IMarketPrice {
+  market: string;
+  price: number;
+  demand: number;
+  trend: ITrend;
+}
+
+export interface IMarketData {
+  id: string;
+  name: string;
+  marketPrices: IMarketPrice[];
+  averagePrice: number;
+  recommendedPrice: number;
+  demandScore: number;
+  opportunity: boolean;
+}
+
+export interface IHistoricalData {
+  date: string;
+  price: number;
+  volume: number;
+}
+
+export interface IMarketComparison {
+  name: string;
+  price: number;
+  demand: number;
+}
+
+export const generateMarketData = (): IMarketData[] => {
+  const crops = ["Corn", "Wheat", "Soybeans", "Rice", "Potatoes", "Tomatoes", "Apples", "Oranges"];
+  const markets = ["National Market", "Regional Hub", "Local Market", "Export Market", "Wholesale Market"];
+
+  const getRandomPrice = (base: number) => Number((base + Math.random() * 2).toFixed(2));
+  const getRandomDemand = () => Math.floor(Math.random() * 100);
+  const getRandomTrend = (): ITrend =>
+    Math.random() > 0.5
+      ? { direction: "up", value: (Math.random() * 5).toFixed(1) }
+      : { direction: "down", value: (Math.random() * 5).toFixed(1) };
+
+  return crops.map((crop) => {
+    const basePrice =
+      crop === "Corn"
+        ? 4
+        : crop === "Wheat"
+        ? 6
+        : crop === "Soybeans"
+        ? 10
+        : crop === "Rice"
+        ? 12
+        : crop === "Potatoes"
+        ? 3
+        : crop === "Tomatoes"
+        ? 2
+        : crop === "Apples"
+        ? 1.5
+        : 8;
+
+    return {
+      id: crypto.randomUUID(),
+      name: crop,
+      marketPrices: markets.map((market) => ({
+        market,
+        price: getRandomPrice(basePrice),
+        demand: getRandomDemand(),
+        trend: getRandomTrend(),
+      })),
+      averagePrice: getRandomPrice(basePrice - 0.5),
+      recommendedPrice: getRandomPrice(basePrice + 0.2),
+      demandScore: getRandomDemand(),
+      opportunity: Math.random() > 0.7,
+    };
+  });
+};
+
+export const generateHistoricalData = (crop: string, days = 30): IHistoricalData[] => {
+  const basePrice =
+    crop === "Corn"
+      ? 4
+      : crop === "Wheat"
+      ? 6
+      : crop === "Soybeans"
+      ? 10
+      : crop === "Rice"
+      ? 12
+      : crop === "Potatoes"
+      ? 3
+      : crop === "Tomatoes"
+      ? 2
+      : crop === "Apples"
+      ? 1.5
+      : 8;
+
+  const data: IHistoricalData[] = [];
+  let currentPrice = basePrice;
+
+  for (let i = days; i >= 0; i--) {
+    const date = new Date();
+    date.setDate(date.getDate() - i);
+    const change = (Math.random() - 0.5) * 0.4;
+    currentPrice = Math.max(0.5, currentPrice + change);
+
+    data.push({
+      date: date.toISOString().split("T")[0],
+      price: Number(currentPrice.toFixed(2)),
+      volume: Math.floor(Math.random() * 1000) + 200,
+    });
+  }
+
+  return data;
+};
+
+export const generateMarketComparisonData = (crop: string): IMarketComparison[] => {
+  const markets = ["National Market", "Regional Hub", "Local Market", "Export Market", "Wholesale Market"];
+  const basePrice =
+    crop === "Corn"
+      ? 4
+      : crop === "Wheat"
+      ? 6
+      : crop === "Soybeans"
+      ? 10
+      : crop === "Rice"
+      ? 12
+      : crop === "Potatoes"
+      ? 3
+      : crop === "Tomatoes"
+      ? 2
+      : crop === "Apples"
+      ? 1.5
+      : 8;
+
+  return markets.map((market) => ({
+    name: market,
+    price: Number((basePrice + (Math.random() - 0.5) * 2).toFixed(2)),
+    demand: Math.floor(Math.random() * 100),
+  }));
+};