@apptimate/ui 3.5.0 → 3.7.0

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

@@ -0,0 +1,306 @@
+"use client";
+
+import React, { useState, useCallback } from "react";
+import { Button, Input, Modal, ModalFooter, Select } from "@apptimate/ui";
+import { Plus, Ruler } from "lucide-react";
+import {
+  EntityPickerModal,
+  PickerItem,
+  PickerTrigger,
+} from "./EntityPickerModal";
+import { getUomGroups, createUom } from "@apptimate/core-lib";
+import { UomGroupPicker } from "./UomGroupPicker";
+import toast from "react-hot-toast";
+
+interface UomPickerProps {
+  value?: number | string | null;
+  displayValue?: string | null;
+  onChange: (uom: { id: number; name: string; abbreviation: string; uom_group_id?: number } | null) => void;
+  label?: string;
+  placeholder?: string;
+  isRequired?: boolean;
+  excludeId?: number | string | null;
+  /** If provided, restricts the picker to only show UOMs from this specific group ID */
+  uomGroupId?: number | null;
+  pickerZIndex?: number;
+  baseUnitsOnly?: boolean;
+}
+
+export function UomPicker({
+  value,
+  displayValue,
+  onChange,
+  label = "Unit of Measure",
+  placeholder = "Select UOM…",
+  isRequired = false,
+  excludeId,
+  uomGroupId,
+  pickerZIndex,
+  baseUnitsOnly = false,
+}: UomPickerProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const [groups, setGroups] = useState<any[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  // Quick add
+  const [isQuickAddOpen, setIsQuickAddOpen] = useState(false);
+  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: "",
+    status: "active"
+  });
+  const [isCreating, setIsCreating] = useState(false);
+
+  const fetchData = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      const res = await getUomGroups({ include_uoms: true });
+      if (res.is_success) {
+        setGroups(res.result || []);
+      }
+    } catch {}
+    setIsLoading(false);
+  }, []);
+
+  const handleOpen = () => {
+    setSearch("");
+    setIsOpen(true);
+    fetchData();
+  };
+
+  const handleSelect = (uom: any) => {
+    onChange({ id: uom.id, name: uom.name, abbreviation: uom.abbreviation, uom_group_id: uom.uom_group_id });
+    setIsOpen(false);
+  };
+
+  const handleClear = () => {
+    onChange(null);
+  };
+
+  const handleQuickAdd = async () => {
+    if (!quickAddData.name.trim() || !quickAddData.abbreviation.trim() || !quickAddData.uom_group_id) {
+      toast.error("Please fill all required fields");
+      return;
+    }
+    setIsCreating(true);
+    try {
+      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,
+        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" });
+        setIsOpen(false);
+      } else {
+        toast.error(res.message || "Failed to create");
+      }
+    } catch (e: any) {
+      toast.error(e.message || "Error creating UOM");
+    }
+    setIsCreating(false);
+  };
+
+  const searchLower = search.toLowerCase();
+
+  const filteredGroups = groups
+    .filter(g => !uomGroupId || String(g.id) === String(uomGroupId))
+    .map(g => {
+      const matchedUoms = (g.uoms || [])
+        .filter((u: any) => !excludeId || String(u.id) !== String(excludeId))
+        .filter((u: any) => !baseUnitsOnly || !u.base_uom_id)
+        .filter((u: any) => 
+          u.name.toLowerCase().includes(searchLower) || u.abbreviation.toLowerCase().includes(searchLower)
+        );
+      return { ...g, uoms: matchedUoms };
+    })
+    .filter(g => g.uoms.length > 0 || g.name.toLowerCase().includes(searchLower));
+
+  return (
+    <>
+      <PickerTrigger
+        label={label}
+        value={displayValue || null}
+        placeholder={placeholder}
+        isRequired={isRequired}
+        onClick={handleOpen}
+        onClear={value ? handleClear : undefined}
+      />
+
+      <EntityPickerModal
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        onSelect={handleSelect}
+        title="Select Unit of Measure"
+        searchPlaceholder="Search UOMs…"
+        selectedId={value}
+        search={search}
+        onSearchChange={setSearch}
+        size="sm"
+        zIndex={pickerZIndex}
+        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" }); }}
+            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"
+          >
+            <Plus size={16} strokeWidth={2.5} />
+          </button>
+        }
+      >
+        {isLoading ? (
+          <div className="py-12 text-center">
+            <div className="inline-block h-6 w-6 rounded-full border-2 border-gray-200 border-t-primary-500 animate-spin" />
+            <p className="mt-3 text-sm text-gray-400">Loading UOMs…</p>
+          </div>
+        ) : filteredGroups.length === 0 ? (
+          <div className="py-12 text-center">
+            <Ruler size={32} className="mx-auto text-gray-300 mb-2" />
+            <p className="text-sm text-gray-400">No units of measure found</p>
+          </div>
+        ) : (
+          <div className="space-y-4 py-1">
+            {filteredGroups.map(group => (
+              <div key={group.id} className="space-y-1">
+                <div className="px-3 py-1 text-xs font-semibold text-gray-500 uppercase tracking-wider bg-gray-50/50">
+                  {group.name}
+                </div>
+                {group.uoms.map((uom: any) => (
+                  <PickerItem
+                    key={uom.id}
+                    label={uom.name}
+                    sublabel={uom.abbreviation}
+                    isSelected={String(value) === String(uom.id)}
+                    onClick={() => handleSelect(uom)}
+                  />
+                ))}
+              </div>
+            ))}
+          </div>
+        )}
+      </EntityPickerModal>
+
+      {/* Quick Add Modal */}
+      <Modal
+        isOpen={isQuickAddOpen}
+        onClose={() => setIsQuickAddOpen(false)}
+        title="New UoM"
+        size="md"
+        zIndex={(pickerZIndex || 200) + 100}
+      >
+        <div className="space-y-4">
+          <UomGroupPicker
+            label="UOM Group"
+            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"
+              });
+            }}
+          />
+          <div className="grid grid-cols-2 gap-4">
+            <Input
+              label="Code Name"
+              isRequired
+              placeholder="e.g. Kilogram"
+              value={quickAddData.name}
+              onChange={(e) => setQuickAddData({ ...quickAddData, name: e.target.value })}
+            />
+            <Input
+              label="Code"
+              isRequired
+              placeholder="e.g. KG"
+              value={quickAddData.abbreviation}
+              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}
+              onChange={(e) => setQuickAddData({ ...quickAddData, status: e.target.value })}
+              options={[
+                { value: "active", label: "Active" },
+                { value: "inactive", label: "Inactive" },
+              ]}
+            />
+          </div>
+          <ModalFooter>
+            <Button
+              variant="flat"
+              color="default"
+              onClick={() => setIsQuickAddOpen(false)}
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={handleQuickAdd}
+              isDisabled={isCreating || !quickAddData.name.trim() || !quickAddData.abbreviation.trim() || !quickAddData.uom_group_id}
+            >
+              {isCreating ? "Creating…" : "Create & Select"}
+            </Button>
+          </ModalFooter>
+        </div>
+      </Modal>
+    </>
+  );
+}

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

