feat: add farm and corp setup template

frontend/app/(sidebar)/farms/[farmId]/add-crop-form.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { Crop } from "@/types";
+import { cropFormSchema } from "@/schemas/form.schema";
+
+interface AddCropFormProps {
+  onSubmit: (data: Partial<Crop>) => Promise<void>;
+  onCancel: () => void;
+}
+
+export function AddCropForm({ onSubmit, onCancel }: AddCropFormProps) {
+  const form = useForm<z.infer<typeof cropFormSchema>>({
+    resolver: zodResolver(cropFormSchema),
+    defaultValues: {
+      name: "",
+      plantedDate: "",
+      status: "planned",
+    },
+  });
+
+  const handleSubmit = (values: z.infer<typeof cropFormSchema>) => {
+    onSubmit({
+      ...values,
+      plantedDate: new Date(values.plantedDate),
+    });
+  };
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-6">
+        <FormField
+          control={form.control}
+          name="name"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Crop Name</FormLabel>
+              <FormControl>
+                <Input placeholder="Enter crop name" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="plantedDate"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Planted Date</FormLabel>
+              <FormControl>
+                <Input type="date" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="status"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Status</FormLabel>
+              <Select onValueChange={field.onChange} defaultValue={field.value}>
+                <FormControl>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select crop status" />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  <SelectItem value="planned">Planned</SelectItem>
+                  <SelectItem value="growing">Growing</SelectItem>
+                  <SelectItem value="harvested">Harvested</SelectItem>
+                </SelectContent>
+              </Select>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <div className="flex justify-end gap-2">
+          <Button type="button" variant="outline" onClick={onCancel}>
+            Cancel
+          </Button>
+          <Button type="submit">Add Crop</Button>
+        </div>
+      </form>
+    </Form>
+  );
+}

frontend/app/(sidebar)/farms/[farmId]/crop-card.tsx

