@apptimate/ui 4.8.0 → 5.0.0

package/package.json

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

package/src/base-components/Dropdown.tsx

@@ -17,12 +17,37 @@ interface DropdownProps {
 export function Dropdown({ trigger, children, align = 'left', valign = 'bottom', className, contentClassName, closeOnContentClick = true }: DropdownProps) {
     const [isOpen, setIsOpen] = useState(false);
     const [coords, setCoords] = useState({ top: 0, bottom: 0, left: 0, right: 0 });
+    const [actualValign, setActualValign] = useState(valign);
+    const [actualAlign, setActualAlign] = useState(align);
     const dropdownRef = useRef<HTMLDivElement>(null);
     const contentRef = useRef<HTMLDivElement>(null);
 
     const updatePosition = useCallback(() => {
         if (dropdownRef.current) {
             const rect = dropdownRef.current.getBoundingClientRect();
+            
+            let newValign = valign;
+            const spaceBelow = window.innerHeight - rect.bottom;
+            const spaceAbove = rect.top;
+
+            if (valign === 'bottom' && spaceBelow < 250 && spaceAbove > spaceBelow) {
+                newValign = 'top';
+            } else if (valign === 'top' && spaceAbove < 250 && spaceBelow > spaceAbove) {
+                newValign = 'bottom';
+            }
+            
+            let newAlign = align;
+            const spaceRight = window.innerWidth - rect.right;
+            const spaceLeft = rect.left;
+            
+            if (align === 'left' && spaceRight < 180 && spaceLeft > spaceRight) {
+                newAlign = 'right';
+            } else if (align === 'right' && spaceLeft < 180 && spaceRight > spaceLeft) {
+                newAlign = 'left';
+            }
+            
+            setActualValign(newValign);
+            setActualAlign(newAlign);
             setCoords({
                 top: rect.top + window.scrollY,
                 bottom: rect.bottom + window.scrollY,
@@ -89,15 +114,15 @@ export function Dropdown({ trigger, children, align = 'left', valign = 'bottom',
                     ref={contentRef}
                     style={{
                         position: 'absolute',
-                        ...(valign === 'bottom' 
+                        ...(actualValign === 'bottom' 
                             ? { top: `${coords.bottom}px` } 
                             : { bottom: `${window.innerHeight - coords.top}px` }
                         ),
-                        ...(align === 'left' ? { left: `${coords.left}px` } : { right: `${coords.right}px` })
+                        ...(actualAlign === 'left' ? { left: `${coords.left}px` } : { right: `${coords.right}px` })
                     }}
                     className={cn(
-                        "z-[9999] min-w-[160px] rounded-[10px] bg-white border border-gray-200 shadow-[0_8px_30px_rgb(0,0,0,0.12)] p-1.5 animate-in fade-in zoom-in-95 duration-200",
-                        valign === 'bottom' ? "mt-1.5" : "mb-1.5",
+                        "z-[9999] flex flex-col min-w-[160px] rounded-[10px] bg-white border border-gray-200 shadow-[0_8px_30px_rgb(0,0,0,0.12)] p-1.5 animate-in fade-in zoom-in-95 duration-200",
+                        actualValign === 'bottom' ? "mt-1.5" : "mb-1.5",
                         contentClassName
                     )}
                     onClick={closeOnContentClick ? closeDropdown : undefined}

package/src/common-components/pickers/modals/SerialSelectionModal.tsx

@@ -14,7 +14,7 @@ interface SerialSelectionModalProps {
   allowCreate?: boolean;
   initialSerials?: string[];
   warehouseId?: number;
-  onConfirm: (serials: string[]) => void;
+  onConfirm: (serials: string[], serialObjects?: {id: number, serial_number: string}[]) => void;
 }
 
 export function SerialSelectionModal({
@@ -119,7 +119,15 @@ export function SerialSelectionModal({
       toast.error("Please add at least one serial number.");
       return;
     }
-    onConfirm(serials);
+    
+    if (!allowCreate) {
+      const serialObjects = availableSerials
+        .filter(s => serials.includes(s.serial_number))
+        .map(s => ({ id: s.id, serial_number: s.serial_number }));
+      onConfirm(serials, serialObjects);
+    } else {
+      onConfirm(serials);
+    }
   };
 
   // Display available serials from backend

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

@@ -20,7 +20,7 @@ interface ProductSelectionPanelProps {
   warehouseId?: number;
   partyId?: number | null;
   lineItems: TransactionLineItem[];
-  onAddItem: (item: TransactionItem, variant?: any, extraData?: { quantity?: number; batches?: any[]; serial_numbers?: string[] }) => void;
+  onAddItem: (item: TransactionItem, variant?: any, extraData?: { quantity?: number; batches?: any[]; serial_numbers?: string[]; serial_number_objects?: {id: number, serial_number: string}[] }) => void;
   onUpdateLine: (uid: string, updates: Partial<TransactionLineItem>) => void;
   onRemoveLine: (uid: string) => void;
   onToggleExpand: (uid: string) => void;
@@ -96,7 +96,7 @@ export function ProductSelectionPanel({
                 onAddItem(entity.item, entity.variant, { serial_numbers: [entity.serial_number], quantity: 1 });
               } else if (matchType === 'batch') {
                 const batchVariant = entity.variant || (entity.variant_id && entity.item?.variants ? entity.item.variants.find((v: any) => v.id === entity.variant_id) : null);
-                if (['sales', 'quotation'].includes(config.type)) {
+                if (['sales', 'quotation', 'pos'].includes(config.type)) {
                   onAddItem(entity.item, batchVariant, { 
                     batches: [{ batch_id: entity.id, batch_number: entity.batch_number, selling_price: entity.selling_price, quantity: 1 }], 
                     quantity: 1 
@@ -132,7 +132,7 @@ export function ProductSelectionPanel({
       setShowResults(false);
 
       if (!config.disableTrackingSelection && item.tracking_type === 'batch') {
-        if (['sales', 'quotation'].includes(config.type)) {
+        if (['sales', 'quotation', 'pos'].includes(config.type)) {
           onAddItem(item, variant);
         } else {
           setActiveBatchItem({ item, variant });
@@ -167,10 +167,10 @@ export function ProductSelectionPanel({
     }
   };
 
-  const handleSerialConfirm = (serials: string[]) => {
+  const handleSerialConfirm = (serials: string[], serialObjects?: {id: number, serial_number: string}[]) => {
     if (!activeSerialItem) return;
 
-    onAddItem(activeSerialItem.item, activeSerialItem.variant, { serial_numbers: serials, quantity: serials.length });
+    onAddItem(activeSerialItem.item, activeSerialItem.variant, { serial_numbers: serials, serial_number_objects: serialObjects, quantity: serials.length });
     setActiveSerialItem(null);
   };
 
@@ -582,7 +582,7 @@ export function ProductSelectionPanel({
             </THeader>
             <TBody>
               {lineItems.map((line) => {
-                const isBatchPending = ['sales', 'quotation'].includes(config.type) && line.item.tracking_type === 'batch' && (!line.batches || line.batches.length === 0);
+                const isBatchPending = ['sales', 'quotation', 'pos'].includes(config.type) && line.item.tracking_type === 'batch' && (!line.batches || line.batches.length === 0);
                 return (
                 <TRow key={line.uid}>
                   <TCell label="Item" className="py-2.5">
@@ -604,14 +604,20 @@ export function ProductSelectionPanel({
                           )}
                         </span>
                         <span className="text-[11px] text-foreground-subtle font-mono mt-0.5 break-words">
-                          {line.item.has_variants && line.variant_id && line.item.variants?.find(v => v.id === line.variant_id)
-                            ? `${line.item.variants.find(v => v.id === line.variant_id)?.variant_name} • ${line.item.variants.find(v => v.id === line.variant_id)?.sku}`
-                            : line.item.sku}
+                          {(() => {
+                            if (line.item.has_variants && line.variant_id) {
+                              const variant = line.variant || line.item.variants?.find(v => v.id === line.variant_id);
+                              if (variant) {
+                                return `${variant.variant_name} • ${variant.sku}`;
+                              }
+                            }
+                            return line.item.sku || '';
+                          })()}
                         </span>
-                        {((!config.disableTrackingSelection && (line.item.tracking_type === 'batch' || line.item.tracking_type === 'serial')) || (line.item.tracking_type === 'batch' && ['sales', 'quotation'].includes(config.type))) && (
+                        {((!config.disableTrackingSelection && (line.item.tracking_type === 'batch' || line.item.tracking_type === 'serial')) || (line.item.tracking_type === 'batch' && ['sales', 'quotation', 'pos'].includes(config.type))) && (
                           <div className="flex flex-wrap gap-1 mt-1.5">
                             {line.item.tracking_type === 'batch' && (() => {
-                              if (['sales', 'quotation'].includes(config.type)) {
+                              if (['sales', 'quotation', 'pos'].includes(config.type)) {
                                 return (
                                   <div className="mt-1.5 flex items-center gap-2" onClick={(e) => e.stopPropagation()}>
                                     {(!line.batches || line.batches.length === 0) && (
@@ -746,11 +752,16 @@ export function ProductSelectionPanel({
                                       ? (() => {
                                           if (line.parent_line_uids.length === 1) {
                                             const p = lineItems.find((l) => l.uid === line.parent_line_uids?.[0]);
-                                            return p
-                                              ? p.item.has_variants && p.variant_id && p.item.variants?.find((v) => v.id === p.variant_id)
-                                                ? `${p.item.name} (${p.item.variants.find((v) => v.id === p.variant_id)?.variant_name})`
-                                                : p.item.name
-                                              : "Select Parent Line...";
+                                            if (p) {
+                                              if (p.item.has_variants && p.variant_id) {
+                                                const pVariant = p.variant || p.item.variants?.find((v) => v.id === p.variant_id);
+                                                if (pVariant && pVariant.variant_name) {
+                                                  return `${p.item.name} (${pVariant.variant_name})`;
+                                                }
+                                              }
+                                              return p.item.name;
+                                            }
+                                            return "Select Parent Line...";
                                           } else {
                                             return `${line.parent_line_uids.length} Parents Selected`;
                                           }
@@ -799,7 +810,7 @@ export function ProductSelectionPanel({
                           const variantPriceField = config.priceField === 'default_cost_price' ? 'cost_price' : 'sale_price';
                           const actualVariant = line.variant_id ? line.item.variants?.find((v: any) => v.id === line.variant_id) : (line.item.variants?.[0] || null);
                           const batchPriceField = config.priceField === 'default_cost_price' ? 'cost_price' : 'selling_price';
-                          const batchPrice = ['sales', 'quotation'].includes(config.type) && line.batches?.[0] ? (line.batches[0] as any)[batchPriceField] : undefined;
+                          const batchPrice = ['sales', 'quotation', 'pos'].includes(config.type) && line.batches?.[0] ? (line.batches[0] as any)[batchPriceField] : undefined;
                           const basePrice = (batchPrice !== undefined && batchPrice !== null)
                             ? Number(batchPrice)
                             : (actualVariant 
@@ -920,7 +931,7 @@ export function ProductSelectionPanel({
           warehouseId={warehouseId}
           allowCreate={config.allowCreateBatchAndSerial}
           initialSerials={lineItems.find(l => l.uid === activeSerialLineUid)?.serial_numbers || []}
-          onConfirm={(serials) => {
+          onConfirm={(serials, serialObjects) => {
             const line = lineItems.find(l => l.uid === activeSerialLineUid);
             if (!line) return;
             
@@ -929,6 +940,7 @@ export function ProductSelectionPanel({
             
             onUpdateLine(line.uid, {
               serial_numbers: serials,
+              serial_number_objects: serialObjects,
               quantity: newQty,
               discount_amount: discAmt,
               line_total: line.unit_price * newQty - discAmt,

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

@@ -127,6 +127,7 @@ export function ProductTransactionScreen({
               uid: l.uid || Math.random().toString(36).slice(2, 7),
               item: l.item,
               variant_id: l.variant_id || null,
+              variant: l.variant || null,
               batches: l.batches || [],
               serial_numbers: l.serial_numbers || [],
               quantity: qty,
@@ -412,7 +413,9 @@ export function ProductTransactionScreen({
           expiry_date: undefined,
           supplier_reference: undefined,
           selling_price: undefined,
-          serial_numbers: l.serial_numbers,
+          serial_numbers: l.serial_number_objects && l.serial_number_objects.length > 0 
+            ? l.serial_number_objects.map(o => o.id) 
+            : l.serial_numbers,
           quantity: l.quantity,
           uid: l.uid,
           is_free_qty: l.is_free_qty,

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

@@ -72,8 +72,10 @@ export interface TransactionLineItem {
   uid: string;                // Client-side unique key for React
   item: TransactionItem;
   variant_id?: number | null;
+  variant?: TransactionItemVariant | null;
   batches?: TransactionLineBatch[];
   serial_numbers?: string[];
+  serial_number_objects?: {id: number, serial_number: string}[];
   quantity: number;
   is_free_qty?: boolean;
   parent_line_uids?: string[];
@@ -333,7 +335,7 @@ export interface TransactionPayload {
     expiry_date?: string;
     supplier_reference?: string;
     selling_price?: number;
-    serial_numbers?: string[];
+    serial_numbers?: string[] | number[];
     quantity: number;
     uid: string;
     is_free_qty?: boolean;