Refactor purchase order form and stock columns

Updated PurchaseOrderForm to use useFieldArray for managing items, simplifying add/remove logic and improving reactivity. Adjusted stock columns to conditionally render cells based on screen size for better responsive design, and fixed currency code casing in sellingPrice column.

src/components/purchase-orders/PurchaseOrderForm.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react"
 import { zodResolver } from "@hookform/resolvers/zod"
-import { useForm } from "react-hook-form"
+import { useForm, useFieldArray } from "react-hook-form"
 import * as z from "zod"
 import { useState, useEffect, useCallback } from "react" // Import useState and useEffect
 
@@ -124,23 +124,26 @@ export function PurchaseOrderForm({ setOpen, refreshData }: PurchaseOrderFormPro
     },
   })
 
+  const { fields, append, remove } = useFieldArray({
+    control: form.control,
+    name: "items",
+  });
+
+
   // Function to add a new item row
   const addItem = () => {
-    const currentItems = form.getValues("items");
-    form.setValue("items", [...currentItems, {
+    append({
       stockItemId: "",
       itemName: "",
       quantity: 1,
       sku: "",
       costPrice: 0,
-    }]);
+    });
   }
 
   // Function to remove an item row
   const removeItem = (index: number) => {
-    const currentItems = form.getValues("items");
-    const newItems = currentItems.filter((_, i) => i !== index);
-    form.setValue("items", newItems);
+    remove(index);
   }
 
   // Function to handle changes in item fields
@@ -266,8 +269,8 @@ export function PurchaseOrderForm({ setOpen, refreshData }: PurchaseOrderFormPro
         {/* Items Section */}
         <div className="border p-4 rounded-md">
           <h3 className="text-lg font-semibold mb-4">Order Items</h3>
-          {form.getValues("items").map((item, index) => (
-            <div key={index} className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-5 gap-4 mb-4 items-center">
+          {fields.map((item, index) => (
+            <div key={item.id} className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-[2fr,1fr,1fr,1fr,auto] gap-4 mb-4 items-center">
               <FormField
                 control={form.control}
                 name={`items.${index}.itemName`}
@@ -336,7 +339,7 @@ export function PurchaseOrderForm({ setOpen, refreshData }: PurchaseOrderFormPro
                 )}
               />
               <div className="flex justify-center md:justify-start">
-                {form.getValues("items").length > 1 && (
+                {fields.length > 1 && (
                   <Button type="button" variant="outline" size="icon" onClick={() => removeItem(index)} className="w-full sm:w-auto">
                     -
                   </Button>

src/components/stock/columns.tsx

@@ -45,10 +45,12 @@ export const createColumns = (props: ActionsColumnProps): ColumnDef<StockItem>[]
   {
     accessorKey: "sku",
     header: "SKU",
+    cell: ({ row }) => <div className="hidden sm:table-cell">{row.getValue("sku")}</div>,
   },
   {
     accessorKey: "category",
     header: "Category",
+    cell: ({ row }) => <div className="hidden md:table-cell">{row.getValue("category")}</div>,
   },
   {
     accessorKey: "quantity",
@@ -63,7 +65,7 @@ export const createColumns = (props: ActionsColumnProps): ColumnDef<StockItem>[]
         style: "currency",
         currency: "ZAR",
       }).format(amount)
-      return <div className="text-right font-medium">{formatted}</div>
+      return <div className="text-right font-medium hidden lg:table-cell">{formatted}</div>
     },
   },
   {
@@ -73,7 +75,7 @@ export const createColumns = (props: ActionsColumnProps): ColumnDef<StockItem>[]
       const amount = parseFloat(row.getValue("sellingPrice"))
       const formatted = new Intl.NumberFormat("en-ZA", {
         style: "currency",
-        currency: "ZAR",
+        currency: "Zar",
       }).format(amount)
       return <div className="text-right font-medium">{formatted}</div>
     },