@@ -0,0 +1,135 @@
+"use client";
+
+import React, { useState, useCallback } from "react";
+import { Button, Input, Modal, ModalFooter } from "@apptimate/ui";
+import { Plus, Warehouse } from "lucide-react";
+import {
+  EntityPickerModal,
+  PickerItem,
+  PickerTrigger,
+} from "./EntityPickerModal";
+import { getWarehousesLookup } from "@apptimate/core-lib";
+import toast from "react-hot-toast";
+
+interface WarehousePickerProps {
+  value?: number | string | null;
+  displayValue?: string | null;
+  onChange: (warehouse: { id: number; name: string; code?: string; organization_id?: number } | null) => void;
+  label?: string;
+  placeholder?: string;
+  isRequired?: boolean;
+  fetchFromAllUserOrgs?: boolean;
+}
+
+export function WarehousePicker({
+  value,
+  displayValue,
+  onChange,
+  label = "Warehouse",
+  placeholder = "Select warehouse…",
+  isRequired = false,
+  fetchFromAllUserOrgs = false,
+}: WarehousePickerProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const [warehouses, setWarehouses] = useState<any[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const fetchData = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      const res = await getWarehousesLookup(fetchFromAllUserOrgs);
+      if (res.is_success) {
+        setWarehouses(res.result || []);
+        // Auto-select if there is exactly 1 warehouse and no value is currently selected
+        if (res.result?.length === 1 && !value) {
+          onChange({ id: res.result[0].id, name: res.result[0].name, code: res.result[0].code, organization_id: res.result[0].organization_id });
+        }
+      }
+    } catch {}
+    setIsLoading(false);
+  }, [value, onChange, fetchFromAllUserOrgs]);
+
+  // Fetch on mount to pre-populate and auto-select if applicable
+  React.useEffect(() => {
+    fetchData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleOpen = () => {
+    setSearch("");
+    setIsOpen(true);
+    fetchData();
+  };
+
+  const handleSelect = (wh: any) => {
+    onChange({ id: wh.id, name: wh.name, code: wh.code, organization_id: wh.organization_id });
+    setIsOpen(false);
+  };
+
+  const handleClear = () => {
+    onChange(null);
+  };
+
+  const searchLower = (search || "").toLowerCase();
+  const filtered = warehouses.filter(
+    (w) =>
+      (w.name || "").toLowerCase().includes(searchLower) ||
+      (w.code || "").toLowerCase().includes(searchLower) ||
+      (w.organization?.name || "").toLowerCase().includes(searchLower)
+  );
+
+  return (
+    <>
+      <PickerTrigger
+        label={label}
+        value={displayValue || null}
+        placeholder={placeholder}
+        isRequired={isRequired}
+        onClick={handleOpen}
+        onClear={value ? handleClear : undefined}
+      />
+
+      <EntityPickerModal
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        onSelect={handleSelect}
+        title={`Select ${label}`}
+        searchPlaceholder={`Search warehouses…`}
+        selectedId={value}
+        search={search}
+        onSearchChange={setSearch}
+        size="sm"
+      >
+        {isLoading ? (
+          <div className="py-12 text-center">
+            <div className="inline-block h-6 w-6 rounded-full border-2 border-gray-200 border-t-primary-500 animate-spin" />
+            <p className="mt-3 text-sm text-gray-400">Loading warehouses…</p>
+          </div>
+        ) : filtered.length === 0 ? (
+          <div className="py-12 text-center">
+            <Warehouse size={32} className="mx-auto text-gray-300 mb-2" />
+            <p className="text-sm text-gray-400">No warehouses found</p>
+          </div>
+        ) : (
+          <div className="space-y-0.5 py-1">
+            {filtered.map((wh) => (
+              <PickerItem
+                key={wh.id}
+                label={wh.name}
+                sublabel={
+                  [
+                    wh.code ? `Code: ${wh.code}` : null,
+                    wh.organization?.name ? `Org: ${wh.organization.name}` : null
+                  ].filter(Boolean).join(" | ") || undefined
+                }
+                isSelected={String(value) === String(wh.id)}
+                onClick={() => handleSelect(wh)}
+              />
+            ))}
+          </div>
+        )}
+      </EntityPickerModal>
+    </>
+  );
+}

package/src/common-components/pickers/index.ts

@@ -0,0 +1,11 @@
+export * from './BrandPicker';
+export * from './CategoryPicker';
+export * from './EntityPickerModal';
+export * from './UomGroupPicker';
+export * from './UomPicker';
+export * from './PartyPicker';
+export * from './WarehousePicker';
+export * from './TransactionItemPicker';
+export * from './modals/BatchSelectionModal';
+export * from './modals/SerialSelectionModal';
+export * from './modals/types';