feat: enhance EditInventoryItem component with props and status selection

frontend/app/(sidebar)/inventory/edit-inventory-item.tsx

@@ -36,14 +36,32 @@ import { cn } from "@/lib/utils";
 // import { updateInventoryItem } from "@/api/inventory";
 // import type { UpdateInventoryItemInput } from "@/types";
 
-export function EditInventoryItem() {
+export interface EditInventoryItemProps {
-  const [date, setDate] = useState<Date | undefined>();
+  id: string;
+  name: string;
+  category: string;
+  status: string;
+  type: string;
+  unit: string;
+  quantity: number;
+}
+
+export function EditInventoryItem({
+  id,
+  name,
+  category,
+  status,
+  type,
+  unit,
+  quantity,
+}: EditInventoryItemProps) {
   const [open, setOpen] = useState(false);
-  const [itemName, setItemName] = useState("");
+  const [itemName, setItemName] = useState(name);
-  const [itemType, setItemType] = useState("");
+  const [itemType, setItemType] = useState(type);
-  const [itemCategory, setItemCategory] = useState("");
+  const [itemCategory, setItemCategory] = useState(category);
-  const [itemQuantity, setItemQuantity] = useState(0);
+  const [itemQuantity, setItemQuantity] = useState(quantity);
-  const [itemUnit, setItemUnit] = useState("");
+  const [itemUnit, setItemUnit] = useState(unit);
+  const [itemStatus, setItemStatus] = useState(status);
 
   // const queryClient = useQueryClient();
 
@@ -103,7 +121,7 @@ export function EditInventoryItem() {
             <Label htmlFor="type" className="text-right">
               Type
             </Label>
-            <Select value={itemType} onValueChange={setItemType}>
+            <Select value={itemType.toLowerCase()} onValueChange={setItemType}>
               <SelectTrigger className="col-span-3">
                 <SelectValue placeholder="Select type" />
               </SelectTrigger>
@@ -116,6 +134,27 @@ export function EditInventoryItem() {
               </SelectContent>
             </Select>
           </div>
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="type" className="text-right">
+              Status
+            </Label>
+            <Select
+              value={itemStatus.toLowerCase()}
+              onValueChange={setItemStatus}
+            >
+              <SelectTrigger className="col-span-3">
+                <SelectValue placeholder="Select status" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  <SelectLabel>Status</SelectLabel>
+                  <SelectItem value="in stock">In Stock</SelectItem>
+                  <SelectItem value="low stock">Low Stock</SelectItem>
+                  <SelectItem value="out of stock">Out Of Stock</SelectItem>
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+          </div>
           <div className="grid grid-cols-4 items-center gap-4">
             <Label htmlFor="category" className="text-right">
               Category
@@ -152,33 +191,6 @@ export function EditInventoryItem() {
               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}>

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

@@ -2,10 +2,6 @@
 
 import {
   useState,
-  JSXElementConstructor,
-  ReactElement,
-  ReactNode,
-  ReactPortal,
   useMemo,
 } from "react";
 import { useQuery } from "@tanstack/react-query";
@@ -40,7 +36,10 @@ import { FaSort, FaSortUp, FaSortDown } from "react-icons/fa";
 import { Badge } from "@/components/ui/badge";
 import { fetchInventoryItems } from "@/api/inventory";
 import { AddInventoryItem } from "./add-inventory-item";
-import { EditInventoryItem } from "./edit-inventory-item";
+import {
+  EditInventoryItem,
+  EditInventoryItemProps
+} from "./edit-inventory-item";
 import { DeleteInventoryItem } from "./delete-inventory-item";
 
 export default function InventoryPage() {
@@ -72,6 +71,7 @@ export default function InventoryPage() {
     { accessorKey: "category", header: "Category" },
     { accessorKey: "type", header: "Type" },
     { accessorKey: "quantity", header: "Quantity" },
+    { accessorKey: "unit", header: "Unit" },
     { accessorKey: "lastUpdated", header: "Last Updated" },
     {
       accessorKey: "status",
@@ -97,7 +97,9 @@ export default function InventoryPage() {
     {
       accessorKey: "edit",
       header: "Edit",
-      cell: () => <EditInventoryItem />,
+      cell: ({ row }: { row: { original: EditInventoryItemProps } }) => (
+        <EditInventoryItem {...row.original} />
+      ),
       enableSorting: false,
     },
     {
@@ -109,7 +111,7 @@ export default function InventoryPage() {
   ];
 
   const table = useReactTable({
-    data: filteredItems,
+    data: filteredItems.map((item) => ({ ...item, id: item.id.toString() })),
     columns,
     state: { sorting, pagination },
     getCoreRowModel: getCoreRowModel(),