@apptimate/ui 3.4.0 → 3.6.0

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

@@ -0,0 +1,359 @@
+import React, { useState, useEffect } from "react";
+import { Search, Plus, X } from "lucide-react";
+import { Modal, ModalFooter } from "../../../base-components/Modal";
+import { Button } from "../../../base-components/Button";
+import { Table, THeader, TBody, TRow, TCell } from "../../../base-components/Table";
+import { TransactionItem, TransactionItemVariant, TransactionBatch } from "./types";
+import { sendRequest } from "@apptimate/core-lib";
+import { toast } from "react-hot-toast";
+import { SearchableSelect } from "../../../base-components/SearchableSelect";
+
+interface BatchSelectionModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  item: TransactionItem | null;
+  variant: TransactionItemVariant | null;
+  warehouseId?: string | number;
+  allowMultiple?: boolean;
+  allowCreate?: boolean;
+  initialBatches?: any[];
+  onConfirm: (selections: { batch: TransactionBatch; quantity: number }[]) => void;
+}
+
+type BatchRow = {
+  uid: string;
+  isNew: boolean;
+  batch_id?: number;
+  batch_number: string;
+  manufacturing_date: string;
+  expiry_date: string;
+  supplier_reference: string;
+  selling_price: string;
+  quantity: string;
+  qty_available?: number;
+};
+
+const formatDateStr = (d?: string | null) => d ? d.split('T')[0] : "";
+
+export function BatchSelectionModal({
+  isOpen,
+  onClose,
+  item,
+  variant,
+  warehouseId,
+  allowMultiple = false,
+  allowCreate = false,
+  initialBatches = [],
+  onConfirm
+}: BatchSelectionModalProps) {
+  const [batches, setBatches] = useState<TransactionBatch[]>([]);
+  const [rows, setRows] = useState<BatchRow[]>([]);
+  const [selectKey, setSelectKey] = useState(0);
+  const [isLoadingBatches, setIsLoadingBatches] = useState(false);
+
+  useEffect(() => {
+    if (!isOpen) {
+      setBatches([]);
+      setRows([]);
+      return;
+    }
+    if (isOpen && item) {
+      fetchBatches();
+      if (initialBatches && initialBatches.length > 0) {
+        setRows(initialBatches.map(b => ({
+          uid: Math.random().toString(36).substr(2, 9),
+          isNew: b.batch_id ? false : true,
+          batch_id: b.batch_id,
+          batch_number: b.batch_number || "",
+          manufacturing_date: formatDateStr(b.manufacturing_date),
+          expiry_date: formatDateStr(b.expiry_date),
+          supplier_reference: b.supplier_reference || "",
+          selling_price: b.selling_price?.toString() || "",
+          quantity: b.quantity?.toString() || "",
+        })));
+      } else {
+        setRows([]);
+      }
+    }
+  }, [isOpen, item, variant, warehouseId]);
+
+  const fetchBatches = async () => {
+    if (!item) return;
+    setIsLoadingBatches(true);
+    try {
+      const params = new URLSearchParams({ item_id: String(item.id) });
+      if (variant) params.append("variant_id", String(variant.id));
+      if (warehouseId) params.append("warehouse_id", String(warehouseId));
+      
+      const res = await sendRequest({ url: `${process.env.NEXT_PUBLIC_API_URL}/api/inventory/batches/lookup?${params.toString()}`, method: "GET" });
+      if (res.responseData?.result) {
+        setBatches(res.responseData.result);
+      } else {
+        setBatches([]);
+      }
+    } catch (e: any) {
+      toast.error("Failed to load available batches");
+      setBatches([]);
+    } finally {
+      setIsLoadingBatches(false);
+    }
+  };
+
+  const handleAddRow = () => {
+    if (!allowMultiple && rows.length > 0) {
+      toast.error("Only one batch can be selected.");
+      return;
+    }
+    const rawPrice = variant?.sale_price || item?.variants?.[0]?.sale_price || item?.default_sale_price || 0;
+    const priceStr = rawPrice ? Number(rawPrice).toFixed(2) : "";
+
+    const newRow: BatchRow = {
+      uid: Math.random().toString(36).substr(2, 9),
+      isNew: true,
+      batch_number: "",
+      manufacturing_date: "",
+      expiry_date: "",
+      supplier_reference: "",
+      selling_price: priceStr,
+      quantity: "",
+    };
+    setRows([...rows, newRow]);
+  };
+
+  const handleSelectExisting = (batchId: number | string) => {
+    if (!allowMultiple && rows.length > 0) {
+      toast.error("Only one batch can be selected.");
+      return;
+    }
+    const batch = batches.find(b => String(b.id) === String(batchId));
+    if (!batch) return;
+    
+    // Check if already in rows
+    if (rows.some(r => String(r.batch_id) === String(batch.id))) {
+      toast.error("Batch already added to the list.");
+      return;
+    }
+
+    const newRow: BatchRow = {
+      uid: Math.random().toString(36).substr(2, 9),
+      isNew: false,
+      batch_id: batch.id,
+      batch_number: batch.batch_number,
+      manufacturing_date: formatDateStr(batch.manufacturing_date),
+      expiry_date: formatDateStr(batch.expiry_date),
+      supplier_reference: batch.supplier_reference || "",
+      selling_price: batch.selling_price ? batch.selling_price.toString() : "",
+      quantity: "",
+      qty_available: batch.qty_available,
+    };
+    setRows([...rows, newRow]);
+    setSelectKey(prev => prev + 1);
+  };
+
+  const updateRow = (uid: string, field: keyof BatchRow, value: string) => {
+    setRows(rows.map(r => r.uid === uid ? { ...r, [field]: value } : r));
+  };
+
+  const removeRow = (uid: string) => {
+    setRows(rows.filter(r => r.uid !== uid));
+  };
+
+  const handleConfirm = () => {
+    const selections: { batch: TransactionBatch; quantity: number }[] = [];
+    
+    for (const row of rows) {
+      const qty = parseFloat(row.quantity);
+      if (isNaN(qty) || qty <= 0) {
+        toast.error("Please enter a valid quantity for all selected batches.");
+        return;
+      }
+      if (row.isNew) {
+        const price = parseFloat(row.selling_price);
+        if (isNaN(price) || price < 0) {
+          toast.error("Please enter a valid selling price for new batches.");
+          return;
+        }
+      }
+      if (!row.isNew && !allowCreate && row.qty_available !== undefined && qty > row.qty_available) {
+        toast.error(`Quantity exceeds available stock for batch ${row.batch_number}.`);
+        return;
+      }
+
+      selections.push({
+        batch: {
+          id: row.batch_id || 0,
+          item_id: item?.id || 0,
+          batch_number: row.batch_number,
+          manufacturing_date: row.manufacturing_date || undefined,
+          expiry_date: row.expiry_date || undefined,
+          supplier_reference: row.supplier_reference || undefined,
+          selling_price: row.selling_price ? parseFloat(row.selling_price) : undefined,
+        },
+        quantity: qty
+      });
+    }
+
+    if (selections.length === 0) {
+      toast.error("Please add at least one batch.");
+      return;
+    }
+
+    onConfirm(selections);
+  };
+
+  const totalQty = rows.reduce((sum, r) => sum + (parseFloat(r.quantity) || 0), 0);
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} size="xl" title={`Batch Selection - ${item?.name} ${variant ? `(${variant.variant_name})` : ""}`}>
+      <div className="flex flex-col gap-4">
+        
+        <div className="flex justify-between items-center">
+          <div className="flex gap-2 items-center">
+            {allowCreate && (
+              <Button size="small" onClick={handleAddRow} icon={<Plus size={16} />}>New Batch</Button>
+            )}
+            <div className="w-64">
+              <SearchableSelect 
+                key={selectKey}
+                options={batches as any[]}
+                onChange={(val) => {
+                  if(val) handleSelectExisting(val as string | number);
+                }}
+                placeholder="Select Existing Batch..."
+                option={{ label: 'batch_number', value: 'id', renderOption: (opt: any) => (
+                  <div className="flex justify-between w-full">
+                    <span>{opt.batch_number}</span>
+                  </div>
+                ) }}
+              />
+            </div>
+          </div>
+          {totalQty > 0 && (
+            <div className="text-sm font-medium text-primary-600 bg-primary-50 px-3 py-1 rounded-full">
+              Total Qty: {totalQty}
+            </div>
+          )}
+        </div>
+
+        <div className="max-h-[60vh] overflow-y-auto custom-scrollbar w-full">
+          <Table>
+            <THeader>
+              <TRow>
+                <TCell isHeader label="Batch Number" className="min-w-[150px]">Batch Number</TCell>
+                <TCell isHeader label="Mfg Batch#" className="min-w-[120px]">Mfg Batch#</TCell>
+                <TCell isHeader label="Mfg Date" className="min-w-[140px]">Mfg Date</TCell>
+                <TCell isHeader label="Expiry Date" className="min-w-[140px]">Expiry Date</TCell>
+                <TCell isHeader label="Selling Price" className="min-w-[120px]">Selling Price</TCell>
+                <TCell isHeader label="Quantity" className="min-w-[120px] text-right">Quantity</TCell>
+                <TCell isHeader label="" className="w-10"></TCell>
+              </TRow>
+            </THeader>
+            <TBody>
+              {rows.length > 0 ? (
+                rows.map(row => (
+                  <TRow key={row.uid}>
+                    <TCell label="Batch Number">
+                      {row.isNew ? (
+                        <input 
+                          value={row.batch_number} 
+                          onChange={(e) => updateRow(row.uid, 'batch_number', e.target.value)} 
+                          placeholder="Auto generate if empty"
+                          className="w-full h-8 px-2 text-[13px] font-medium bg-surface-1 border border-border-subtle rounded-md focus:border-primary/50 focus:outline-none transition-colors"
+                        />
+                      ) : (
+                        <div className="font-mono text-sm font-medium">{row.batch_number}</div>
+                      )}
+                    </TCell>
+                    <TCell label="Mfg Batch#">
+                      {row.isNew ? (
+                        <input 
+                          value={row.supplier_reference} 
+                          onChange={(e) => updateRow(row.uid, 'supplier_reference', e.target.value)}
+                          className="w-full h-8 px-2 text-[13px] font-medium bg-surface-1 border border-border-subtle rounded-md focus:border-primary/50 focus:outline-none transition-colors"
+                        />
+                      ) : (
+                        <div className="text-sm text-gray-500">{row.supplier_reference || '—'}</div>
+                      )}
+                    </TCell>
+                    <TCell label="Mfg Date">
+                      {row.isNew ? (
+                        <input 
+                          type="date"
+                          value={row.manufacturing_date} 
+                          onChange={(e) => updateRow(row.uid, 'manufacturing_date', e.target.value)}
+                          className="w-full h-8 px-2 text-[13px] font-medium bg-surface-1 border border-border-subtle rounded-md focus:border-primary/50 focus:outline-none transition-colors"
+                        />
+                      ) : (
+                        <div className="text-sm text-gray-500">{row.manufacturing_date || '—'}</div>
+                      )}
+                    </TCell>
+                    <TCell label="Expiry Date">
+                      {row.isNew ? (
+                        <input 
+                          type="date"
+                          value={row.expiry_date} 
+                          onChange={(e) => updateRow(row.uid, 'expiry_date', e.target.value)}
+                          className="w-full h-8 px-2 text-[13px] font-medium bg-surface-1 border border-border-subtle rounded-md focus:border-primary/50 focus:outline-none transition-colors"
+                        />
+                      ) : (
+                        <div className="text-sm text-gray-500">{row.expiry_date ? new Date(row.expiry_date).toLocaleDateString() : '—'}</div>
+                      )}
+                    </TCell>
+                    <TCell label="Selling Price">
+                      {row.isNew ? (
+                        <input 
+                          type="number"
+                          value={row.selling_price} 
+                          onChange={(e) => updateRow(row.uid, 'selling_price', e.target.value)}
+                          className="w-full h-8 px-2 text-[13px] font-medium bg-surface-1 border border-border-subtle rounded-md focus:border-primary/50 focus:outline-none transition-colors"
+                        />
+                      ) : (
+                        <div className="text-sm text-gray-500">{row.selling_price || '—'}</div>
+                      )}
+                    </TCell>
+                    <TCell label="Quantity">
+                      <div className="flex flex-col items-end">
+                        <input 
+                          type="number" 
+                          min="0"
+                          max={!allowCreate ? row.qty_available : undefined}
+                          value={row.quantity}
+                          onChange={(e) => updateRow(row.uid, 'quantity', e.target.value)}
+                          placeholder="0"
+                          className="w-full h-8 px-2 text-[13px] text-right font-medium bg-surface-1 border border-border-subtle rounded-md focus:border-primary/50 focus:outline-none transition-colors"
+                        />
+                        {!row.isNew && row.qty_available !== undefined && (
+                          <span className="text-[10px] text-gray-400 mt-0.5">Avail: {row.qty_available}</span>
+                        )}
+                      </div>
+                    </TCell>
+                    <TCell label="">
+                      <button 
+                        onClick={() => removeRow(row.uid)}
+                        className="p-1 text-gray-400 hover:text-danger-500 rounded-md hover:bg-danger-50 transition-colors w-full flex justify-center"
+                      >
+                        <X size={16} />
+                      </button>
+                    </TCell>
+                  </TRow>
+                ))
+              ) : (
+                <TRow>
+                  <TCell colSpan={7} className="p-8 text-center text-gray-500">
+                    Add a new batch or select an existing one to continue.
+                  </TCell>
+                </TRow>
+              )}
+            </TBody>
+          </Table>
+        </div>
+      </div>
+      <ModalFooter>
+        <Button variant="flat" color="secondary" onClick={onClose}>Cancel</Button>
+        <Button onClick={handleConfirm} isDisabled={rows.length === 0}>
+          Confirm Batches
+        </Button>
+      </ModalFooter>
+    </Modal>
+  );
+}

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

