@apptimate/ui 6.0.0 → 6.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apptimate/ui",
-  "version": "6.0.0",
+  "version": "6.2.0",
   "main": "src/index.tsx",
   "types": "src/index.tsx",
   "dependencies": {

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

@@ -22,7 +22,7 @@ export interface ItemFormData {
   category_id: string; category_name: string;
   brand_id: string; brand_name: string;
   description: string;
-  sale_price: string; cost_price: string;
+  sale_price: string; cost_price: string; min_sales_price: string;
   has_variants: boolean; tracking_type: string; valuation_method: string;
   // Page 2: Stock & Config
   uom_id: string; uom_name: string;
@@ -41,7 +41,7 @@ export interface ItemFormData {
 
 export interface VariantRow {
   id?: number; sku: string; variant_name: string; barcode: string;
-  sale_price: string; cost_price: string; attribute_values: Record<string, string>;
+  sale_price: string; cost_price: string; min_sales_price: string; attribute_values: Record<string, string>;
 }
 
 export const emptyFormData: ItemFormData = {
@@ -49,7 +49,7 @@ export const emptyFormData: ItemFormData = {
   category_id: "", category_name: "",
   brand_id: "", brand_name: "",
   description: "",
-  sale_price: "0", cost_price: "0",
+  sale_price: "0", cost_price: "0", min_sales_price: "0",
   has_variants: false, tracking_type: "none", valuation_method: "fifo",
   uom_id: "", uom_name: "", purchase_uom_id: "", sales_uom_id: "",
   purchase_uom_conversion: "1", sales_uom_conversion: "1",
@@ -473,7 +473,7 @@ export default function ItemFormWizard({
   const addVariantRow = () => {
     setFormData((p) => ({
       ...p,
-      variants: [...p.variants, { sku: "", variant_name: "", barcode: "", sale_price: "", cost_price: "", attribute_values: {} }],
+      variants: [...p.variants, { sku: "", variant_name: "", barcode: "", sale_price: "", cost_price: "", min_sales_price: "", attribute_values: {} }],
     }));
   };
 
@@ -524,6 +524,7 @@ export default function ItemFormWizard({
         barcode: "",
         sale_price: formData.sale_price || "0",
         cost_price: formData.cost_price || "0",
+        min_sales_price: formData.min_sales_price || "0",
         attribute_values: combo,
       };
     });
@@ -543,13 +544,16 @@ export default function ItemFormWizard({
       {!formData.has_variants ? (
         <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">Item Pricing</p>
-          <div className="grid grid-cols-2 gap-4">
+          <div className="grid grid-cols-3 gap-4">
             {formData.is_available_sell && (
               <Input label="Sale Price" type="number" placeholder="0.00" value={formData.sale_price} onChange={(e) => update("sale_price", e.target.value)} />
             )}
             {formData.is_available_purchase && (
               <Input label="Cost Price" type="number" placeholder="0.00" value={formData.cost_price} onChange={(e) => update("cost_price", e.target.value)} />
             )}
+            {formData.is_available_sell && (
+              <Input label="Min Sales Price" type="number" placeholder="0.00" value={formData.min_sales_price} onChange={(e) => update("min_sales_price", e.target.value)} />
+            )}
           </div>
         </div>
       ) : (
@@ -577,14 +581,24 @@ export default function ItemFormWizard({
                     </th>
                     <th className="px-4 py-3 font-medium align-top">Barcode</th>
                     {formData.is_available_sell && (
-                      <th className="px-4 py-3 font-medium w-[140px] align-top">
-                        <div className="flex flex-col items-start gap-1">
-                          <span>Sale Price</span>
-                          {formData.variants.length > 1 && (
-                            <button type="button" onClick={() => copyToAll("sale_price")} className="text-primary-600 hover:text-primary-700 font-semibold normal-case text-[11px]">Copy to All</button>
-                          )}
-                        </div>
-                      </th>
+                      <>
+                        <th className="px-4 py-3 font-medium w-[140px] align-top">
+                          <div className="flex flex-col items-start gap-1">
+                            <span>Sale Price</span>
+                            {formData.variants.length > 1 && (
+                              <button type="button" onClick={() => copyToAll("sale_price")} className="text-primary-600 hover:text-primary-700 font-semibold normal-case text-[11px]">Copy to All</button>
+                            )}
+                          </div>
+                        </th>
+                        <th className="px-4 py-3 font-medium w-[140px] align-top">
+                          <div className="flex flex-col items-start gap-1">
+                            <span>Min Sale Price</span>
+                            {formData.variants.length > 1 && (
+                              <button type="button" onClick={() => copyToAll("min_sales_price")} className="text-primary-600 hover:text-primary-700 font-semibold normal-case text-[11px]">Copy to All</button>
+                            )}
+                          </div>
+                        </th>
+                      </>
                     )}
                     {formData.is_available_purchase && (
                       <th className="px-4 py-3 font-medium w-[140px] align-top">
@@ -612,9 +626,14 @@ export default function ItemFormWizard({
                         <Input placeholder="Leave empty to auto-generate" value={v.barcode} onChange={(e) => updateVariant(idx, "barcode", e.target.value)} />
                       </td>
                       {formData.is_available_sell && (
-                        <td className="p-2 min-w-[120px] align-top">
-                          <Input type="number" placeholder="0.00" value={v.sale_price} onChange={(e) => updateVariant(idx, "sale_price", e.target.value)} />
-                        </td>
+                        <>
+                          <td className="p-2 min-w-[120px] align-top">
+                            <Input type="number" placeholder="0.00" value={v.sale_price} onChange={(e) => updateVariant(idx, "sale_price", e.target.value)} />
+                          </td>
+                          <td className="p-2 min-w-[120px] align-top">
+                            <Input type="number" placeholder="0.00" value={v.min_sales_price} onChange={(e) => updateVariant(idx, "min_sales_price", e.target.value)} />
+                          </td>
+                        </>
                       )}
                       {formData.is_available_purchase && (
                         <td className="p-2 min-w-[120px] align-top">

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

@@ -0,0 +1,86 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import ItemFormWizard from "./ItemFormWizard";
+import { emptyFormData } from "./ItemFormWizard";
+import { createItem } from "@apptimate/core-lib";
+import toast from "react-hot-toast";
+
+interface Props {
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess?: (newItem: any) => void;
+}
+
+export function QuickItemWizard({ isOpen, onClose, onSuccess }: Props) {
+  const [formData, setFormData] = useState<any>(emptyFormData);
+  const [uoms, setUoms] = useState<any[]>([]);
+
+  useEffect(() => {
+    if (isOpen) {
+      setFormData(emptyFormData);
+      fetchLookups();
+    }
+  }, [isOpen]);
+
+  const fetchLookups = async () => {
+    try {
+      const { lookupUoms } = await import("@apptimate/core-lib");
+      const uomRes = await lookupUoms();
+      if (uomRes.is_success) setUoms(uomRes.result || []);
+    } catch { }
+  };
+
+  const handleSubmit = async () => {
+    try {
+      if (!formData.name || !formData.sku || !formData.category_id || !formData.uom_id) {
+        toast.error("Please fill required fields (Name, SKU, Category, UOM)");
+        return;
+      }
+      
+      const payload: any = {
+        ...formData,
+        sale_price: parseFloat(formData.sale_price) || 0,
+        cost_price: parseFloat(formData.cost_price) || 0,
+        min_stock_level: formData.min_stock_level ? parseFloat(formData.min_stock_level) : null,
+        max_stock_level: formData.max_stock_level ? parseFloat(formData.max_stock_level) : null,
+        reorder_point: formData.reorder_point ? parseFloat(formData.reorder_point) : null,
+        reorder_qty: formData.reorder_qty ? parseFloat(formData.reorder_qty) : null,
+        lead_time_days: formData.lead_time_days ? parseInt(formData.lead_time_days) : null,
+        weight: formData.weight ? parseFloat(formData.weight) : null,
+        variants: formData.has_variants ? formData.variants.map((v: any) => ({
+          ...v, sale_price: v.sale_price ? parseFloat(v.sale_price) : null,
+          cost_price: v.cost_price ? parseFloat(v.cost_price) : null,
+        })) : undefined,
+      };
+      
+      delete payload.category_name; 
+      delete payload.brand_name;
+
+      const res = await createItem(payload);
+      if (res.is_success) {
+        toast.success(res.message || "Item created successfully");
+        onClose();
+        if (onSuccess && res.result) {
+          onSuccess(res.result);
+        }
+      } else {
+        toast.error(res.message || "Failed to create item");
+      }
+    } catch (e: any) {
+      toast.error(e.message || "An error occurred while creating item");
+    }
+  };
+
+  return (
+    <ItemFormWizard
+      isOpen={isOpen}
+      onClose={onClose}
+      formData={formData}
+      setFormData={setFormData}
+      uoms={uoms}
+      onSubmit={handleSubmit}
+      isEditing={false}
+    />
+  );
+}

package/src/common-components/print/TemplateRenderer.tsx

@@ -213,6 +213,7 @@ export function replaceTokens(text: string, entityData: any): string {
     if ((val === undefined || val === null) && path.trim() === "inventory_item_variants.sku") val = data.variants?.[0]?.sku || data.sku || data.code;
     if ((val === undefined || val === null) && path.trim() === "inventory_item_variants.barcode") val = data.variants?.[0]?.barcode || data.barcode || data.sku || data.code;
     if ((val === undefined || val === null) && (path.trim() === "inventory_item_variants.sale_price" || path.trim() === "sale_price" || path.trim() === "price")) val = data.sale_price || data.price || data.variants?.[0]?.sale_price || 0;
+    if ((val === undefined || val === null) && (path.trim() === "inventory_item_variants.min_sales_price" || path.trim() === "min_sales_price")) val = data.min_sales_price || data.variants?.[0]?.min_sales_price || 0;
     if ((val === undefined || val === null) && (path.trim() === "inventory_item_variants.cost_price" || path.trim() === "cost_price")) val = data.cost_price || data.variants?.[0]?.cost_price || 0;
     if ((val === undefined || val === null) && path.trim() === "inventory_batches.batch_number") val = data.batch_number || data.batch?.batch_number || "";
     if ((val === undefined || val === null) && path.trim() === "inventory_batches.selling_price") val = data.price || data.selling_price || data.batch?.selling_price || data.sale_price || 0;
@@ -347,6 +348,15 @@ function LineRenderer({ line, defaultFont, defaultColor, defaultFontSize, entity
     wordBreak: "break-word" as const,
   };
 
+  const ec = typeof line.extra_config === 'string' ? JSON.parse(line.extra_config || '{}') : (line.extra_config || {});
+  
+  if (ec.truncate_single_line) {
+    baseStyle.whiteSpace = "nowrap";
+    baseStyle.overflow = "hidden";
+    baseStyle.textOverflow = "ellipsis";
+    baseStyle.display = "block";
+  }
+
   if (line.border_style && line.border_style !== "none") {
     const bw = `${line.border_width || 1}px`;
     const bc = line.border_color || "#000000";
@@ -360,7 +370,11 @@ function LineRenderer({ line, defaultFont, defaultColor, defaultFontSize, entity
 
   // Text
   if (line.line_type === "text") {
-    return <div style={baseStyle}>{replaceTokens(line.static_text || "", entityData).trim().split("\n").map((t, i) => <div key={i}>{t || <br />}</div>)}</div>;
+    const content = replaceTokens(line.static_text || "", entityData).trim();
+    if (ec.truncate_single_line) {
+      return <div style={baseStyle}>{content}</div>;
+    }
+    return <div style={baseStyle}>{content.split("\n").map((t, i) => <div key={i}>{t || <br />}</div>)}</div>;
   }
 
   // Token (legacy)
@@ -405,11 +419,14 @@ function LineRenderer({ line, defaultFont, defaultColor, defaultFontSize, entity
     const childCols = line.extra_config?.columns || line.columns || [];
     return (
       <div style={{ display: "flex", marginTop: `${line.spacing_before || 0}px`, marginBottom: `${line.spacing_after || 0}px`, backgroundColor: line.background_color || "transparent", padding: line.padding || "0", borderRadius: line.border_radius || "0" }}>
-        {childCols.map((col: any, i: number) => (
-          <div key={i} style={{ width: `${col.width_percent || 50}%`, fontFamily: `${col.font_family || line.font_family || defaultFont}, sans-serif`, fontSize: `${col.font_size ? Number(col.font_size) : (line.font_size ? Number(line.font_size) : defaultFontSize)}px`, lineHeight: 1.15, fontWeight: col.font_weight === "bold" ? 700 : col.font_weight === "light" ? 300 : (line.font_weight === "bold" ? 700 : line.font_weight === "light" ? 300 : (isA4 === false ? 600 : 400)), color: col.font_color || line.font_color || defaultColor, textAlign: (col.text_align || col.align || "left") as any, fontStyle: col.is_italic ? "italic" : "normal", textDecoration: col.is_underline ? "underline" : "none", textTransform: (col.text_transform || "none") as any, backgroundColor: col.background_color || "transparent", padding: col.padding || "0", whiteSpace: "pre-wrap" }}>
-            {replaceTokens(col.content || col.static_text || "", entityData).split("\n").map((t, ii) => <div key={ii}>{t || <br />}</div>)}
-          </div>
-        ))}
+        {childCols.map((col: any, i: number) => {
+          const isTruncated = col.truncate_single_line || ec.truncate_single_line;
+          return (
+            <div key={i} style={{ width: `${col.width_percent || 50}%`, fontFamily: `${col.font_family || line.font_family || defaultFont}, sans-serif`, fontSize: `${col.font_size ? Number(col.font_size) : (line.font_size ? Number(line.font_size) : defaultFontSize)}px`, lineHeight: 1.15, fontWeight: col.font_weight === "bold" ? 700 : col.font_weight === "light" ? 300 : (line.font_weight === "bold" ? 700 : line.font_weight === "light" ? 300 : (isA4 === false ? 600 : 400)), color: col.font_color || line.font_color || defaultColor, textAlign: (col.text_align || col.align || "left") as any, fontStyle: col.is_italic ? "italic" : "normal", textDecoration: col.is_underline ? "underline" : "none", textTransform: (col.text_transform || "none") as any, backgroundColor: col.background_color || "transparent", padding: col.padding || "0", whiteSpace: isTruncated ? "nowrap" : "pre-wrap", overflow: isTruncated ? "hidden" : "visible", textOverflow: isTruncated ? "ellipsis" : "clip", display: "block" }}>
+              {isTruncated ? replaceTokens(col.content || col.static_text || "", entityData) : replaceTokens(col.content || col.static_text || "", entityData).split("\n").map((t, ii) => <div key={ii}>{t || <br />}</div>)}
+            </div>
+          );
+        })}
       </div>
     );
   }
@@ -560,6 +577,10 @@ function LineRenderer({ line, defaultFont, defaultColor, defaultFontSize, entity
     let num = 0;
     if (path === 'inventory_item_variants.cost_price' || path === 'cost_price') {
       num = Number(entityData.cost_price || entityData.variants?.[0]?.cost_price || 0);
+    } else if (path === 'inventory_item_variants.min_sales_price' || path === 'min_sales_price') {
+      num = Number(entityData.min_sales_price || entityData.variants?.[0]?.min_sales_price || 0);
+    } else if (path === 'inventory_item_variants.sale_price' || path === 'sale_price' || path === 'price') {
+      num = Number(entityData.sale_price || entityData.price || entityData.variants?.[0]?.sale_price || 0);
     } else {
       let val = entityData;
       for (const k of path.split(".")) {

package/src/common-components/transaction/ProductSelectionPanel.tsx

@@ -3,7 +3,7 @@
 import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import { cn } from '@apptimate/core-lib';
 import {
-  Search, ScanBarcode, X, ShoppingCart, Package, Loader2,
+  Search, ScanBarcode, X, ShoppingCart, Package, Loader2, Plus,
   Trash2, ChevronDown, ChevronRight, AlertTriangle, Tag
 } from 'lucide-react';
 import { Badge } from '../../base-components/Badge';
@@ -24,6 +24,7 @@ interface ProductSelectionPanelProps {
   onUpdateLine: (uid: string, updates: Partial<TransactionLineItem>) => void;
   onRemoveLine: (uid: string) => void;
   onToggleExpand: (uid: string) => void;
+  onAddNewItem?: (callbacks: { setItemSearch: (value: string) => void }) => void;
 }
 
 export function ProductSelectionPanel({
@@ -35,6 +36,7 @@ export function ProductSelectionPanel({
   onUpdateLine,
   onRemoveLine,
   onToggleExpand,
+  onAddNewItem,
 }: ProductSelectionPanelProps) {
   const [searchValue, setSearchValue] = useState('');
   const [searchResults, setSearchResults] = useState<TransactionItem[]>([]);
@@ -400,18 +402,22 @@ export function ProductSelectionPanel({
                 </button>
               }
             />
-            <div className="w-[1px] h-5 bg-border-subtle mx-1" />
-            <button
-              type="button"
-              onClick={() => inputRef.current?.focus()}
-              title="Click to focus input for barcode scanning"
-              className="flex items-center justify-center outline-none"
-            >
-              <ScanBarcode 
-                size={18} 
-                className="text-foreground-disabled shrink-0 cursor-pointer hover:text-primary transition-colors" 
-              />
-            </button>
+            {onAddNewItem && (
+              <>
+                <div className="w-[1px] h-5 bg-border-subtle mx-1" />
+                <button
+                  type="button"
+                  onClick={() => onAddNewItem({ setItemSearch: handleSearch })}
+                  title="Create new item"
+                  className="flex items-center justify-center outline-none mr-1"
+                >
+                  <Plus 
+                    size={18} 
+                    className="text-foreground-disabled shrink-0 cursor-pointer hover:text-primary transition-colors" 
+                  />
+                </button>
+              </>
+            )}
           </div>
         </div>
 

package/src/common-components/transaction/ProductTransactionScreen.tsx

@@ -30,6 +30,7 @@ export function ProductTransactionScreen({
   renderExtraMeta,
   fetchChequeLeaves,
   initialData,
+  onAddNewItem,
 }: ProductTransactionScreenProps) {
   // ── State ──
   const [lineItems, setLineItems] = useState<TransactionLineItem[]>([]);
@@ -469,6 +470,7 @@ export function ProductTransactionScreen({
             onUpdateLine={handleUpdateLine}
             onRemoveLine={handleRemoveLine}
             onToggleExpand={handleToggleExpand}
+            onAddNewItem={onAddNewItem}
           />
         </div>
 

package/src/common-components/transaction/types.ts

@@ -316,6 +316,8 @@ export interface ProductTransactionScreenProps {
   fetchChequeLeaves?: (query: string, page: number) => Promise<{ is_success: boolean; result?: any[] }>;
   /** Initial data for populating the transaction screen (e.g., from a PO) */
   initialData?: any;
+  /** Optional callback to create a new item directly from the search bar */
+  onAddNewItem?: (callbacks: { setItemSearch: (value: string) => void }) => void;
 }
 
 export interface TransactionPayload {

package/src/index.tsx

@@ -54,6 +54,7 @@ export * from './common-components/pickers/WarehousePicker';
 // Item Wizard
 export { default as ItemFormWizard } from './common-components/item-wizard/ItemFormWizard';
 export * from './common-components/item-wizard/ItemFormWizard';
+export * from './common-components/item-wizard/QuickItemWizard';
 export { default as SkuConfigModal } from './common-components/item-wizard/SkuConfigModal';
 export * from './common-components/item-wizard/SkuConfigModal';