@apptimate/ui 3.5.0 → 3.6.0

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

@@ -0,0 +1,231 @@
+"use client";
+
+import React, { useState, useCallback, useEffect } from "react";
+import { Button, Input, Modal, ModalFooter } from "@apptimate/ui";
+import { Plus, User } from "lucide-react";
+import {
+  EntityPickerModal,
+  PickerItem,
+  PickerTrigger,
+} from "./EntityPickerModal";
+import { lookupParties, createParty } from "@apptimate/core-lib";
+import toast from "react-hot-toast";
+
+interface PartyPickerProps {
+  value?: number | string | null;
+  displayValue?: string | null;
+  onChange: (party: { id: number; name: string; code?: string; type?: string } | null) => void;
+  label?: string;
+  placeholder?: string;
+  isRequired?: boolean;
+  partyType?: "customer" | "supplier" | "all";
+}
+
+export function PartyPicker({
+  value,
+  displayValue,
+  onChange,
+  label = "Party",
+  placeholder = "Select party…",
+  isRequired = false,
+  partyType = "all",
+}: PartyPickerProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const [parties, setParties] = useState<any[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  // Quick add
+  const [isQuickAddOpen, setIsQuickAddOpen] = useState(false);
+  const [quickAddFirstName, setQuickAddFirstName] = useState("");
+  const [quickAddLastName, setQuickAddLastName] = useState("");
+  const [quickAddEmail, setQuickAddEmail] = useState("");
+  const [quickAddPhone, setQuickAddPhone] = useState("");
+  const [isCreating, setIsCreating] = useState(false);
+
+  const fetchData = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      const typeParam = partyType === "all" ? undefined : partyType;
+      const res = await lookupParties(typeParam);
+      if (res.is_success) {
+        const data = res.result?.data || res.result || [];
+        setParties(data.map((p: any) => ({ ...p, name: p.name || p.full_name || [p.first_name, p.last_name].filter(Boolean).join(" ") })));
+      }
+    } catch {}
+    setIsLoading(false);
+  }, [partyType]);
+
+  const handleOpen = () => {
+    setSearch("");
+    setIsOpen(true);
+    fetchData();
+  };
+
+  const handleSelect = (party: any) => {
+    onChange({ id: party.id, name: party.name, code: party.code, type: party.type });
+    setIsOpen(false);
+  };
+
+  const handleClear = () => {
+    onChange(null);
+  };
+
+  const handleQuickAdd = async () => {
+    if (!quickAddFirstName.trim()) return;
+    setIsCreating(true);
+    try {
+      const payload = { 
+        first_name: quickAddFirstName.trim(),
+        last_name: quickAddLastName.trim() || undefined,
+        email: quickAddEmail.trim() || undefined,
+        primary_contact: quickAddPhone.trim() || undefined,
+        type: [partyType === "all" ? "customer" : partyType],
+        status: "active"
+      };
+      const res = await createParty(payload);
+      if (res.is_success && res.result) {
+        toast.success("Party created");
+        const party = res.result;
+        const partyName = party.name || party.full_name || [party.first_name, party.last_name].filter(Boolean).join(" ");
+        onChange({ id: party.id, name: partyName, code: party.code, type: party.type });
+        setIsQuickAddOpen(false);
+        setQuickAddFirstName("");
+        setQuickAddLastName("");
+        setQuickAddEmail("");
+        setQuickAddPhone("");
+        setIsOpen(false);
+      } else {
+        toast.error(res.message || "Failed to create");
+      }
+    } catch (e: any) {
+      toast.error(e.message || "Error creating party");
+    }
+    setIsCreating(false);
+  };
+
+  const searchLower = (search || "").toLowerCase();
+  const filtered = parties.filter((p) =>
+    (p.name || "").toLowerCase().includes(searchLower) || (p.code || "").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 ${label.toLowerCase()}s…`}
+        selectedId={value}
+        search={search}
+        onSearchChange={setSearch}
+        size="sm"
+        headerActions={
+          <button
+            type="button"
+            onClick={() => { 
+              setIsQuickAddOpen(true); 
+              setQuickAddFirstName(""); 
+              setQuickAddLastName(""); 
+              setQuickAddEmail("");
+              setQuickAddPhone("");
+            }}
+            className="p-1.5 rounded-lg bg-primary-50 text-primary-600 hover:bg-primary-100 transition-colors flex-shrink-0"
+            title={`Quick Add ${label}`}
+          >
+            <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 {label.toLowerCase()}s…</p>
+          </div>
+        ) : filtered.length === 0 ? (
+          <div className="py-12 text-center">
+            <User size={32} className="mx-auto text-gray-300 mb-2" />
+            <p className="text-sm text-gray-400">No {label.toLowerCase()}s found</p>
+          </div>
+        ) : (
+          <div className="space-y-0.5 py-1">
+            {filtered.map((party) => (
+              <PickerItem
+                key={party.id}
+                label={party.name}
+                sublabel={party.code ? `Code: ${party.code}` : undefined}
+                isSelected={String(value) === String(party.id)}
+                onClick={() => handleSelect(party)}
+              />
+            ))}
+          </div>
+        )}
+      </EntityPickerModal>
+
+      {/* Quick Add Modal */}
+      <Modal
+        isOpen={isQuickAddOpen}
+        onClose={() => setIsQuickAddOpen(false)}
+        title={`Quick Add ${label}`}
+        size="md"
+        zIndex={300}
+        backdrop="blur"
+      >
+        <div className="space-y-4">
+          <div className="grid grid-cols-2 gap-3">
+            <Input
+              label="First Name"
+              isRequired
+              placeholder={`Enter ${label.toLowerCase()} first name`}
+              value={quickAddFirstName}
+              onChange={(e) => setQuickAddFirstName(e.target.value)}
+            />
+            <Input
+              label="Last Name"
+              placeholder={`Enter ${label.toLowerCase()} last name`}
+              value={quickAddLastName}
+              onChange={(e) => setQuickAddLastName(e.target.value)}
+            />
+          </div>
+          <div className="grid grid-cols-2 gap-3">
+            <Input
+              label="Email"
+              type="email"
+              placeholder="Email address"
+              value={quickAddEmail}
+              onChange={(e) => setQuickAddEmail(e.target.value)}
+            />
+            <Input
+              label="Phone"
+              placeholder="Phone number"
+              value={quickAddPhone}
+              onChange={(e) => setQuickAddPhone(e.target.value)}
+            />
+          </div>
+          <ModalFooter>
+            <Button
+              variant="flat"
+              color="default"
+              onClick={() => setIsQuickAddOpen(false)}
+            >
+              Cancel
+            </Button>
+            <Button onClick={handleQuickAdd} isDisabled={isCreating || !quickAddFirstName.trim()}>
+              {isCreating ? "Creating…" : "Create & Select"}
+            </Button>
+          </ModalFooter>
+        </div>
+      </Modal>
+    </>
+  );
+}

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

@@ -0,0 +1,166 @@
+"use client";
+
+import React, { useState, useEffect, useCallback } from "react";
+import { EntityPickerModal } from "./EntityPickerModal";
+import { pickerSearchItems } from "@apptimate/core-lib";
+import { ChevronRight, Package, Box, Hash } from "lucide-react";
+import { useDebounce } from "use-debounce";
+import { Badge } from "../../base-components/Badge";
+
+interface TransactionItemPickerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  /** Called when a specific variant, serial, batch, or item is selected */
+  onSelect: (selection: {
+    type: "item" | "variant" | "serial" | "batch";
+    entity: any;
+    parentItem?: any;
+  }) => void;
+  warehouseId?: number;
+}
+
+export function TransactionItemPicker({
+  isOpen,
+  onClose,
+  onSelect,
+  warehouseId,
+}: TransactionItemPickerProps) {
+  const [search, setSearch] = useState("");
+  const [debouncedSearch] = useDebounce(search, 300);
+  const [items, setItems] = useState<any[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [expandedItemId, setExpandedItemId] = useState<number | null>(null);
+
+  const fetchItems = useCallback(async (query: string) => {
+    setIsLoading(true);
+    try {
+      const res = await pickerSearchItems(query, warehouseId, 50);
+      if (res.is_success) {
+        // Check for exact match
+        if (res.result?.exact_match) {
+           const exact = res.result.exact_match;
+           onSelect({
+             type: exact.type,
+             entity: exact.entity,
+             parentItem: exact.type === "item" ? exact.entity : exact.entity.item,
+           });
+           onClose();
+           return; // Stop rendering list
+        }
+        
+        setItems(res.result?.data || []);
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  }, [warehouseId, onSelect, onClose]);
+
+  // Initial fetch and on search change
+  useEffect(() => {
+    if (isOpen) {
+      fetchItems(debouncedSearch);
+    }
+  }, [isOpen, debouncedSearch, fetchItems]);
+
+  const handleSelect = (type: "item" | "variant", entity: any, parentItem?: any) => {
+    onSelect({ type, entity, parentItem: parentItem || entity });
+    onClose();
+  };
+
+  return (
+    <EntityPickerModal
+      isOpen={isOpen}
+      onClose={onClose}
+      title="Select Item"
+      search={search}
+      onSearchChange={setSearch}
+      searchPlaceholder="Search by name, SKU, barcode, batch, or serial..."
+      size="lg"
+    >
+      {isLoading ? (
+        <div className="p-4 text-center text-sm text-gray-500">Searching...</div>
+      ) : items.length === 0 ? (
+        <div className="p-8 text-center text-sm text-gray-500">No items found.</div>
+      ) : (
+        <div className="flex flex-col gap-1 py-1">
+          {items.map((item) => (
+            <div key={item.id} className="flex flex-col">
+              {/* Item Header / Row */}
+              <button
+                onClick={() => {
+                  if (item.has_variants) {
+                    setExpandedItemId(expandedItemId === item.id ? null : item.id);
+                  } else {
+                    handleSelect("item", item);
+                  }
+                }}
+                className={`flex items-center gap-3 w-full p-2.5 rounded-[8px] hover:bg-white hover:shadow-sm border border-transparent hover:border-gray-100 transition-all text-left ${expandedItemId === item.id ? 'bg-white shadow-sm border-gray-100' : ''}`}
+              >
+                <div className="w-8 h-8 rounded bg-gray-100 flex items-center justify-center shrink-0 border border-gray-200">
+                  {item.image_url ? (
+                    <img src={item.image_url} alt="" className="w-full h-full object-cover rounded" />
+                  ) : (
+                    <Package size={16} className="text-gray-400" />
+                  )}
+                </div>
+                
+                <div className="flex-1 min-w-0">
+                  <div className="text-[13px] font-semibold text-gray-900 truncate">
+                    {item.name}
+                  </div>
+                  <div className="text-[11px] text-gray-500 flex items-center gap-2">
+                    <span className="font-mono">{item.sku}</span>
+                    {item.has_variants && (
+                      <Badge variant="flat" color="default" size="small">
+                        {item.variants?.length || 0} variants
+                      </Badge>
+                    )}
+                  </div>
+                </div>
+
+                {item.has_variants ? (
+                  <ChevronRight 
+                    size={16} 
+                    className={`text-gray-400 transition-transform ${expandedItemId === item.id ? 'rotate-90' : ''}`} 
+                  />
+                ) : (
+                  <div className="text-[12px] font-medium text-gray-900">
+                    Select
+                  </div>
+                )}
+              </button>
+
+              {/* Variants Tree */}
+              {item.has_variants && expandedItemId === item.id && (
+                <div className="pl-12 pr-2 py-2 flex flex-col gap-1 border-l-2 border-gray-100 ml-6 mt-1 mb-2">
+                  {item.variants?.map((variant: any) => (
+                    <button
+                      key={variant.id}
+                      onClick={() => handleSelect("variant", variant, item)}
+                      className="flex items-center justify-between p-2 rounded-[6px] hover:bg-gray-100 transition-colors text-left group"
+                    >
+                      <div className="flex flex-col">
+                        <span className="text-[12.5px] font-medium text-gray-800">
+                          {variant.variant_name}
+                        </span>
+                        <span className="text-[11px] font-mono text-gray-500">
+                          {variant.sku}
+                        </span>
+                      </div>
+                      <span className="text-[11px] font-medium text-primary-600 opacity-0 group-hover:opacity-100 transition-opacity">
+                        Select
+                      </span>
+                    </button>
+                  ))}
+                  {(!item.variants || item.variants.length === 0) && (
+                    <div className="text-[12px] text-gray-400 italic py-1">No active variants found.</div>
+                  )}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </EntityPickerModal>
+  );
+}

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

@@ -0,0 +1,196 @@
+"use client";
+
+import React, { useState, useCallback, useEffect } from "react";
+import { Button, Input, Modal, ModalFooter } from "@apptimate/ui";
+import { Plus, Folder } from "lucide-react";
+import {
+  EntityPickerModal,
+  PickerItem,
+  PickerTrigger,
+} from "./EntityPickerModal";
+import { getUomGroups, createUomGroup } from "@apptimate/core-lib";
+import toast from "react-hot-toast";
+
+interface UomGroupPickerProps {
+  value?: number | string | null;
+  displayValue?: string | null;
+  onChange: (group: { id: number; name: string; code?: string } | null) => void;
+  label?: string;
+  placeholder?: string;
+  isRequired?: boolean;
+  pickerZIndex?: number;
+}
+
+export function UomGroupPicker({
+  value,
+  displayValue,
+  onChange,
+  label = "UoM Group",
+  placeholder = "Select Group…",
+  isRequired = false,
+  pickerZIndex,
+}: UomGroupPickerProps) {
+  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: "", code: "" });
+  const [isCreating, setIsCreating] = useState(false);
+
+  const fetchData = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      const res = await getUomGroups();
+      if (res.is_success) setGroups(res.result || []);
+    } catch {}
+    setIsLoading(false);
+  }, []);
+
+  const handleOpen = () => {
+    setSearch("");
+    setIsOpen(true);
+    fetchData();
+  };
+
+  const handleSelect = (group: any) => {
+    onChange({ id: group.id, name: group.name, code: group.code });
+    setIsOpen(false);
+  };
+
+  const handleClear = () => {
+    onChange(null);
+  };
+
+  const handleQuickAdd = async () => {
+    if (!quickAddData.name.trim()) return;
+    setIsCreating(true);
+    try {
+      const res = await createUomGroup({
+        name: quickAddData.name.trim(),
+        code: quickAddData.code.trim() || undefined,
+      });
+      if (res.is_success && res.result) {
+        toast.success("UoM Group created");
+        onChange({ id: res.result.id, name: res.result.name, code: res.result.code });
+        setIsQuickAddOpen(false);
+        setQuickAddData({ name: "", code: "" });
+        setIsOpen(false);
+      } else {
+        toast.error(res.message || "Failed to create");
+      }
+    } catch (e: any) {
+      toast.error(e.message || "Error creating UoM Group");
+    }
+    setIsCreating(false);
+  };
+
+  const searchLower = search.toLowerCase();
+  const filtered = groups.filter(
+    (g) =>
+      g.name.toLowerCase().includes(searchLower) ||
+      (g.code && g.code.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 UoM Group"
+        searchPlaceholder="Search Groups…"
+        selectedId={value}
+        search={search}
+        onSearchChange={setSearch}
+        size="sm"
+        zIndex={pickerZIndex}
+        headerActions={
+          <button
+            type="button"
+            onClick={() => { setIsQuickAddOpen(true); setQuickAddData({ name: "", code: "" }); }}
+            className="p-1.5 rounded-lg bg-primary-50 text-primary-600 hover:bg-primary-100 transition-colors flex-shrink-0"
+            title="Quick Add Group"
+          >
+            <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 Groups…</p>
+          </div>
+        ) : filtered.length === 0 ? (
+          <div className="py-12 text-center">
+            <Folder size={32} className="mx-auto text-gray-300 mb-2" />
+            <p className="text-sm text-gray-400">No groups found</p>
+          </div>
+        ) : (
+          <div className="space-y-0.5 py-1">
+            {filtered.map((group) => (
+              <PickerItem
+                key={group.id}
+                label={group.name}
+                sublabel={group.code}
+                isSelected={String(value) === String(group.id)}
+                onClick={() => handleSelect(group)}
+              />
+            ))}
+          </div>
+        )}
+      </EntityPickerModal>
+
+      <Modal
+        isOpen={isQuickAddOpen}
+        onClose={() => setIsQuickAddOpen(false)}
+        title="Quick Add UoM Group"
+        size="sm"
+        zIndex={(pickerZIndex || 200) + 100}
+      >
+        <div className="space-y-4">
+          <Input
+            label="Name"
+            isRequired
+            placeholder="e.g. Weight"
+            value={quickAddData.name}
+            onChange={(e) => setQuickAddData({ ...quickAddData, name: e.target.value })}
+          />
+          <Input
+            label="Code"
+            placeholder="e.g. WGT"
+            value={quickAddData.code}
+            onChange={(e) => setQuickAddData({ ...quickAddData, code: e.target.value })}
+            onKeyDown={(e) => { if (e.key === "Enter") handleQuickAdd(); }}
+          />
+          <ModalFooter>
+            <Button
+              variant="flat"
+              color="default"
+              onClick={() => setIsQuickAddOpen(false)}
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={handleQuickAdd}
+              isDisabled={isCreating || !quickAddData.name.trim()}
+            >
+              {isCreating ? "Creating…" : "Create & Select"}
+            </Button>
+          </ModalFooter>
+        </div>
+      </Modal>
+    </>
+  );
+}