@@ -0,0 +1,247 @@
+import React, { useState, useEffect, useMemo } from "react";
+import { X, Search } from "lucide-react";
+import { Modal, ModalFooter } from "../../../base-components/Modal";
+import { Button } from "../../../base-components/Button";
+import { TransactionItem, TransactionItemVariant } from "./types";
+import { sendRequest } from "@apptimate/core-lib";
+import { toast } from "react-hot-toast";
+
+interface SerialSelectionModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  item: TransactionItem | null;
+  variant: TransactionItemVariant | null;
+  allowCreate?: boolean;
+  initialSerials?: string[];
+  warehouseId?: number;
+  onConfirm: (serials: string[]) => void;
+}
+
+export function SerialSelectionModal({
+  isOpen,
+  onClose,
+  item,
+  variant,
+  allowCreate = false,
+  initialSerials = [],
+  warehouseId,
+  onConfirm
+}: SerialSelectionModalProps) {
+  const [serials, setSerials] = useState<string[]>([]);
+  const [inputValue, setInputValue] = useState("");
+  const [availableSerials, setAvailableSerials] = useState<any[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    if (isOpen) {
+      setSerials(initialSerials);
+      setInputValue("");
+    }
+  }, [isOpen, item, allowCreate]);
+
+  useEffect(() => {
+    if (!isOpen || allowCreate) return;
+    const delay = setTimeout(() => {
+      fetchSerials(inputValue);
+    }, 300);
+    return () => clearTimeout(delay);
+  }, [inputValue, isOpen, allowCreate, item, variant, warehouseId]);
+
+  const fetchSerials = async (search: string = "") => {
+    if (!item) return;
+    setIsLoading(true);
+    try {
+      const url = new URL(`${process.env.NEXT_PUBLIC_API_URL}/api/inventory/serials/lookup`);
+      url.searchParams.append("item_id", item.id.toString());
+      url.searchParams.append("status", "available");
+      if (variant) {
+        url.searchParams.append("variant_id", variant.id.toString());
+      }
+      if (warehouseId) {
+        url.searchParams.append("warehouse_id", warehouseId.toString());
+      }
+      if (search) {
+        url.searchParams.append("search", search);
+      }
+
+      const res = await sendRequest({
+        url: url.toString(),
+        method: "GET"
+      });
+      if (res.responseData?.result) {
+        setAvailableSerials(res.responseData.result);
+      } else {
+        setAvailableSerials([]);
+      }
+    } catch (e) {
+      toast.error("Failed to load serial numbers");
+    }
+    setIsLoading(false);
+  };
+
+  const handleAddSerial = (e?: React.FormEvent) => {
+    e?.preventDefault();
+    // Allow comma or space separated parsing
+    const rawTokens = inputValue.split(/[\s,]+/);
+    let addedCount = 0;
+    const newSerials = [...serials];
+
+    rawTokens.forEach(token => {
+      const val = token.trim();
+      if (val && !newSerials.includes(val)) {
+        newSerials.push(val);
+        addedCount++;
+      }
+    });
+
+    if (addedCount > 0) {
+      setSerials(newSerials);
+      setInputValue("");
+    } else if (inputValue.trim()) {
+      toast.error("Serial numbers already added or invalid.");
+    }
+  };
+
+  const handleRemoveSerial = (s: string) => {
+    setSerials(serials.filter(v => v !== s));
+  };
+
+  const toggleSelectSerial = (s: string) => {
+    if (serials.includes(s)) {
+      setSerials(serials.filter(v => v !== s));
+    } else {
+      setSerials([...serials, s]);
+    }
+  };
+
+  const handleConfirm = () => {
+    if (serials.length === 0) {
+      toast.error("Please add at least one serial number.");
+      return;
+    }
+    onConfirm(serials);
+  };
+
+  // Display available serials from backend
+  const filteredAvailable = availableSerials;
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      size="md"
+      title={`${allowCreate ? 'Add' : 'Select'} Serial Numbers`}
+    >
+      <div className="flex flex-col gap-4">
+        {/* Header Info */}
+        <div className="flex items-center justify-between py-2 border-b border-border-subtle">
+          <div className="flex flex-col">
+            <span className="text-[13px] font-semibold text-foreground-1">
+              {item?.name} {variant ? `(${variant.variant_name})` : ""}
+            </span>
+            <span className="text-[11px] text-foreground-subtle">{item?.sku}</span>
+          </div>
+          <div className="flex flex-col items-end">
+            <span className="text-sm font-bold text-foreground-1">{serials.length}</span>
+            <span className="text-[11px] text-foreground-subtle">Quantity</span>
+          </div>
+        </div>
+
+        {allowCreate ? (
+          <>
+            {/* Create Mode */}
+            <div className="flex items-center justify-between">
+              <span className="text-sm font-medium text-foreground-subtle">
+                Count: <span className="text-foreground-1 font-bold">{serials.length}</span>
+              </span>
+              <button
+                onClick={() => setSerials([])}
+                className="text-sm text-primary hover:underline font-medium"
+              >
+                Clear All
+              </button>
+            </div>
+
+            <div className="flex flex-col border border-border-subtle rounded-xl overflow-hidden bg-surface-0 min-h-[250px] shadow-sm">
+              <div className="p-3 border-b border-border-subtle bg-surface-hover">
+                <form onSubmit={handleAddSerial} className="flex gap-2">
+                  <input
+                    type="text"
+                    autoFocus
+                    placeholder="Type serials separated by space or comma, then press Enter..."
+                    value={inputValue}
+                    onChange={(e) => setInputValue(e.target.value)}
+                    className="flex-1 px-3 py-2 bg-white border border-border-subtle rounded-md text-[13px] focus:outline-none focus:border-primary transition-colors"
+                  />
+                  <Button type="submit" variant="flat" color="primary" size="small">Add</Button>
+                </form>
+              </div>
+
+              <div className="flex-1 p-3 custom-scrollbar flex flex-wrap gap-2 content-start max-h-[300px] overflow-y-auto">
+                {serials.length === 0 ? (
+                  <div className="w-full mt-10 flex flex-col items-center justify-center text-[13px] text-foreground-disabled">
+                    <p>No serial numbers added yet.</p>
+                  </div>
+                ) : (
+                  serials.map(s => (
+                    <div key={s} className="flex items-center gap-1.5 bg-surface-1 border border-border-subtle px-2.5 py-1 rounded-md text-[13px] font-mono text-foreground-1">
+                      {s}
+                      <button onClick={() => handleRemoveSerial(s)} className="text-foreground-subtle hover:text-danger-500 transition-colors">
+                        <X size={14} />
+                      </button>
+                    </div>
+                  ))
+                )}
+              </div>
+            </div>
+          </>
+        ) : (
+          <>
+            {/* Select Mode */}
+            <div className="flex flex-col border border-border-subtle rounded-xl overflow-hidden bg-surface-0 h-[350px] shadow-sm">
+              <div className="p-3 border-b border-border-subtle bg-surface-hover relative">
+                <Search className="absolute left-5 top-1/2 -translate-y-1/2 text-foreground-subtle" size={16} />
+                <input
+                  type="text"
+                  autoFocus
+                  placeholder="Search available serial numbers..."
+                  value={inputValue}
+                  onChange={(e) => setInputValue(e.target.value)}
+                  className="w-full pl-9 pr-3 py-2 bg-white border border-border-subtle rounded-md text-[13px] focus:outline-none focus:border-primary transition-colors"
+                />
+              </div>
+
+              <div className="flex-1 overflow-y-auto p-2 custom-scrollbar flex flex-col gap-0.5">
+                {isLoading ? (
+                  <div className="w-full h-full flex items-center justify-center text-[13px] text-foreground-subtle">Loading serials...</div>
+                ) : availableSerials.length === 0 ? (
+                  <div className="w-full h-full flex items-center justify-center text-[13px] text-foreground-subtle">No available serials found for this item.</div>
+                ) : filteredAvailable.length === 0 ? (
+                  <div className="w-full h-full flex items-center justify-center text-[13px] text-foreground-subtle">No matching serials found.</div>
+                ) : (
+                  filteredAvailable.map(s => (
+                    <label key={s.serial_number} className="flex items-center gap-3 px-3 py-2 hover:bg-surface-hover rounded-md cursor-pointer transition-colors">
+                      <input
+                        type="checkbox"
+                        className="w-4 h-4 rounded border-border-subtle text-primary focus:ring-primary"
+                        checked={serials.includes(s.serial_number)}
+                        onChange={() => toggleSelectSerial(s.serial_number)}
+                      />
+                      <span className="font-mono text-[13px] text-foreground-1">{s.serial_number}</span>
+                    </label>
+                  ))
+                )}
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+      <ModalFooter>
+        <Button variant="flat" color="secondary" onClick={onClose}>Cancel</Button>
+        <Button onClick={handleConfirm} isDisabled={serials.length === 0}>
+          Confirm {serials.length > 0 ? `(${serials.length})` : ""}
+        </Button>
+      </ModalFooter>
+    </Modal>
+  );
+}

package/src/common-components/pickers/modals/types.ts

@@ -0,0 +1,30 @@
+export interface TransactionItem {
+  id: number;
+  name: string;
+  sku: string;
+  barcode?: string;
+  image_url?: string;
+  has_variants: boolean;
+  tracking_type: 'none' | 'batch' | 'serial';
+  [key: string]: any; // Allow other properties
+}
+
+export interface TransactionItemVariant {
+  id: number;
+  item_id: number;
+  variant_name: string;
+  sku: string;
+  [key: string]: any;
+}
+
+export interface TransactionBatch {
+  id: number;
+  item_id: number;
+  batch_number: string;
+  manufacturing_date?: string;
+  expiry_date?: string;
+  supplier_reference?: string;
+  selling_price?: number;
+  qty_available?: number;
+  qty_on_hand?: number;
+}