[dyad] Added a form to create new stock items - wrote 3 file(s)

src/components/stock/AddItemForm.tsx

@@ -0,0 +1,120 @@
+"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 {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import { showSuccess } from "@/utils/toast"
+
+const formSchema = z.object({
+  name: z.string().min(2, { message: "Name must be at least 2 characters." }),
+  sku: z.string().min(2, { message: "SKU must be at least 2 characters." }),
+  category: z.string().min(2, { message: "Category must be at least 2 characters." }),
+  quantity: z.coerce.number().int().positive({ message: "Quantity must be a positive number." }),
+  price: z.coerce.number().positive({ message: "Price must be a positive number." }),
+})
+
+export function AddItemForm({ setOpen }: { setOpen: (open: boolean) => void }) {
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: "",
+      sku: "",
+      category: "",
+      quantity: 1,
+      price: 0.00,
+    },
+  })
+
+  function onSubmit(values: z.infer<typeof formSchema>) {
+    // In a real app, you'd send this to your API
+    console.log(values)
+    showSuccess("New item added successfully!")
+    setOpen(false) // Close the dialog on successful submission
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+        <FormField
+          control={form.control}
+          name="name"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Item Name</FormLabel>
+              <FormControl>
+                <Input placeholder="e.g., Wireless Mouse" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="sku"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>SKU</FormLabel>
+              <FormControl>
+                <Input placeholder="e.g., LOG-M720" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="category"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Category</FormLabel>
+              <FormControl>
+                <Input placeholder="e.g., Electronics" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <div className="grid grid-cols-2 gap-4">
+          <FormField
+            control={form.control}
+            name="quantity"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Quantity</FormLabel>
+                <FormControl>
+                  <Input type="number" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="price"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Price</FormLabel>
+                <FormControl>
+                  <Input type="number" step="0.01" placeholder="$0.00" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </div>
+        <Button type="submit" className="w-full">Add Item</Button>
+      </form>
+    </Form>
+  )
+}

src/components/stock/columns.tsx

@@ -31,8 +31,11 @@ export const columns: ColumnDef<StockItem>[] = [
     header: ({ table }) => (
       <Checkbox
         checked={
-          table.getIsAllPageRowsSelected() ||
-          (table.getIsSomePageRowsSelected() && "indeterminate")
+          table.getIsAllPageRowsSelected()
+            ? true
+            : table.getIsSomePageRowsSelected()
+            ? "indeterminate"
+            : false
         }
         onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
         aria-label="Select all"

src/pages/StockList.tsx

@@ -1,7 +1,17 @@
+import { useState } from "react"
 import { columns, StockItem } from "../components/stock/columns"
 import { DataTable } from "../components/stock/data-table"
 import { Button } from "@/components/ui/button"
 import { PlusCircle } from "lucide-react"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import { AddItemForm } from "../components/stock/AddItemForm"
 
 // In a real app, you would fetch this data from an API.
 const data: StockItem[] = [
@@ -71,6 +81,8 @@ const data: StockItem[] = [
 ];
 
 const StockList = () => {
+  const [open, setOpen] = useState(false);
+
   return (
     <div>
       <div className="flex justify-between items-center mb-6">
@@ -78,10 +90,23 @@ const StockList = () => {
             <h1 className="text-3xl font-bold">Stock List</h1>
             <p className="text-gray-500">Manage your inventory here.</p>
         </div>
-        <Button>
-          <PlusCircle className="mr-2 h-4 w-4" />
-          Add New Item
-        </Button>
+        <Dialog open={open} onOpenChange={setOpen}>
+          <DialogTrigger asChild>
+            <Button>
+              <PlusCircle className="mr-2 h-4 w-4" />
+              Add New Item
+            </Button>
+          </DialogTrigger>
+          <DialogContent className="sm:max-w-[425px]">
+            <DialogHeader>
+              <DialogTitle>Add New Stock Item</DialogTitle>
+              <DialogDescription>
+                Fill in the details below to add a new item to your inventory.
+              </DialogDescription>
+            </DialogHeader>
+            <AddItemForm setOpen={setOpen} />
+          </DialogContent>
+        </Dialog>
       </div>
       <DataTable columns={columns} data={data} />
     </div>