@apptimate/ui 3.5.0 → 3.6.0

package/src/common-components/item-wizard/SkuConfigModal.tsx

@@ -0,0 +1,314 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Modal, ModalFooter, Button, Select, Input } from "@apptimate/ui";
+import { saveInventorySetting, getInventorySetting, getItemCategoryCount } from "@apptimate/core-lib";
+import { Trash2, Plus } from "lucide-react";
+import toast from "react-hot-toast";
+
+interface Props {
+  isOpen: boolean;
+  onClose: () => void;
+  onGenerate: (sku: any, newConfig?: any) => void;
+  categoryName?: string;
+  categoryId?: number;
+  brandName?: string;
+  itemName?: string;
+  itemNames?: string[];
+  itemAttributes?: Record<string, string>;
+  itemsAttributes?: Record<string, string>[];
+  isVariant?: boolean;
+}
+
+export const generateSkuPreview = (cfg: any, categoryName?: string, brandName?: string, itemName?: string, attributes?: Record<string, string>) => {
+  let result = "";
+  if (!cfg || !cfg.parts) return result;
+  
+  cfg.parts.forEach((p: any, idx: number) => {
+    let val = "";
+    if (p.type === "category") val = (categoryName || "CAT").substring(0, p.length || 3).toUpperCase();
+    if (p.type === "brand") val = (brandName || "BRN").substring(0, p.length || 3).toUpperCase();
+    if (p.type === "name") val = (itemName || "ITM").substring(0, p.length || 3).toUpperCase();
+    if (p.type === "custom") val = p.custom_value || "";
+    if (p.type === "attributes") {
+      if (attributes && Object.keys(attributes).length > 0) {
+        val = Object.values(attributes)
+          .map((v: any) => String(v).substring(0, p.length || 3).toUpperCase())
+          .join("-");
+      } else {
+        val = "ATTR";
+      }
+    }
+    
+    const isLast = (idx === cfg.parts.length - 1) && (!cfg.sequence_length || cfg.sequence_length === 0);
+    result += val + (isLast ? "" : (p.separator || ""));
+  });
+  
+  // Add sequence at the end
+  if (cfg.sequence_length > 0) {
+    result += String(cfg.current_sequence).padStart(cfg.sequence_length, "0");
+  }
+  return result;
+};
+
+export default function SkuConfigModal({ isOpen, onClose, onGenerate, categoryName, categoryId, brandName, itemName, itemNames, itemAttributes, itemsAttributes, isVariant }: Props) {
+  const [isLoading, setIsLoading] = useState(false);
+  const [config, setConfig] = useState({
+    parts: (isVariant ? [
+      { type: "category", length: 3, custom_value: "", separator: "-" },
+      { type: "name", length: 3, custom_value: "", separator: "-" },
+      { type: "attributes", length: 3, custom_value: "", separator: "" },
+    ] : [
+      { type: "category", length: 3, custom_value: "", separator: "-" },
+      { type: "name", length: 3, custom_value: "", separator: "-" },
+    ]) as any[],
+    sequence_length: 4,
+    current_sequence: 1,
+  });
+
+  useEffect(() => {
+    if (isOpen) {
+      // Reset state to default immediately when opened
+      setConfig({
+        parts: isVariant ? [
+          { type: "category", length: 3, custom_value: "", separator: "-" },
+          { type: "name", length: 3, custom_value: "", separator: "-" },
+          { type: "attributes", length: 3, custom_value: "", separator: "" },
+        ] : [
+          { type: "category", length: 3, custom_value: "", separator: "-" },
+          { type: "name", length: 3, custom_value: "", separator: "-" },
+        ] as any[],
+        sequence_length: 4,
+        current_sequence: 1,
+      });
+      
+      setIsLoading(true);
+      const settingKey = isVariant ? "sku_generation_rule_variant_v3" : "sku_generation_rule_v3";
+      
+      Promise.all([
+        getInventorySetting(settingKey).catch(() => null),
+        categoryId ? getItemCategoryCount(categoryId).catch(() => null) : Promise.resolve(null)
+      ])
+        .then(([settingRes, countRes]) => {
+          let currentSequence = 1;
+          if (countRes && countRes.is_success) {
+            currentSequence = (countRes.result?.count || 0) + 1;
+          }
+
+          if (settingRes && settingRes.is_success && settingRes.result) {
+            setConfig({
+              ...settingRes.result,
+              current_sequence: currentSequence,
+            });
+          } else {
+            setConfig((prev) => ({
+              ...prev,
+              current_sequence: currentSequence,
+            }));
+          }
+        })
+        .catch(() => {})
+        .finally(() => setIsLoading(false));
+    }
+  }, [isOpen, categoryId, isVariant]);
+
+  const generatePreview = (cfg = config) => {
+    const effectiveCfg = { ...cfg, sequence_length: isVariant ? 0 : cfg.sequence_length };
+    return generateSkuPreview(effectiveCfg, categoryName, brandName, itemName, itemAttributes || (itemsAttributes ? itemsAttributes[0] : undefined));
+  };
+
+  const handleApply = async () => {
+    setIsLoading(true);
+    try {
+      const count = itemNames ? itemNames.length : 1;
+      if (count === 0) {
+        toast.error("No items to generate SKUs for.");
+        setIsLoading(false);
+        return;
+      }
+
+      const nextConfig = { ...config };
+      const effectiveSequenceLength = isVariant ? 0 : nextConfig.sequence_length;
+      const settingKey = isVariant ? "sku_generation_rule_variant_v3" : "sku_generation_rule_v3";
+      
+      // Save config and increment sequence
+      await saveInventorySetting(settingKey, nextConfig);
+
+      if (itemNames && itemNames.length > 0) {
+        // Generate for multiple items
+        const generated = itemNames.map((name, idx) => {
+          return generateSkuPreview(
+            { ...nextConfig, sequence_length: effectiveSequenceLength, current_sequence: nextConfig.current_sequence + idx },
+            categoryName, brandName, name, itemsAttributes ? itemsAttributes[idx] : undefined
+          );
+        });
+        onGenerate(generated, { ...nextConfig, current_sequence: nextConfig.current_sequence + count });
+      } else {
+        // Generate for single item
+        const sku = generateSkuPreview(
+          { ...nextConfig, sequence_length: effectiveSequenceLength },
+          categoryName, brandName, itemName, itemAttributes
+        );
+        onGenerate(sku, { ...nextConfig, current_sequence: nextConfig.current_sequence + 1 });
+      }
+      
+      toast.success(itemNames ? `${count} SKUs generated` : "SKU generated");
+      onClose();
+    } catch (e: any) {
+      toast.error(e.message || "Failed to save SKU settings");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const updatePart = (index: number, key: string, value: any) => {
+    const newParts = [...config.parts];
+    newParts[index] = { ...newParts[index], [key]: value };
+    setConfig({ ...config, parts: newParts });
+  };
+
+  const removePart = (index: number) => {
+    const newParts = [...config.parts];
+    newParts.splice(index, 1);
+    setConfig({ ...config, parts: newParts });
+  };
+
+  const addPart = () => {
+    setConfig({
+      ...config,
+      parts: [...config.parts, { type: "custom", length: 3, custom_value: "", separator: "-" }],
+    });
+  };
+
+  const fieldOptions = [
+    { label: "Category", value: "category" },
+    { label: "Brand", value: "brand" },
+    { label: "Item Name", value: "name" },
+    ...(isVariant ? [{ label: "Variant Attributes", value: "attributes" }] : []),
+    { label: "Custom Text/Code", value: "custom" },
+  ];
+
+  const separatorOptions = [
+    { label: "Hyphen (-)", value: "-" },
+    { label: "Underscore (_)", value: "_" },
+    { label: "Slash (/)", value: "/" },
+    { label: "None", value: "" },
+  ];
+
+  if (!isOpen) return null;
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} title="Configure SKU Generation" size="lg">
+      {isLoading ? (
+        <div className="py-20 text-center text-gray-500">Loading settings...</div>
+      ) : (
+        <div className="space-y-5 animate-fade-in py-2">
+          
+          <div className="p-4 bg-gray-50/50 rounded-xl border border-gray-100">
+            <div className="flex items-center justify-between mb-3">
+              <p className="text-[11px] font-bold text-gray-400 uppercase tracking-wider">Formula Components</p>
+              <Button type="button" variant="flat" color="primary" size="small" icon={<Plus size={14} />} onClick={addPart}>
+                Add Component
+              </Button>
+            </div>
+            
+            {/* Table Header */}
+            {config.parts.length > 0 && (
+              <div className="grid grid-cols-12 gap-3 mb-2 px-2 text-[11px] font-bold text-gray-400 uppercase tracking-wider">
+                <div className="col-span-5">Component Field</div>
+                <div className="col-span-3">Letters / Text</div>
+                <div className="col-span-3">Separator</div>
+                <div className="col-span-1 text-center"></div>
+              </div>
+            )}
+
+            {/* Table Rows */}
+            <div className="space-y-2">
+              {config.parts.map((part, index) => (
+                <div key={index} className="grid grid-cols-12 gap-3 items-center bg-white p-2 rounded-lg border border-gray-200">
+                  <div className="col-span-5">
+                    <Select 
+                      options={fieldOptions}
+                      value={part.type}
+                      onChange={(e) => updatePart(index, "type", e.target.value)}
+                    />
+                  </div>
+                  <div className="col-span-3">
+                    {part.type === "custom" ? (
+                      <Input 
+                        placeholder="e.g. PRE"
+                        value={part.custom_value}
+                        onChange={(e) => updatePart(index, "custom_value", e.target.value.toUpperCase())}
+                      />
+                    ) : (
+                      <Input 
+                        type="number"
+                        placeholder="3"
+                        value={String(part.length || 3)}
+                        onChange={(e) => updatePart(index, "length", Math.max(1, parseInt(e.target.value) || 1))}
+                      />
+                    )}
+                  </div>
+                  <div className="col-span-3">
+                    {!(isVariant && index === config.parts.length - 1) && (
+                      <Select 
+                        options={separatorOptions}
+                        value={part.separator}
+                        onChange={(e) => updatePart(index, "separator", e.target.value)}
+                      />
+                    )}
+                  </div>
+                  <div className="col-span-1 flex justify-center">
+                    <button type="button" onClick={() => removePart(index)} className="text-gray-400 hover:text-red-500 transition-colors p-1.5 rounded hover:bg-red-50">
+                      <Trash2 size={16} />
+                    </button>
+                  </div>
+                </div>
+              ))}
+              
+              {config.parts.length === 0 && (
+                <div className="text-center py-6 text-sm text-gray-400 border-2 border-dashed border-gray-200 rounded-lg bg-white">
+                  No components added. Only sequence will be generated.
+                </div>
+              )}
+            </div>
+          </div>
+
+          {!isVariant && (
+            <div className="p-4 bg-gray-50/50 rounded-xl border border-gray-100">
+              <p className="text-[11px] font-bold text-gray-400 uppercase tracking-wider mb-3">Sequence Settings</p>
+              <div className="w-1/2">
+                  <Select 
+                    label="Sequence Length" 
+                    options={[
+                      { label: "None", value: "0" },
+                      { label: "2 digits (01)", value: "2" },
+                      { label: "3 digits (001)", value: "3" },
+                      { label: "4 digits (0001)", value: "4" },
+                      { label: "5 digits (00001)", value: "5" },
+                    ]}
+                    value={String(config.sequence_length)}
+                    onChange={(e) => setConfig({ ...config, sequence_length: Number(e.target.value) })}
+                  />
+              </div>
+            </div>
+          )}
+
+          <div className="p-4 bg-primary-50 rounded-xl border border-primary-100 text-center">
+            <p className="text-[11px] font-bold text-primary-400 uppercase tracking-wider mb-1">Preview</p>
+            <p className="text-lg font-mono font-bold text-primary-700">
+              {generatePreview(config)}
+            </p>
+          </div>
+
+          <ModalFooter>
+            <Button variant="flat" color="default" onClick={onClose}>Cancel</Button>
+            <Button color="primary" onClick={handleApply} isDisabled={isLoading || (config.parts.length === 0 && config.sequence_length === 0)}>
+              Apply & Generate
+            </Button>
+          </ModalFooter>
+        </div>
+      )}
+    </Modal>
+  );
+}

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

