@apptimate/ui 5.8.0 → 6.0.0

package/src/common-components/pickers/UomPicker.tsx

@@ -13,8 +13,7 @@ import {
   PickerItem,
   PickerTrigger,
 } from "./EntityPickerModal";
-import { getUomGroups, createUom } from "@apptimate/core-lib";
-import { UomGroupPicker } from "./UomGroupPicker";
+import { getUomGroups, createUom, createUomGroup } from "@apptimate/core-lib";
 import toast from "react-hot-toast";
 
 interface UomPickerProps {
@@ -53,11 +52,7 @@ export function UomPicker({
   const [quickAddData, setQuickAddData] = useState({
     name: "",
     abbreviation: "",
-    conversion_factor: "1",
-    uom_group_id: null as number | null,
-    uom_group_name: "",
-    base_uom_id: null as number | null,
-    base_uom_name: "",
+    new_group_name: "",
     status: "active"
   });
   const [isCreating, setIsCreating] = useState(false);
@@ -89,25 +84,39 @@ export function UomPicker({
   };
 
   const handleQuickAdd = async () => {
-    if (!quickAddData.name.trim() || !quickAddData.abbreviation.trim() || !quickAddData.uom_group_id) {
+    if (!quickAddData.name.trim() || !quickAddData.abbreviation.trim() || !quickAddData.new_group_name.trim()) {
       toast.error("Please fill all required fields");
       return;
     }
     setIsCreating(true);
     try {
+      // 1. Create Group
+      const groupRes = await createUomGroup({
+        name: quickAddData.new_group_name.trim()
+      });
+      
+      if (!groupRes.is_success || !groupRes.result) {
+        toast.error(groupRes.message || "Failed to create UOM Group");
+        setIsCreating(false);
+        return;
+      }
+      
+      const newGroupId = groupRes.result.id;
+
+      // 2. Create UOM (as base unit for the new group)
       const res = await createUom({
         name: quickAddData.name.trim(),
         abbreviation: quickAddData.abbreviation.trim(),
-        conversion_factor: parseFloat(quickAddData.conversion_factor) || 1,
-        uom_group_id: quickAddData.uom_group_id,
-        base_uom_id: quickAddData.base_uom_id || null,
+        conversion_factor: 1,
+        uom_group_id: newGroupId,
+        base_uom_id: null,
         status: quickAddData.status,
       });
       if (res.is_success && res.result) {
         toast.success("UOM created");
         onChange({ id: res.result.id, name: res.result.name, abbreviation: res.result.abbreviation, uom_group_id: res.result.uom_group_id });
         setIsQuickAddOpen(false);
-        setQuickAddData({ name: "", abbreviation: "", conversion_factor: "1", uom_group_id: null, uom_group_name: "", base_uom_id: null, base_uom_name: "", status: "active" });
+        setQuickAddData({ name: "", abbreviation: "", new_group_name: "", status: "active" });
         setIsOpen(false);
       } else {
         toast.error(res.message || "Failed to create");
@@ -158,7 +167,7 @@ export function UomPicker({
         headerActions={
           <button
             type="button"
-            onClick={() => { setIsQuickAddOpen(true); setQuickAddData({ name: "", abbreviation: "", conversion_factor: "1", uom_group_id: null, uom_group_name: "", base_uom_id: null, base_uom_name: "", status: "active" }); }}
+            onClick={() => { setIsQuickAddOpen(true); setQuickAddData({ name: "", abbreviation: "", new_group_name: "", status: "active" }); }}
             className="p-1.5 rounded-lg bg-primary-50 text-primary-600 hover:bg-primary-100 transition-colors flex-shrink-0"
             title="Quick Add UOM"
           >
@@ -207,22 +216,12 @@ export function UomPicker({
         zIndex={(pickerZIndex || 200) + 100}
       >
         <div className="space-y-4">
-          <UomGroupPicker
-            label="UOM Group"
+          <Input
+            label="UOM Group Name"
             isRequired
-            value={quickAddData.uom_group_id}
-            displayValue={quickAddData.uom_group_name || null}
-            pickerZIndex={400}
-            onChange={(g) => {
-              setQuickAddData({ 
-                ...quickAddData, 
-                uom_group_id: g?.id ?? null, 
-                uom_group_name: g?.name ?? "",
-                base_uom_id: null,
-                base_uom_name: "",
-                conversion_factor: "1"
-              });
-            }}
+            placeholder="e.g. Weight, Volume..."
+            value={quickAddData.new_group_name}
+            onChange={(e) => setQuickAddData({ ...quickAddData, new_group_name: e.target.value })}
           />
           <div className="grid grid-cols-2 gap-4">
             <Input
@@ -240,45 +239,7 @@ export function UomPicker({
               onChange={(e) => setQuickAddData({ ...quickAddData, abbreviation: e.target.value })}
             />
           </div>
-          {!baseUnitsOnly && (
-            <UomPicker
-              label="Base UOM"
-              placeholder="Select base unit…"
-              value={quickAddData.base_uom_id}
-              displayValue={quickAddData.base_uom_name || null}
-              pickerZIndex={400}
-              onChange={(uom) => {
-                let newGroupId = quickAddData.uom_group_id;
-                let newGroupName = quickAddData.uom_group_name;
-                
-                if (uom?.uom_group_id && uom.uom_group_id !== quickAddData.uom_group_id) {
-                  newGroupId = uom.uom_group_id;
-                  const foundGroup = groups.find(g => g.id === uom.uom_group_id);
-                  if (foundGroup) newGroupName = foundGroup.name;
-                }
-
-                setQuickAddData({ 
-                  ...quickAddData, 
-                  base_uom_id: uom?.id ?? null, 
-                  base_uom_name: uom?.name ?? "",
-                  uom_group_id: newGroupId,
-                  uom_group_name: newGroupName,
-                });
-              }}
-              uomGroupId={quickAddData.uom_group_id}
-            />
-          )}
           <div className="grid grid-cols-2 gap-4">
-            {!baseUnitsOnly && (
-              <Input 
-                label="Conversion Factor" 
-                isRequired 
-                type="number" 
-                placeholder="1" 
-                value={quickAddData.conversion_factor} 
-                onChange={(e) => setQuickAddData({ ...quickAddData, conversion_factor: e.target.value })} 
-              />
-            )}
             <Select
               label="Status"
               value={quickAddData.status}
@@ -299,7 +260,7 @@ export function UomPicker({
             </Button>
             <Button
               onClick={handleQuickAdd}
-              isDisabled={isCreating || !quickAddData.name.trim() || !quickAddData.abbreviation.trim() || !quickAddData.uom_group_id}
+              isDisabled={isCreating || !quickAddData.name.trim() || !quickAddData.abbreviation.trim() || !quickAddData.new_group_name.trim()}
             >
               {isCreating ? "Creating…" : "Create & Select"}
             </Button>