@apptimate/ui 3.5.0 → 3.7.0

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

@@ -0,0 +1,342 @@
+"use client";
+
+import React, { useState, useCallback, useEffect } from "react";
+import { Button, Input, Modal, ModalFooter } from "@apptimate/ui";
+import { Plus, List, GitBranch, ChevronRight, ChevronDown, FolderOpen } from "lucide-react";
+import {
+  EntityPickerModal,
+  PickerItem,
+  PickerTrigger,
+} from "./EntityPickerModal";
+import { lookupCategories, getCategoryTree, createCategory } from "@apptimate/core-lib";
+import toast from "react-hot-toast";
+
+/* ──────────────────────────────────────────────────────────────────────────
+ * CategoryPicker
+ *
+ * Popup selector for categories with:
+ *   - Tree view (default) / flat list view toggle
+ *   - Inline search
+ *   - Quick-add new category
+ * ────────────────────────────────────────────────────────────────────── */
+
+interface CategoryPickerProps {
+  /** Currently selected category ID */
+  value?: number | string | null;
+  /** Display name of the selected category */
+  displayValue?: string | null;
+  /** Called when a category is selected – receives { id, name } */
+  onChange: (category: { id: number; name: string } | null) => void;
+  /** Field label */
+  label?: string;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Required field? */
+  isRequired?: boolean;
+  /** Category ID to exclude (e.g. the current category in edit mode) */
+  excludeId?: number | null;
+}
+
+export function CategoryPicker({
+  value,
+  displayValue,
+  onChange,
+  label = "Category",
+  placeholder = "Select category…",
+  isRequired = false,
+  excludeId = null,
+}: CategoryPickerProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const [viewMode, setViewMode] = useState<"tree" | "list">("tree");
+  const [treeData, setTreeData] = useState<any[]>([]);
+  const [flatData, setFlatData] = useState<any[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  // Quick add
+  const [isQuickAddOpen, setIsQuickAddOpen] = useState(false);
+  const [quickAddName, setQuickAddName] = useState("");
+  const [isCreating, setIsCreating] = useState(false);
+
+  // Expanded tree nodes
+  const [expandedIds, setExpandedIds] = useState<Set<number>>(new Set());
+
+  const fetchData = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      const [treeRes, flatRes] = await Promise.all([
+        getCategoryTree(),
+        lookupCategories(),
+      ]);
+      if (treeRes.is_success) setTreeData(treeRes.result || []);
+      if (flatRes.is_success) setFlatData(flatRes.result || []);
+
+      // Auto-expand all in tree on load
+      if (treeRes.is_success && treeRes.result) {
+        const allIds = new Set<number>();
+        const collectIds = (nodes: any[]) => {
+          nodes.forEach((n) => {
+            if (n.children_tree?.length > 0) {
+              allIds.add(n.id);
+              collectIds(n.children_tree);
+            }
+          });
+        };
+        collectIds(treeRes.result);
+        setExpandedIds(allIds);
+      }
+    } catch {}
+    setIsLoading(false);
+  }, []);
+
+  const handleOpen = () => {
+    setSearch("");
+    setIsOpen(true);
+    fetchData();
+  };
+
+  const handleSelect = (cat: any) => {
+    onChange({ id: cat.id, name: cat.name });
+    setIsOpen(false);
+  };
+
+  const handleClear = () => {
+    onChange(null);
+  };
+
+  const toggleExpand = (id: number) => {
+    setExpandedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+
+  // Quick add
+  const handleQuickAdd = async () => {
+    if (!quickAddName.trim()) return;
+    setIsCreating(true);
+    try {
+      const res = await createCategory({ name: quickAddName.trim(), status: "active" });
+      if (res.is_success && res.result) {
+        toast.success("Category created");
+        onChange({ id: res.result.id, name: res.result.name });
+        setIsQuickAddOpen(false);
+        setQuickAddName("");
+        setIsOpen(false);
+      } else {
+        toast.error(res.message || "Failed to create");
+      }
+    } catch (e: any) {
+      toast.error(e.message || "Error creating category");
+    }
+    setIsCreating(false);
+  };
+
+  // ── Filter helpers ──
+
+  const searchLower = search.toLowerCase();
+
+  const filterFlat = (items: any[]) =>
+    items.filter(
+      (c) =>
+        c.name.toLowerCase().includes(searchLower) &&
+        c.id !== excludeId
+    );
+
+  const filterTree = (nodes: any[]): any[] =>
+    nodes
+      .filter((n) => n.id !== excludeId)
+      .map((n) => ({
+        ...n,
+        children_tree: filterTree(n.children_tree || []),
+      }))
+      .filter(
+        (n) =>
+          n.name.toLowerCase().includes(searchLower) ||
+          n.children_tree.length > 0
+      );
+
+  // ── Tree node renderer ──
+
+  const renderTreeNode = (node: any, depth: number = 0): React.ReactNode => {
+    const hasChildren = node.children_tree && node.children_tree.length > 0;
+    const isExpanded = expandedIds.has(node.id);
+
+    return (
+      <div key={node.id}>
+        <div className="flex items-center">
+          {hasChildren ? (
+            <button
+              type="button"
+              onClick={(e) => { e.stopPropagation(); toggleExpand(node.id); }}
+              className="p-1 rounded hover:bg-gray-100 text-gray-400 flex-shrink-0"
+              style={{ marginLeft: `${depth * 20}px` }}
+            >
+              {isExpanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+            </button>
+          ) : (
+            <div style={{ marginLeft: `${depth * 20 + 22}px` }} />
+          )}
+          <div className="flex-1">
+            <PickerItem
+              label={node.name}
+              sublabel={node.code || undefined}
+              isSelected={String(value) === String(node.id)}
+              onClick={() => handleSelect(node)}
+              trailing={
+                hasChildren ? (
+                  <span className="text-[11px] text-gray-400 font-medium">
+                    {node.children_tree.length}
+                  </span>
+                ) : undefined
+              }
+            />
+          </div>
+        </div>
+        {hasChildren && isExpanded && (
+          <div>
+            {node.children_tree.map((child: any) => renderTreeNode(child, depth + 1))}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  const filteredTree = search ? filterTree(treeData) : treeData;
+  const filteredFlat = filterFlat(flatData);
+
+  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 Category"
+        searchPlaceholder="Search categories…"
+        selectedId={value}
+        search={search}
+        onSearchChange={setSearch}
+        size="md"
+        headerActions={
+          <div className="flex items-center gap-1 flex-shrink-0">
+            {/* View toggle */}
+            <div className="flex items-center bg-gray-100 rounded-lg p-0.5">
+              <button
+                type="button"
+                onClick={() => setViewMode("tree")}
+                className={`p-1.5 rounded-md transition-all ${
+                  viewMode === "tree"
+                    ? "bg-white text-gray-800 shadow-sm"
+                    : "text-gray-400 hover:text-gray-600"
+                }`}
+                title="Tree View"
+              >
+                <GitBranch size={15} />
+              </button>
+              <button
+                type="button"
+                onClick={() => setViewMode("list")}
+                className={`p-1.5 rounded-md transition-all ${
+                  viewMode === "list"
+                    ? "bg-white text-gray-800 shadow-sm"
+                    : "text-gray-400 hover:text-gray-600"
+                }`}
+                title="List View"
+              >
+                <List size={15} />
+              </button>
+            </div>
+            {/* Quick add */}
+            <button
+              type="button"
+              onClick={() => { setIsQuickAddOpen(true); setQuickAddName(""); }}
+              className="p-1.5 rounded-lg bg-primary-50 text-primary-600 hover:bg-primary-100 transition-colors"
+              title="Quick Add Category"
+            >
+              <Plus size={16} strokeWidth={2.5} />
+            </button>
+          </div>
+        }
+      >
+        {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 categories…</p>
+          </div>
+        ) : viewMode === "tree" ? (
+          filteredTree.length === 0 ? (
+            <div className="py-12 text-center">
+              <FolderOpen size={32} className="mx-auto text-gray-300 mb-2" />
+              <p className="text-sm text-gray-400">No categories found</p>
+            </div>
+          ) : (
+            <div className="space-y-0.5 py-1">
+              {filteredTree.map((node) => renderTreeNode(node, 0))}
+            </div>
+          )
+        ) : filteredFlat.length === 0 ? (
+          <div className="py-12 text-center">
+            <FolderOpen size={32} className="mx-auto text-gray-300 mb-2" />
+            <p className="text-sm text-gray-400">No categories found</p>
+          </div>
+        ) : (
+          <div className="space-y-0.5 py-1">
+            {filteredFlat.map((cat) => (
+              <PickerItem
+                key={cat.id}
+                label={cat.name}
+                sublabel={cat.parent_id ? `Child of #${cat.parent_id}` : "Root"}
+                isSelected={String(value) === String(cat.id)}
+                onClick={() => handleSelect(cat)}
+              />
+            ))}
+          </div>
+        )}
+      </EntityPickerModal>
+
+      {/* Quick Add Modal */}
+      <Modal
+        isOpen={isQuickAddOpen}
+        onClose={() => setIsQuickAddOpen(false)}
+        title="Quick Add Category"
+        size="sm"
+        zIndex={300}
+        backdrop="blur"
+      >
+        <div className="space-y-4">
+          <Input
+            label="Category Name"
+            isRequired
+            placeholder="Enter category name"
+            value={quickAddName}
+            onChange={(e) => setQuickAddName(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 || !quickAddName.trim()}>
+              {isCreating ? "Creating…" : "Create & Select"}
+            </Button>
+          </ModalFooter>
+        </div>
+      </Modal>
+    </>
+  );
+}

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

@@ -0,0 +1,221 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, ReactNode } from "react";
+import { Modal, Input, Button } from "@apptimate/ui";
+import { Search, Plus, X, Check } from "lucide-react";
+
+/* ──────────────────────────────────────────────────────────────────────────
+ * EntityPickerModal
+ * 
+ * A generalized popup-selector for entities. Shows a modal with:
+ *   - Search bar
+ *   - Configurable header actions (view toggles, quick-add button)
+ *   - Scrollable list of selectable items rendered via a render prop
+ *   - The selected item is highlighted and returned via onSelect
+ *
+ * Each concrete picker (CategoryPicker, BrandPicker, WarehousePicker, …)
+ * wraps this component and supplies its own data-fetching, rendering,
+ * and quick-add logic.
+ * ────────────────────────────────────────────────────────────────────── */
+
+export interface EntityPickerModalProps {
+  /** Modal visible state */
+  isOpen: boolean;
+  /** Called when user dismisses without selecting */
+  onClose: () => void;
+  /** Called with the selected entity data when user clicks an item */
+  onSelect?: (entity: any) => void;
+  /** Title shown in the modal header */
+  title: string;
+  /** Current search query – managed internally if not provided */
+  searchPlaceholder?: string;
+  /** Currently selected entity ID (for highlighting) */
+  selectedId?: number | string | null;
+  /** Extra header actions – view toggles, quick-add, etc. */
+  headerActions?: ReactNode;
+  /** The scrollable body content */
+  children: ReactNode;
+  /** Search value */
+  search: string;
+  /** Search change handler */
+  onSearchChange: (value: string) => void;
+  /** Show the search bar – default true */
+  showSearch?: boolean;
+  /** Modal size */
+  size?: "sm" | "md" | "lg" | "xl" | "full";
+  /** Custom zIndex */
+  zIndex?: number;
+}
+
+export function EntityPickerModal({
+  isOpen,
+  onClose,
+  title,
+  searchPlaceholder = "Search…",
+  headerActions,
+  children,
+  search,
+  onSearchChange,
+  showSearch = true,
+  size = "md",
+  zIndex = 200,
+}: EntityPickerModalProps) {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} title={title} size={size} zIndex={zIndex} backdrop="blur">
+      <div className="flex flex-col gap-3 -mt-1">
+        {/* Search + actions row */}
+        <div className="flex items-center gap-2">
+          {showSearch && (
+            <div className="relative flex-1">
+              <Search
+                size={16}
+                className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none"
+              />
+              <input
+                type="text"
+                placeholder={searchPlaceholder}
+                value={search}
+                onChange={(e) => onSearchChange(e.target.value)}
+                className="w-full pl-9 pr-8 py-2.5 bg-surface-0 border-[1.5px] border-border-subtle rounded-[10px] text-[13.5px] text-foreground-1 outline-none transition-all hover:border-gray-300 focus:border-gray-300 focus:bg-surface-1 placeholder:text-foreground-disabled"
+                autoFocus
+              />
+              {search && (
+                <button
+                  onClick={() => onSearchChange("")}
+                  className="absolute right-2.5 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
+                >
+                  <X size={14} />
+                </button>
+              )}
+            </div>
+          )}
+          {headerActions}
+        </div>
+
+        {/* Scrollable list body */}
+        <div className="max-h-[400px] overflow-y-auto bg-gray-50/80 -mx-6 px-4 py-2 border-t border-gray-100">
+          {children}
+        </div>
+      </div>
+    </Modal>
+  );
+}
+
+/* ──────────────────────────────────────────────────────────────────────────
+ * PickerItem  – a single clickable row inside the picker
+ * ────────────────────────────────────────────────────────────────────── */
+
+export interface PickerItemProps {
+  label: string;
+  sublabel?: string;
+  isSelected?: boolean;
+  onClick: () => void;
+  indent?: number;
+  trailing?: ReactNode;
+}
+
+export function PickerItem({
+  label,
+  sublabel,
+  isSelected = false,
+  onClick,
+  indent = 0,
+  trailing,
+}: PickerItemProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`
+        w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left transition-all duration-100 group
+        ${isSelected
+          ? "bg-primary-50 border border-primary-200 text-primary-700"
+          : "hover:bg-gray-50 border border-transparent text-gray-700"
+        }
+      `}
+      style={{ paddingLeft: `${12 + indent * 20}px` }}
+    >
+      {/* Selection indicator */}
+      <div
+        className={`
+          flex-shrink-0 h-5 w-5 rounded-full border-2 flex items-center justify-center transition-all
+          ${isSelected
+            ? "border-primary-500 bg-primary-500"
+            : "border-gray-300 group-hover:border-gray-400"
+          }
+        `}
+      >
+        {isSelected && <Check size={12} className="text-white" strokeWidth={3} />}
+      </div>
+
+      <div className="flex-1 min-w-0">
+        <p className={`text-sm font-semibold truncate ${isSelected ? "text-primary-700" : "text-gray-800"}`}>
+          {label}
+        </p>
+        {sublabel && (
+          <p className="text-[11px] text-gray-400 truncate mt-0.5">{sublabel}</p>
+        )}
+      </div>
+
+      {trailing}
+    </button>
+  );
+}
+
+/* ──────────────────────────────────────────────────────────────────────────
+ * PickerTrigger  – the clickable field that opens the picker modal
+ * ────────────────────────────────────────────────────────────────────── */
+
+export interface PickerTriggerProps {
+  label: string;
+  value?: string | null;
+  placeholder?: string;
+  isRequired?: boolean;
+  onClick: () => void;
+  onClear?: () => void;
+}
+
+export function PickerTrigger({
+  label,
+  value,
+  placeholder = "Select…",
+  isRequired = false,
+  onClick,
+  onClear,
+}: PickerTriggerProps) {
+  return (
+    <div className="flex flex-col gap-1.5 w-full">
+      <label className="text-[11px] font-bold text-foreground-subtle uppercase tracking-wider">
+        {label}
+        {isRequired && <span className="text-danger-alt ml-0.5">*</span>}
+      </label>
+      <button
+        type="button"
+        onClick={onClick}
+        className={`
+          w-full flex items-center justify-between px-3.5 py-2.5 bg-surface-0 border-[1.5px] rounded-[10px] text-[13.5px] text-left transition-all
+          ${value
+            ? "border-border-subtle text-foreground-1"
+            : "border-border-subtle text-foreground-disabled"
+          }
+          hover:border-gray-300 focus:outline-none focus:border-gray-300 focus:bg-surface-1
+        `}
+      >
+        <span className={`truncate ${value ? "font-medium" : ""}`}>
+          {value || placeholder}
+        </span>
+        <div className="flex items-center gap-1 flex-shrink-0">
+          {value && onClear && (
+            <span
+              onClick={(e) => { e.stopPropagation(); onClear(); }}
+              className="p-0.5 rounded hover:bg-gray-100 text-gray-400 hover:text-gray-600"
+            >
+              <X size={14} />
+            </span>
+          )}
+          <Search size={14} className="text-gray-400" />
+        </div>
+      </button>
+    </div>
+  );
+}