ForFarmTeam/ForFarm
1
0
Fork 0
mirror of https://github.com/ForFarmTeam/ForFarm.git synced 2025-12-19 14:04:08 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

ui: add edit inventoty item ui

Browse Source
This commit is contained in:
Natthapol SERMSARAN 2025-03-21 22:59:24 +07:00
parent 7a56e69953
commit f2b2f0fcbe
1 changed files with 191 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

191
frontend/app/(sidebar)/inventory/edit-inventory-item.tsx Normal file
View File

@ -0,0 +1,191 @@
"use client";
import { useState } from "react";
import { CalendarIcon } from "lucide-react";
import { format } from "date-fns";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { cn } from "@/lib/utils";
// import { updateInventoryItem } from "@/api/inventory";
// import type { UpdateInventoryItemInput } from "@/types";
export function EditInventoryItem() {
const [date, setDate] = useState<Date | undefined>();
const [open, setOpen] = useState(false);
const [itemName, setItemName] = useState("");
const [itemType, setItemType] = useState("");
const [itemCategory, setItemCategory] = useState("");
const [itemQuantity, setItemQuantity] = useState(0);
const [itemUnit, setItemUnit] = useState("");
// const queryClient = useQueryClient();
// const mutation = useMutation({
// mutationFn: (item: UpdateInventoryItemInput) => UpdateInventoryItem(item),
// onSuccess: () => {
// // Invalidate queries to refresh inventory data.
// queryClient.invalidateQueries({ queryKey: ["inventoryItems"] });
// // Reset form fields and close dialog.
// setItemName("");
// setItemType("");
// setItemCategory("");
// setItemQuantity(0);
// setItemUnit("");
// setDate(undefined);
// setOpen(false);
// },
// });
const handleEdit = () => {
// // Basic validation (you can extend this as needed)
// if (!itemName || !itemType || !itemCategory || !itemUnit) return;
// mutation.mutate({
// name: itemName,
// type: itemType,
// category: itemCategory,
// quantity: itemQuantity,
// unit: itemUnit,
// });
};
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
<Button className="bg-yellow-500 hover:bg-yellow-600">Edit</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-[425px]">
<DialogHeader>
<DialogTitle>Edit Inventory Item</DialogTitle>
<DialogDescription>
Edit a plantation or fertilizer item in your inventory.
</DialogDescription>
</DialogHeader>
<div className="grid gap-4 py-4">
<div className="grid grid-cols-4 items-center gap-4">
<Label htmlFor="name" className="text-right">
Name
</Label>
<Input
id="name"
className="col-span-3"
value={itemName}
onChange={(e) => setItemName(e.target.value)}
/>
</div>
<div className="grid grid-cols-4 items-center gap-4">
<Label htmlFor="type" className="text-right">
Type
</Label>
<Select value={itemType} onValueChange={setItemType}>
<SelectTrigger className="col-span-3">
<SelectValue placeholder="Select type" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectLabel>Type</SelectLabel>
<SelectItem value="plantation">Plantation</SelectItem>
<SelectItem value="fertilizer">Fertilizer</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</div>
<div className="grid grid-cols-4 items-center gap-4">
<Label htmlFor="category" className="text-right">
Category
</Label>
<Input
id="category"
className="col-span-3"
placeholder="e.g., Seeds, Organic"
value={itemCategory}
onChange={(e) => setItemCategory(e.target.value)}
/>
</div>
<div className="grid grid-cols-4 items-center gap-4">
<Label htmlFor="quantity" className="text-right">
Quantity
</Label>
<Input
id="quantity"
type="number"
className="col-span-3"
value={itemQuantity}
onChange={(e) => setItemQuantity(Number(e.target.value))}
/>
</div>
<div className="grid grid-cols-4 items-center gap-4">
<Label htmlFor="unit" className="text-right">
Unit
</Label>
<Input
id="unit"
className="col-span-3"
placeholder="e.g., kg, packets"
value={itemUnit}
onChange={(e) => setItemUnit(e.target.value)}
/>
</div>
<div className="grid grid-cols-4 items-center gap-4">
<Label htmlFor="date" className="text-right">
Date
</Label>
<Popover>
<PopoverTrigger asChild>
<Button
variant={"outline"}
className={cn(
"col-span-3 justify-start text-left font-normal",
!date && "text-muted-foreground",
)}
>
<CalendarIcon className="mr-2 h-4 w-4" />
{date ? format(date, "PPP") : "Pick a date"}
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0">
<Calendar
mode="single"
selected={date}
onSelect={setDate}
initialFocus
/>
</PopoverContent>
</Popover>
</div>
</div>
<DialogFooter>
<Button type="submit" onClick={handleEdit}>
Edit Item
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}