@@ -0,0 +1,37 @@
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Sprout, Calendar } from "lucide-react";
+import { Crop } from "@/types";
+
+interface CropCardProps {
+  crop: Crop;
+}
+
+export function CropCard({ crop }: CropCardProps) {
+  const statusColors = {
+    growing: "text-green-500",
+    harvested: "text-yellow-500",
+    planned: "text-blue-500",
+  };
+
+  return (
+    <Card className="w-full bg-muted/50 hover:bg-muted/80 transition-all cursor-pointer group hover:shadow-lg">
+      <CardHeader className="p-4 pb-2">
+        <div className="flex items-center justify-between">
+          <div className="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center">
+            <Sprout className="h-4 w-4 text-primary" />
+          </div>
+          <span className={`text-sm font-medium capitalize ${statusColors[crop.status]}`}>{crop.status}</span>
+        </div>
+      </CardHeader>
+      <CardContent className="p-4">
+        <div className="space-y-2">
+          <h3 className="text-lg font-medium truncate">{crop.name}</h3>
+          <div className="flex items-center gap-1 text-sm text-muted-foreground">
+            <Calendar className="h-3 w-3" />
+            <p>Planted: {crop.plantedDate.toLocaleDateString()}</p>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

frontend/app/(sidebar)/farms/[farmId]/page.tsx

@@ -0,0 +1,157 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { ArrowLeft, MapPin, Plus, Sprout } from "lucide-react";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
+import { AddCropForm } from "./add-crop-form";
+import { CropCard } from "./crop-card";
+import { Farm, Crop } from "@/types";
+import React from "react";
+
+const crops: Crop[] = [
+  {
+    id: "crop1",
+    farmId: "1",
+    name: "Monthong Durian",
+    plantedDate: new Date("2023-03-15"),
+    status: "growing",
+  },
+  {
+    id: "crop2",
+    farmId: "1",
+    name: "Chanee Durian",
+    plantedDate: new Date("2023-02-20"),
+    status: "planned",
+  },
+  {
+    id: "crop3",
+    farmId: "2",
+    name: "Kradum Durian",
+    plantedDate: new Date("2022-11-05"),
+    status: "harvested",
+  },
+];
+
+const farms: Farm[] = [
+  {
+    id: "1",
+    name: "Green Valley Farm",
+    location: "Bangkok",
+    type: "durian",
+    createdAt: new Date("2023-01-01"),
+  },
+  {
+    id: "2",
+    name: "Golden Farm",
+    location: "Chiang Mai",
+    type: "mango",
+    createdAt: new Date("2022-12-01"),
+  },
+];
+
+const getFarmById = (id: string): Farm | undefined => {
+  return farms.find((farm) => farm.id === id);
+};
+
+const getCropsByFarmId = (farmId: string): Crop[] => crops.filter((crop) => crop.farmId === farmId);
+
+export default function FarmDetailPage({ params }: { params: Promise<{ farmId: string }> }) {
+  const { farmId } = React.use(params);
+
+  const router = useRouter();
+  const [farm] = useState<Farm | undefined>(getFarmById(farmId));
+  const [crops, setCrops] = useState<Crop[]>(getCropsByFarmId(farmId));
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+
+  const handleAddCrop = async (data: Partial<Crop>) => {
+    const newCrop: Crop = {
+      id: Math.random().toString(36).substr(2, 9),
+      farmId: farm!.id,
+      name: data.name!,
+      plantedDate: data.plantedDate!,
+      status: data.status!,
+    };
+    setCrops((prevCrops) => [...prevCrops, newCrop]);
+    setIsDialogOpen(false);
+  };
+
+  return (
+    <div className="container max-w-screen-xl p-8">
+      <Button variant="ghost" className="mb-4" onClick={() => router.back()}>
+        <ArrowLeft className="mr-2 h-4 w-4" /> Back to Farms
+      </Button>
+
+      <div className="grid gap-6 md:grid-cols-2">
+        <Card className="md:col-span-2">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <div className="flex items-center space-x-2">
+              <div className="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center">
+                <Sprout className="h-4 w-4 text-primary" />
+              </div>
+              <h1 className="text-2xl font-bold">{farm?.name ?? "Unknown Farm"}</h1>
+            </div>
+            <div className="flex items-center text-sm text-muted-foreground">
+              <MapPin className="mr-1 h-4 w-4" />
+              {farm?.location ?? "Unknown Location"}
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="grid gap-2">
+              <div className="flex justify-between">
+                <span className="font-medium">Farm Type:</span>
+                <span className="text-muted-foreground">{farm?.type ?? "Unknown Type"}</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="font-medium">Created:</span>
+                <span className="text-muted-foreground">{farm?.createdAt?.toLocaleDateString() ?? "Unknown Date"}</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="font-medium">Total Crops:</span>
+                <span className="text-muted-foreground">{crops.length}</span>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <div className="md:col-span-2">
+          <h2 className="text-xl font-bold mb-4">Crops</h2>
+          <Separator className="my-4" />
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+            <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+              <Card
+                className="w-full bg-muted/50 hover:bg-muted/80 transition-all cursor-pointer group hover:shadow-lg"
+                onClick={() => setIsDialogOpen(true)}>
+                <CardContent className="p-6">
+                  <div className="flex flex-col gap-6">
+                    <div className="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 transition-colors">
+                      <Plus className="h-5 w-5 text-primary" />
+                    </div>
+                    <div className="space-y-1">
+                      <h3 className="text-xl font-medium">Add Crop</h3>
+                      <p className="text-sm text-muted-foreground">Plant a new crop</p>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+              <DialogContent className="sm:max-w-[425px]">
+                <DialogHeader>
+                  <DialogTitle>Add New Crop</DialogTitle>
+                  <DialogDescription>Fill out the form to add a new crop to your farm.</DialogDescription>
+                </DialogHeader>
+                <AddCropForm onSubmit={handleAddCrop} onCancel={() => setIsDialogOpen(false)} />
+              </DialogContent>
+            </Dialog>
+
+            {crops.map((crop) => (
+              <CropCard key={crop.id} crop={crop} />
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/app/(sidebar)/farms/add-farm-form.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import type { Farm } from "@/types";
+import { farmFormSchema } from "@/schemas/form.schema";
+
+interface AddFarmFormProps {
+  onSubmit: (data: Partial<Farm>) => Promise<void>;
+  onCancel: () => void;
+}
+
+export function AddFarmForm({ onSubmit, onCancel }: AddFarmFormProps) {
+  const form = useForm<z.infer<typeof farmFormSchema>>({
+    resolver: zodResolver(farmFormSchema),
+    defaultValues: {
+      name: "",
+      location: "",
+      type: "",
+    },
+  });
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+        <FormField
+          control={form.control}
+          name="name"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Farm Name</FormLabel>
+              <FormControl>
+                <Input placeholder="Enter farm name" {...field} />
+              </FormControl>
+              <FormDescription>This is your farm&apos;s display name.</FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="location"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Location</FormLabel>
+              <FormControl>
+                <Input placeholder="Enter farm location" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="type"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Farm Type</FormLabel>
+              <Select onValueChange={field.onChange} defaultValue={field.value}>
+                <FormControl>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select farm type" />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  <SelectItem value="durian">Durian</SelectItem>
+                  <SelectItem value="mango">Mango</SelectItem>
+                  <SelectItem value="rice">Rice</SelectItem>
+                  <SelectItem value="other">Other</SelectItem>
+                </SelectContent>
+              </Select>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <div className="flex justify-end gap-2">
+          <Button type="button" variant="outline" onClick={onCancel}>
+            Cancel
+          </Button>
+          <Button type="submit">Create Farm</Button>
+        </div>
+      </form>
+    </Form>
+  );
+}

frontend/app/(sidebar)/farms/farm-card.tsx

@@ -0,0 +1,61 @@
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { MapPin, Sprout, Plus } from "lucide-react";
+import type { Farm } from "@/types";
+
+export interface FarmCardProps {
+  variant: "farm" | "add";
+  farm?: Farm;
+  onClick?: () => void;
+}
+
+export function FarmCard({ variant, farm, onClick }: FarmCardProps) {
+  const cardClasses =
+    "w-full max-w-[240px] bg-muted/50 hover:bg-muted/80 transition-all cursor-pointer group hover:shadow-lg";
+
+  if (variant === "add") {
+    return (
+      <Card className={cardClasses} onClick={onClick}>
+        <CardContent className="p-6">
+          <div className="flex flex-col gap-6">
+            <div className="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 transition-colors">
+              <Plus className="h-5 w-5 text-primary" />
+            </div>
+            <div className="space-y-1">
+              <h3 className="text-xl font-medium">Setup</h3>
+              <p className="text-sm text-muted-foreground">Setup new farm</p>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (variant === "farm" && farm) {
+    return (
+      <Card className={cardClasses} onClick={onClick}>
+        <CardHeader className="p-4 pb-0">
+          <div className="flex items-center justify-between">
+            <div className="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center">
+              <Sprout className="h-4 w-4 text-primary" />
+            </div>
+            <span className="text-sm font-medium text-primary">{farm.type}</span>
+          </div>
+        </CardHeader>
+        <CardContent className="p-4">
+          <div className="space-y-4">
+            <div>
+              <h3 className="text-xl font-medium truncate">{farm.name}</h3>
+              <div className="flex items-center gap-1 mt-1 text-muted-foreground">
+                <MapPin className="h-3 w-3" />
+                <p className="text-sm">{farm.location}</p>
+              </div>
+            </div>
+            <div className="text-xs text-muted-foreground">Created {farm.createdAt.toLocaleDateString()}</div>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return null;
+}

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

@@ -0,0 +1,78 @@
+"use client";
+
+import { useState } from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
+import { Separator } from "@/components/ui/separator";
+import { Input } from "@/components/ui/input";
+import { Search } from "lucide-react";
+import { FarmCard } from "./farm-card";
+import { AddFarmForm } from "./add-farm-form";
+import type { Farm } from "@/types";
+
+export default function FarmSetupPage() {
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [farms, setFarms] = useState<Farm[]>([
+    {
+      id: "1",
+      name: "Green Valley Farm",
+      location: "Bangkok",
+      type: "durian",
+      createdAt: new Date(),
+    },
+  ]);
+
+  const handleAddFarm = async (data: Partial<Farm>) => {
+    const newFarm: Farm = {
+      id: Math.random().toString(36).substr(2, 9),
+      name: data.name!,
+      location: data.location!,
+      type: data.type!,
+      createdAt: new Date(),
+    };
+    setFarms([...farms, newFarm]);
+    setIsDialogOpen(false);
+  };
+
+  const filteredFarms = farms.filter(
+    (farm) =>
+      farm.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      farm.location.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      farm.type.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  return (
+    <div className="container max-w-screen-xl p-8">
+      <div className="flex justify-between items-center">
+        <h1 className="text-3xl font-bold">Farms</h1>
+        <div className="relative w-64">
+          <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder="Search farms..."
+            className="pl-8"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+          />
+        </div>
+      </div>
+      <Separator className="my-4" />
+
+      <div className="grid grid-cols-5 gap-4">
+        <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+          <FarmCard variant="add" onClick={() => setIsDialogOpen(true)} />
+          <DialogContent className="sm:max-w-[425px]">
+            <DialogHeader>
+              <DialogTitle>Setup New Farm</DialogTitle>
+              <DialogDescription>Fill out the form to configure your new farm.</DialogDescription>
+            </DialogHeader>
+            <AddFarmForm onSubmit={handleAddFarm} onCancel={() => setIsDialogOpen(false)} />
+          </DialogContent>
+        </Dialog>
+
+        {filteredFarms.map((farm) => (
+          <FarmCard key={farm.id} variant="farm" farm={farm} />
+        ))}
+      </div>
+    </div>
+  );
+}

frontend/app/(sidebar)/setup/google-map-with-drawing.tsx

@@ -14,24 +14,13 @@ const GoogleMapWithDrawing = () => {
   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);
-      console.log("Drawing complete:", overlay);
+  }, []);
-    },
-    []
-  );
 
   return (
-    <LoadScript
+    <LoadScript googleMapsApiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY!} libraries={["drawing"]}>
-      googleMapsApiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY!}
+      <GoogleMap mapContainerStyle={containerStyle} center={center} zoom={10} onLoad={(map) => setMap(map)}>
-      libraries={["drawing"]}
-    >
-      <GoogleMap
-        mapContainerStyle={containerStyle}
-        center={center}
-        zoom={10}
-        onLoad={(map) => setMap(map)}
-      >
         {map && (
           <DrawingManager
             onOverlayComplete={onDrawingComplete}

frontend/app/auth/signin/page.tsx

@@ -3,7 +3,7 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 
-import { signInSchema } from "@/schema/authSchema";
+import { signInSchema } from "@/schemas/auth.schema";
 
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";

frontend/app/auth/signup/page.tsx

@@ -7,7 +7,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Button } from "@/components/ui/button";
 
-import { signUpSchema } from "@/schema/authSchema";
+import { signUpSchema } from "@/schemas/auth.schema";
 
 import Link from "next/link";
 import Image from "next/image";

frontend/components/ui/card.tsx

@@ -0,0 +1,76 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

frontend/schemas/form.schema.ts

@@ -0,0 +1,15 @@
+import * as z from "zod";
+
+export const farmFormSchema = z.object({
+  name: z.string().min(2, "Farm name must be at least 2 characters"),
+  location: z.string().min(2, "Location must be at least 2 characters"),
+  type: z.string().min(1, "Please select a farm type"),
+});
+
+export const cropFormSchema = z.object({
+  name: z.string().min(2, "Crop name must be at least 2 characters"),
+  plantedDate: z.string().refine((val) => !Number.isNaN(Date.parse(val)), {
+    message: "Please enter a valid date",
+  }),
+  status: z.enum(["growing", "harvested", "planned"]),
+});

frontend/types.ts

@@ -0,0 +1,15 @@
+export interface Crop {
+  id: string;
+  farmId: string;
+  name: string;
+  plantedDate: Date;
+  status: "growing" | "harvested" | "planned";
+}
+
+export interface Farm {
+  id: string;
+  name: string;
+  location: string;
+  type: string;
+  createdAt: Date;
+}