@@ -0,0 +1,194 @@
+"use client";
+
+import React, { useState, useCallback } from "react";
+import { Button, Input, Modal, ModalFooter } from "@apptimate/ui";
+import { Plus, Package } from "lucide-react";
+import {
+  EntityPickerModal,
+  PickerItem,
+  PickerTrigger,
+} from "./EntityPickerModal";
+import { lookupBrands, createBrand } from "@apptimate/core-lib";
+import toast from "react-hot-toast";
+
+/* ──────────────────────────────────────────────────────────────────────────
+ * BrandPicker
+ *
+ * Popup selector for brands with:
+ *   - Flat list (search + select)
+ *   - Quick-add new brand
+ * ────────────────────────────────────────────────────────────────────── */
+
+interface BrandPickerProps {
+  /** Currently selected brand ID */
+  value?: number | string | null;
+  /** Display name of the selected brand */
+  displayValue?: string | null;
+  /** Called when a brand is selected – receives { id, name } or null */
+  onChange: (brand: { id: number; name: string } | null) => void;
+  /** Field label */
+  label?: string;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Required field? */
+  isRequired?: boolean;
+}
+
+export function BrandPicker({
+  value,
+  displayValue,
+  onChange,
+  label = "Brand",
+  placeholder = "Select brand…",
+  isRequired = false,
+}: BrandPickerProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const [brands, setBrands] = useState<any[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  // Quick add
+  const [isQuickAddOpen, setIsQuickAddOpen] = useState(false);
+  const [quickAddName, setQuickAddName] = useState("");
+  const [isCreating, setIsCreating] = useState(false);
+
+  const fetchData = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      const res = await lookupBrands();
+      if (res.is_success) setBrands(res.result || []);
+    } catch {}
+    setIsLoading(false);
+  }, []);
+
+  const handleOpen = () => {
+    setSearch("");
+    setIsOpen(true);
+    fetchData();
+  };
+
+  const handleSelect = (brand: any) => {
+    onChange({ id: brand.id, name: brand.name });
+    setIsOpen(false);
+  };
+
+  const handleClear = () => {
+    onChange(null);
+  };
+
+  const handleQuickAdd = async () => {
+    if (!quickAddName.trim()) return;
+    setIsCreating(true);
+    try {
+      const res = await createBrand({ name: quickAddName.trim(), status: "active" });
+      if (res.is_success && res.result) {
+        toast.success("Brand 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 brand");
+    }
+    setIsCreating(false);
+  };
+
+  const searchLower = search.toLowerCase();
+  const filtered = brands.filter((b) =>
+    b.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 Brand"
+        searchPlaceholder="Search brands…"
+        selectedId={value}
+        search={search}
+        onSearchChange={setSearch}
+        size="sm"
+        headerActions={
+          <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 flex-shrink-0"
+            title="Quick Add Brand"
+          >
+            <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 brands…</p>
+          </div>
+        ) : filtered.length === 0 ? (
+          <div className="py-12 text-center">
+            <Package size={32} className="mx-auto text-gray-300 mb-2" />
+            <p className="text-sm text-gray-400">No brands found</p>
+          </div>
+        ) : (
+          <div className="space-y-0.5 py-1">
+            {filtered.map((brand) => (
+              <PickerItem
+                key={brand.id}
+                label={brand.name}
+                isSelected={String(value) === String(brand.id)}
+                onClick={() => handleSelect(brand)}
+              />
+            ))}
+          </div>
+        )}
+      </EntityPickerModal>
+
+      {/* Quick Add Modal */}
+      <Modal
+        isOpen={isQuickAddOpen}
+        onClose={() => setIsQuickAddOpen(false)}
+        title="Quick Add Brand"
+        size="sm"
+        zIndex={300}
+        backdrop="blur"
+      >
+        <div className="space-y-4">
+          <Input
+            label="Brand Name"
+            isRequired
+            placeholder="Enter brand 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>
+    </>
+  );
+}