Merge branch 'feature-farm-setup' of https://github.com/ForFarmTeam/ForFarm into feature-farm-setup

frontend/app/(sidebar)/layout.tsx

@@ -7,6 +7,7 @@ import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/s
 import DynamicBreadcrumb from "./dynamic-breadcrumb";
 import { extractRoute } from "@/lib/utils";
 import { usePathname } from "next/navigation";
+import { Toaster } from "@/components/ui/sonner";
 
 export default function AppLayout({
   children,
@@ -29,6 +30,7 @@ export default function AppLayout({
           </div>
         </header>
         {children}
+        <Toaster />
       </SidebarInset>
     </SidebarProvider>
   );

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>
@@ -1017,4 +794,4 @@ export default function MarketplacePage() {
       </Card>
     </div>
   );
-}
+}

frontend/app/(sidebar)/setup/harvest-detail-form.tsx

@@ -20,17 +20,37 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { Button } from "@/components/ui/button";
 
 type harvestSchema = z.infer<typeof harvestDetailsFormSchema>;
 
-export default function HarvestDetailsForm() {
+export default function HarvestDetailsForm({
+  onChange,
+}: {
+  onChange: (data: harvestSchema) => void;
+}) {
   const form = useForm<harvestSchema>({
     resolver: zodResolver(harvestDetailsFormSchema),
-    defaultValues: {},
+    defaultValues: {
+      daysToFlower: 0,
+      daysToMaturity: 0,
+      harvestWindow: 0,
+      estimatedLossRate: 0,
+      harvestUnits: "",
+      estimatedRevenue: 0,
+      expectedYieldPer100ft: 0,
+      expectedYieldPerAcre: 0,
+    },
   });
+  const onSubmit: (data: harvestSchema) => void = (data) => {
+    onChange(data);
+  };
   return (
     <Form {...form}>
-      <form className="grid grid-cols-3 gap-5">
+      <form
+        className="grid grid-cols-3 gap-5"
+        onSubmit={form.handleSubmit(onSubmit)}
+      >
         <FormField
           control={form.control}
           name="daysToFlower"
@@ -47,6 +67,13 @@ export default function HarvestDetailsForm() {
                       id="daysToFlower"
                       className="w-96"
                       {...field}
+                      onChange={(e) => {
+                        // convert to number
+                        const value = e.target.value
+                          ? parseInt(e.target.value, 10)
+                          : "";
+                        field.onChange(value);
+                      }}
                     />
                   </div>
                 </div>
@@ -71,6 +98,13 @@ export default function HarvestDetailsForm() {
                       id="daysToMaturity"
                       className="w-96"
                       {...field}
+                      onChange={(e) => {
+                        // convert to number
+                        const value = e.target.value
+                          ? parseInt(e.target.value, 10)
+                          : "";
+                        field.onChange(value);
+                      }}
                     />
                   </div>
                 </div>
@@ -95,6 +129,13 @@ export default function HarvestDetailsForm() {
                       id="harvestWindow"
                       className="w-96"
                       {...field}
+                      onChange={(e) => {
+                        // convert to number
+                        const value = e.target.value
+                          ? parseInt(e.target.value, 10)
+                          : "";
+                        field.onChange(value);
+                      }}
                     />
                   </div>
                 </div>
@@ -119,6 +160,13 @@ export default function HarvestDetailsForm() {
                       id="estimatedLossRate"
                       className="w-96"
                       {...field}
+                      onChange={(e) => {
+                        // convert to number
+                        const value = e.target.value
+                          ? parseInt(e.target.value, 10)
+                          : "";
+                        field.onChange(value);
+                      }}
                     />
                   </div>
                 </div>
@@ -168,6 +216,13 @@ export default function HarvestDetailsForm() {
                       id="estimatedRevenue"
                       className="w-96"
                       {...field}
+                      onChange={(e) => {
+                        // convert to number
+                        const value = e.target.value
+                          ? parseInt(e.target.value, 10)
+                          : "";
+                        field.onChange(value);
+                      }}
                     />
                   </div>
                 </div>
@@ -192,6 +247,13 @@ export default function HarvestDetailsForm() {
                       id="expectedYieldPer100ft"
                       className="w-96"
                       {...field}
+                      onChange={(e) => {
+                        // convert to number
+                        const value = e.target.value
+                          ? parseInt(e.target.value, 10)
+                          : "";
+                        field.onChange(value);
+                      }}
                     />
                   </div>
                 </div>
@@ -216,6 +278,13 @@ export default function HarvestDetailsForm() {
                       id="expectedYieldPerAcre"
                       className="w-96"
                       {...field}
+                      onChange={(e) => {
+                        // convert to number
+                        const value = e.target.value
+                          ? parseInt(e.target.value, 10)
+                          : "";
+                        field.onChange(value);
+                      }}
                     />
                   </div>
                 </div>
@@ -224,6 +293,14 @@ export default function HarvestDetailsForm() {
             </FormItem>
           )}
         />
+        <div className="col-span-3 flex justify-center">
+          <Button
+            type="submit"
+            className="bg-blue-500 hover:bg-blue-600 duration-100"
+          >
+            Save
+          </Button>
+        </div>
       </form>
     </Form>
   );

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

@@ -1,33 +1,140 @@
+"use client";
+import { useState } from "react";
 import PlantingDetailsForm from "./planting-detail-form";
 import HarvestDetailsForm from "./harvest-detail-form";
-import { Separator } from "@/components/ui/separator";
 import GoogleMapWithDrawing from "@/components/google-map-with-drawing";
+import { Separator } from "@/components/ui/separator";
+import {
+  plantingDetailsFormSchema,
+  harvestDetailsFormSchema,
+} from "@/schemas/application.schema";
+import { z } from "zod";
+import { Button } from "@/components/ui/button";
+import { toast } from "sonner";
+
+
+type PlantingSchema = z.infer<typeof plantingDetailsFormSchema>;
+type HarvestSchema = z.infer<typeof harvestDetailsFormSchema>;
+
+const steps = [
+  { title: "Step 1", description: "Planting Details" },
+  { title: "Step 2", description: "Harvest Details" },
+  { title: "Step 3", description: "Select Map Area" },
+];
 
 export default function SetupPage() {
+  const [step, setStep] = useState(1);
+  const [plantingDetails, setPlantingDetails] = useState<PlantingSchema | null>(
+    null
+  );
+  const [harvestDetails, setHarvestDetails] = useState<HarvestSchema | null>(
+    null
+  );
+  const [mapData, setMapData] = useState<{ lat: number; lng: number }[] | null>(
+    null
+  );
+
+  const handleNext = () => {
+    if (step === 1 && !plantingDetails) {
+          toast.warning(
+            "Please complete the Planting Details before proceeding.",
+            {
+              action: {
+                label: "Close",
+                onClick: () => toast.dismiss(),
+              },
+            }
+          );
+      return;
+    }
+    if (step === 2 && !harvestDetails) {
+          toast.warning(
+            "Please complete the Harvest Details before proceeding.",
+            {
+              action: {
+                label: "Close",
+                onClick: () => toast.dismiss(),
+              },
+            }
+          );
+      return;
+    }
+    setStep((prev) => prev + 1);
+  };
+
+  const handleBack = () => {
+    setStep((prev) => prev - 1);
+  };
+
+  const handleSubmit = () => {
+    if (!mapData) {
+          toast.warning("Please select an area on the map before submitting.", {
+            action: {
+              label: "Close",
+              onClick: () => toast.dismiss(),
+            },
+          });
+      return;
+    }
+
+    console.log("Submitting:", { plantingDetails, harvestDetails, mapData });
+
+    // send request to the server
+
+  };
+
   return (
     <div className="p-5">
-      <div className=" flex justify-center">
+      {/* Stepper Navigation */}
-        <h1 className="flex text-2xl ">Plating Details</h1>
+      <div className="flex justify-between items-center mb-5">
+        {steps.map((item, index) => (
+          <div key={index} className="flex flex-col items-center">
+            <div
+              className={`w-10 h-10 flex items-center justify-center rounded-full text-white font-bold ${
+                step === index + 1 ? "bg-blue-500" : "bg-gray-500"
+              }`}
+            >
+              {index + 1}
+            </div>
+            <span className="font-medium mt-2">{item.title}</span>
+            <span className="text-gray-500 text-sm">{item.description}</span>
+          </div>
+        ))}
       </div>
-      <Separator className="mt-3" />
+
-      <div className="mt-10 flex justify-center">
+      <Separator className="mb-5" />
-        <PlantingDetailsForm />
+
-      </div>
+      {step === 1 && (
-      <div className=" flex justify-center mt-20">
+        <>
-        <h1 className="flex text-2xl ">Harvest Details</h1>
+          <h2 className="text-xl text-center mb-5">Planting Details</h2>
-      </div>
+          <PlantingDetailsForm onChange={setPlantingDetails} />
-      <Separator className="mt-3" />
+        </>
-      <div className="mt-10 flex justify-center">
+      )}
-        <HarvestDetailsForm />
+
-      </div>
+      {step === 2 && (
-      <div className="mt-10">
+        <>
-        <div className=" flex justify-center mt-20">
+          <h2 className="text-xl text-center mb-5">Harvest Details</h2>
-          <h1 className="flex text-2xl ">Map</h1>
+          <HarvestDetailsForm onChange={setHarvestDetails} />
-        </div>
+        </>
-        <Separator className="mt-3" />
+      )}
-        <div className="mt-10">
+
-          <GoogleMapWithDrawing />
+      {step === 3 && (
-        </div>
+        <>
+          <h2 className="text-xl text-center mb-5">Select Area on Map</h2>
+          <GoogleMapWithDrawing onAreaSelected={setMapData} />
+        </>
+      )}
+
+      <div className="mt-10 flex justify-between">
+        <Button onClick={handleBack} disabled={step === 1}>
+          Back
+        </Button>
+
+        {step < 3 ? (
+          <Button onClick={handleNext}>Next</Button>
+        ) : (
+          <Button onClick={handleSubmit}>Submit</Button>
+        )}
       </div>
     </div>
   );

frontend/app/(sidebar)/setup/planting-detail-form.tsx

@@ -22,17 +22,45 @@ import {
 } from "@/components/ui/select";
 import { Textarea } from "@/components/ui/textarea";
 import { Switch } from "@/components/ui/switch";
+import { Button } from "@/components/ui/button";
+import { useRef } from "react";
 
 type plantingSchema = z.infer<typeof plantingDetailsFormSchema>;
 
-export default function PlantingDetailsForm() {
+export default function PlantingDetailsForm({
-  const form = useForm<plantingSchema>({
+  onChange,
+}: {
+  onChange: (data: plantingSchema) => void; 
+}) {
+  const formRef = useRef<HTMLFormElement>(null);
+  const form = useForm({
     resolver: zodResolver(plantingDetailsFormSchema),
-    defaultValues: {},
+    defaultValues: {
+      daysToEmerge: 0,
+      plantSpacing: 0,
+      rowSpacing: 0,
+      plantingDepth: 0,
+      averageHeight: 0,
+      startMethod: "",
+      lightProfile: "",
+      soilConditions: "",
+      plantingDetails: "",
+      pruningDetails: "",
+      isPerennial: false,
+      autoCreateTasks: false,
+    },
   });
+
+  const onSubmit = (data: plantingSchema) => {
+    onChange(data);
+  };
   return (
     <Form {...form}>
-      <form className="grid grid-cols-3 gap-5">
+      <form
+        className="grid grid-cols-3 gap-5"
+        onSubmit={form.handleSubmit(onSubmit)}
+        ref={formRef}
+      >
         <FormField
           control={form.control}
           name="daysToEmerge"
@@ -47,6 +75,13 @@ export default function PlantingDetailsForm() {
                       id="daysToEmerge"
                       className="w-96"
                       {...field}
+                      onChange={(e) => {
+                        // convert to number
+                        const value = e.target.value
+                          ? parseInt(e.target.value, 10)
+                          : "";
+                        field.onChange(value);
+                      }}
                     />
                   </div>
                 </div>
@@ -69,6 +104,13 @@ export default function PlantingDetailsForm() {
                       id="plantSpacing"
                       className="w-96"
                       {...field}
+                      onChange={(e) => {
+                        // convert to number
+                        const value = e.target.value
+                          ? parseInt(e.target.value, 10)
+                          : "";
+                        field.onChange(value);
+                      }}
                     />
                   </div>
                 </div>
@@ -91,6 +133,13 @@ export default function PlantingDetailsForm() {
                       id="rowSpacing"
                       className="w-96"
                       {...field}
+                      onChange={(e) => {
+                        // convert to number
+                        const value = e.target.value
+                          ? parseInt(e.target.value, 10)
+                          : "";
+                        field.onChange(value);
+                      }}
                     />
                   </div>
                 </div>
@@ -115,6 +164,13 @@ export default function PlantingDetailsForm() {
                       id="plantingDepth"
                       className="w-96"
                       {...field}
+                      onChange={(e) => {
+                        // convert to number
+                        const value = e.target.value
+                          ? parseInt(e.target.value, 10)
+                          : "";
+                        field.onChange(value);
+                      }}
                     />
                   </div>
                 </div>
@@ -139,6 +195,13 @@ export default function PlantingDetailsForm() {
                       id="averageHeight"
                       className="w-96"
                       {...field}
+                      onChange={(e) => {
+                        // convert to number
+                        const value = e.target.value
+                          ? parseInt(e.target.value, 10)
+                          : "";
+                        field.onChange(value);
+                      }}
                     />
                   </div>
                 </div>
@@ -187,9 +250,9 @@ export default function PlantingDetailsForm() {
                     <SelectValue placeholder="Select light profile" />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="xp">Seed</SelectItem>
+                    <SelectItem value="Seed">Seed</SelectItem>
-                    <SelectItem value="xa">Transplant</SelectItem>
+                    <SelectItem value="Transplant">Transplant</SelectItem>
-                    <SelectItem value="xz">Cutting</SelectItem>
+                    <SelectItem value="Cutting">Cutting</SelectItem>
                   </SelectContent>
                 </Select>
               </FormControl>
@@ -214,9 +277,9 @@ export default function PlantingDetailsForm() {
                     <SelectValue placeholder="Select a soil condition" />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="xp">Seed</SelectItem>
+                    <SelectItem value="Seed">Seed</SelectItem>
-                    <SelectItem value="xa">Transplant</SelectItem>
+                    <SelectItem value="Transplant">Transplant</SelectItem>
-                    <SelectItem value="xz">Cutting</SelectItem>
+                    <SelectItem value="Cutting">Cutting</SelectItem>
                   </SelectContent>
                 </Select>
               </FormControl>
@@ -289,7 +352,7 @@ export default function PlantingDetailsForm() {
         />
         <FormField
           control={form.control}
-          name="isPerennial"
+          name="autoCreateTasks"
           render={({ field }: { field: any }) => (
             <FormItem>
               <FormControl>
@@ -308,6 +371,11 @@ export default function PlantingDetailsForm() {
             </FormItem>
           )}
         />
+        <div className="col-span-3 flex justify-center">
+          <Button type="submit" className="bg-blue-500 hover:bg-blue-600 duration-100">
+            Save
+          </Button>
+        </div>
       </form>
     </Form>
   );

frontend/components/google-map-with-drawing.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { GoogleMap, LoadScript, DrawingManager } from "@react-google-maps/api";
 import { useState, useCallback } from "react";
 
@@ -10,17 +8,45 @@ const containerStyle = {
 
 const center = { lat: 13.7563, lng: 100.5018 }; // Example: Bangkok, Thailand
 
-const GoogleMapWithDrawing = () => {
+interface GoogleMapWithDrawingProps {
+  onAreaSelected: (data: { lat: number; lng: number }[]) => void;
+}
+
+const GoogleMapWithDrawing = ({
+  onAreaSelected,
+}: GoogleMapWithDrawingProps) => {
   const [map, setMap] = useState<google.maps.Map | null>(null);
 
-  // Handles drawing complete
+  const onDrawingComplete = useCallback(
-  const onDrawingComplete = useCallback((overlay: google.maps.drawing.OverlayCompleteEvent) => {
+    (overlay: google.maps.drawing.OverlayCompleteEvent) => {
-    console.log("Drawing complete:", overlay);
+      const shape = overlay.overlay;
-  }, []);
+
+      if (shape instanceof google.maps.Polyline) {
+        const path = shape.getPath();
+        const coordinates = path.getArray().map((latLng) => ({
+          lat: latLng.lat(),
+          lng: latLng.lng(),
+        }));
+        // console.log("Polyline coordinates:", coordinates);
+        onAreaSelected(coordinates);
+      } else {
+        console.log("Unknown shape detected:", shape);
+      }
+    },
+    [onAreaSelected]
+  );
 
   return (
-    <LoadScript googleMapsApiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY!} libraries={["drawing"]}>
+    <LoadScript
-      <GoogleMap mapContainerStyle={containerStyle} center={center} zoom={10} onLoad={(map) => setMap(map)}>
+      googleMapsApiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY!}
+      libraries={["drawing"]}
+    >
+      <GoogleMap
+        mapContainerStyle={containerStyle}
+        center={center}
+        zoom={10}
+        onLoad={(map) => setMap(map)}
+      >
         {map && (
           <DrawingManager
             onOverlayComplete={onDrawingComplete}
@@ -29,9 +55,6 @@ const GoogleMapWithDrawing = () => {
               drawingControlOptions: {
                 position: google.maps.ControlPosition.TOP_CENTER,
                 drawingModes: [
-                  google.maps.drawing.OverlayType.POLYGON,
-                  google.maps.drawing.OverlayType.RECTANGLE,
-                  google.maps.drawing.OverlayType.CIRCLE,
                   google.maps.drawing.OverlayType.POLYLINE,
                 ],
               },

frontend/components/ui/sonner.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner } from "sonner"
+
+type ToasterProps = React.ComponentProps<typeof Sonner>
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

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),
+  }));
+};

frontend/package.json

@@ -40,12 +40,13 @@
     "lucide-react": "^0.475.0",
     "next": "15.1.0",
     "next-auth": "^4.24.11",
-    "next-themes": "^0.4.4",
+    "next-themes": "^0.4.6",
     "react": "^19.0.0",
     "react-day-picker": "8.10.1",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.54.2",
     "recharts": "^2.15.1",
+    "sonner": "^2.0.1",
     "tailwind-merge": "^3.0.1",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.24.2"