@apptimate/ui 3.5.0 → 3.6.0

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

@@ -0,0 +1,250 @@
+'use client';
+
+import React, { useState, useCallback, useMemo } from 'react';
+import { cn } from '@apptimate/core-lib';
+import { ProductSelectionPanel } from './ProductSelectionPanel';
+import { MetadataPanel } from './MetadataPanel';
+import type {
+  ProductTransactionScreenProps, TransactionItem, TransactionLineItem,
+  TransactionPayload, PaymentEntry, PartyLookup,
+} from './types';
+
+/**
+ * ProductTransactionScreen — Standardized two-panel transaction UI
+ *
+ * Left panel (60%):  Search/scan → product popup → selected items table
+ * Right panel (40%): Party picker, warehouse picker, date, notes, payment modes, submit
+ *
+ * Configure via `config` prop (use presets: TRANSACTION_PRESETS.sales / .purchase / .transfer / .pos)
+ *
+ * NOTE: This component does NOT render its own header — the parent page provides the back-arrow + title.
+ */
+export function ProductTransactionScreen({
+  config,
+  defaultWarehouseId,
+  onSubmit,
+  isSubmitting: externalSubmitting,
+  renderExtraMeta,
+}: ProductTransactionScreenProps) {
+  // ── State ──
+  const [lineItems, setLineItems] = useState<TransactionLineItem[]>([]);
+  const [partyId, setPartyId] = useState<number | null>(null);
+  const [partyName, setPartyName] = useState<string | null>(null);
+  const [warehouseId, setWarehouseId] = useState<number | null>(defaultWarehouseId ?? null);
+  const [warehouseName, setWarehouseName] = useState<string | null>(null);
+  const [transactionDate, setTransactionDate] = useState<string>(() => {
+    return new Date().toISOString().split('T')[0];
+  });
+  const [notes, setNotes] = useState('');
+  const [payments, setPayments] = useState<PaymentEntry[]>([]);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const submitting = externalSubmitting ?? isSubmitting;
+
+  // ── Add item to line items ──
+  const handleAddItem = useCallback(
+    (
+      item: TransactionItem,
+      variant?: any,
+      extra?: { quantity?: number; batches?: any[]; serial_numbers?: string[] }
+    ) => {
+      // Check if item+variant already exists
+      const existingIdx = lineItems.findIndex(
+        (l) => l.item.id === item.id && l.variant_id === (variant?.id || null)
+      );
+
+      if (existingIdx >= 0) {
+        // Increment quantity
+        const updated = [...lineItems];
+        const existing = updated[existingIdx];
+        const addedQty = extra?.quantity || 1;
+        const newQty = existing.quantity + addedQty;
+        const discountAmt = (existing.unit_price * newQty * existing.discount_percent) / 100;
+        
+        let mergedBatches = existing.batches;
+        if (extra?.batches?.length) {
+          mergedBatches = [...(mergedBatches || []), ...extra.batches];
+        }
+
+        let mergedSerials = existing.serial_numbers;
+        if (extra?.serial_numbers?.length) {
+          mergedSerials = [...(mergedSerials || []), ...extra.serial_numbers];
+        }
+
+        updated[existingIdx] = {
+          ...existing,
+          quantity: newQty,
+          discount_amount: discountAmt,
+          line_total: existing.unit_price * newQty - discountAmt,
+          batches: mergedBatches,
+          serial_numbers: mergedSerials,
+        };
+        setLineItems(updated);
+        return;
+      }
+
+      const variantPriceField = config.priceField === 'default_cost_price' ? 'cost_price' : 'sale_price';
+      const actualVariant = variant || (item.variants && item.variants.length > 0 ? item.variants[0] : null);
+      const unitPrice = actualVariant ? Number(actualVariant[variantPriceField] || 0) : 0;
+      const qty = extra?.quantity || 1;
+      const discountAmt = 0; // Initial discount
+      
+      const newLine: TransactionLineItem = {
+        uid: `${item.id}-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,
+        item,
+        variant_id: variant?.id || null,
+        batches: extra?.batches || [],
+        serial_numbers: extra?.serial_numbers || [],
+        quantity: qty,
+        unit_price: unitPrice,
+        discount_percent: 0,
+        discount_amount: discountAmt,
+        line_total: unitPrice * qty - discountAmt,
+        expanded: false,
+      };
+      setLineItems((prev) => [...prev, newLine]);
+    },
+    [lineItems, config.priceField]
+  );
+
+  // ── Update line ──
+  const handleUpdateLine = useCallback((uid: string, updates: Partial<TransactionLineItem>) => {
+    setLineItems((prev) =>
+      prev.map((l) => (l.uid === uid ? { ...l, ...updates } : l))
+    );
+  }, []);
+
+  // ── Remove line ──
+  const handleRemoveLine = useCallback((uid: string) => {
+    setLineItems((prev) => prev.filter((l) => l.uid !== uid));
+  }, []);
+
+  // ── Toggle expand ──
+  const handleToggleExpand = useCallback((uid: string) => {
+    setLineItems((prev) =>
+      prev.map((l) => (l.uid === uid ? { ...l, expanded: !l.expanded } : l))
+    );
+  }, []);
+
+  // ── Calculations ──
+  const subtotal = useMemo(() => lineItems.reduce((s, l) => s + l.unit_price * l.quantity, 0), [lineItems]);
+  const discountTotal = useMemo(() => lineItems.reduce((s, l) => s + l.discount_amount, 0), [lineItems]);
+  const grandTotal = useMemo(() => subtotal - discountTotal, [subtotal, discountTotal]);
+
+  // ── Submit handler ──
+  const handleSubmit = useCallback(async () => {
+    if (lineItems.length === 0) return;
+
+    const payload: TransactionPayload = {
+      type: config.type,
+      party_id: partyId,
+      warehouse_id: warehouseId!,
+      transaction_date: transactionDate,
+      notes: notes || undefined,
+      lines: lineItems.flatMap((l): TransactionPayload['lines'] => {
+        if (l.batches && l.batches.length > 0) {
+          return l.batches.map(b => ({
+            item_id: l.item.id,
+            variant_id: l.variant_id,
+            batch_id: b.batch_id,
+            batch_number: b.batch_number,
+            manufacturing_date: b.manufacturing_date,
+            expiry_date: b.expiry_date,
+            supplier_reference: b.supplier_reference,
+            selling_price: b.selling_price,
+            serial_numbers: undefined,
+            quantity: b.quantity,
+            unit_price: l.unit_price,
+            discount_percent: l.discount_percent,
+            discount_amount: (l.discount_amount / l.quantity) * b.quantity,
+            line_total: (l.line_total / l.quantity) * b.quantity,
+          }));
+        }
+        return [{
+          item_id: l.item.id,
+          variant_id: l.variant_id,
+          batch_id: undefined,
+          batch_number: undefined,
+          manufacturing_date: undefined,
+          expiry_date: undefined,
+          supplier_reference: undefined,
+          selling_price: undefined,
+          serial_numbers: l.serial_numbers,
+          quantity: l.quantity,
+          unit_price: l.unit_price,
+          discount_percent: l.discount_percent,
+          discount_amount: l.discount_amount,
+          line_total: l.line_total,
+        }];
+      }),
+      payments: config.showPayment ? payments : undefined,
+      subtotal,
+      discount_total: discountTotal,
+      grand_total: grandTotal,
+    };
+
+    setIsSubmitting(true);
+    try {
+      await onSubmit(payload);
+      // Reset on success
+      setLineItems([]);
+      setPayments([]);
+      setNotes('');
+      setTransactionDate(new Date().toISOString().split('T')[0]);
+      if (!defaultWarehouseId) { setWarehouseId(null); setWarehouseName(null); }
+    } catch (error) {
+      // The parent usually displays a toast error. We catch it here
+      // to stop the loading state and prevent clearing the form.
+      // Intentionally not logging with console.error to avoid Next.js dev overlay.
+      console.warn("Transaction submission failed.", error instanceof Error ? error.message : "");
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [lineItems, config, partyId, warehouseId, transactionDate, notes, payments, subtotal, discountTotal, grandTotal, onSubmit, defaultWarehouseId]);
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* ── Two-Panel Layout ── */}
+      <div className="flex-1 flex gap-5 min-h-0">
+        {/* Left: Product Selection (75%) */}
+        <div className="flex-[3] min-w-0 flex flex-col">
+          <ProductSelectionPanel
+            config={config}
+            warehouseId={warehouseId ?? undefined}
+            lineItems={lineItems}
+            onAddItem={handleAddItem}
+            onUpdateLine={handleUpdateLine}
+            onRemoveLine={handleRemoveLine}
+            onToggleExpand={handleToggleExpand}
+          />
+        </div>
+
+        {/* Divider */}
+        <div className="w-px bg-border-subtle/60 shrink-0" />
+
+        {/* Right: Metadata (25%) */}
+        <div className="flex-1 min-w-0 flex flex-col overflow-y-auto custom-scrollbar pr-1">
+          <MetadataPanel
+            config={config}
+            lineItems={lineItems}
+            partyId={partyId}
+            partyName={partyName}
+            warehouseId={warehouseId}
+            warehouseName={warehouseName}
+            transactionDate={transactionDate}
+            notes={notes}
+            payments={payments}
+            onPartyChange={(id, party) => { setPartyId(id); setPartyName(party?.name ?? null); }}
+            onWarehouseChange={(id, name) => { setWarehouseId(id); setWarehouseName(name ?? null); }}
+            onDateChange={setTransactionDate}
+            onNotesChange={setNotes}
+            onPaymentsChange={setPayments}
+            onSubmit={handleSubmit}
+            isSubmitting={submitting}
+            renderExtraMeta={renderExtraMeta}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,17 @@
+export { ProductTransactionScreen } from './ProductTransactionScreen';
+export { ProductSelectionPanel } from './ProductSelectionPanel';
+export { MetadataPanel } from './MetadataPanel';
+export { TRANSACTION_PRESETS } from './types';
+export type {
+  ProductTransactionScreenProps,
+  TransactionScreenConfig,
+  TransactionPayload,
+  TransactionLineItem,
+  TransactionItem,
+  TransactionType,
+  PaymentEntry,
+  PaymentMode,
+  BankAccount,
+  WarehouseLookup,
+  PartyLookup,
+} from './types';

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

@@ -0,0 +1,300 @@
+// ─── Product Transaction Screen — Shared Types ──────────────────────────────
+
+// ── Item & Product Types ──
+
+export interface TransactionItem {
+  id: number;
+  name: string;
+  sku: string;
+  barcode?: string;
+  image_url?: string;
+  category_id?: number;
+  brand_id?: number;
+  uom_id?: number;
+  has_variants: boolean;
+  has_stocks: boolean;
+  tracking_type: 'none' | 'batch' | 'serial';
+  default_sale_price: number;
+  default_cost_price: number;
+  is_discountable: boolean;
+  category?: { id: number; name: string };
+  brand?: { id: number; name: string };
+  uom?: { id: number; name: string; abbreviation: string };
+  variants?: TransactionItemVariant[];
+  primary_image?: { id: number; url: string } | null;
+  stock?: { qty_on_hand: number; qty_allocated: number; qty_available: number };
+}
+
+export interface TransactionItemVariant {
+  id: number;
+  item_id: number;
+  variant_name: string;
+  sku: string;
+  cost_price?: number;
+  sale_price?: number;
+  additional_price?: number;
+}
+
+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;
+}
+
+export interface TransactionLineBatch {
+  batch_id?: number | null;
+  batch_number?: string;
+  manufacturing_date?: string;
+  expiry_date?: string;
+  supplier_reference?: string;
+  selling_price?: number;
+  quantity: number;
+}
+
+// ── Selected Line Item (added to cart) ──
+
+export interface TransactionLineItem {
+  uid: string;                // Client-side unique key for React
+  item: TransactionItem;
+  variant_id?: number | null;
+  batches?: TransactionLineBatch[];
+  serial_numbers?: string[];
+  quantity: number;
+  unit_price: number;
+  discount_percent: number;
+  discount_amount: number;
+  line_total: number;
+  notes?: string;
+  expanded?: boolean;         // Whether the detail row is expanded
+}
+
+import type { PaymentModeField, PaymentMode, PaymentEntry, BankAccount } from '../PaymentSection';
+export type { PaymentModeField, PaymentMode, PaymentEntry, BankAccount };
+
+// ── Warehouse & Party ──
+
+export interface WarehouseLookup {
+  id: number;
+  name: string;
+  code: string;
+}
+
+export interface PartyLookup {
+  id: number;
+  name: string;
+  code?: string;
+  type?: string;
+  phone?: string;
+  email?: string;
+}
+
+// ── Component Props ──
+
+export type PriceField = 'default_sale_price' | 'default_cost_price';
+export type TransactionType = 'sales' | 'purchase' | 'transfer' | 'pos' | 'opening_stock' | 'quotation' | 'grn';
+
+export interface TransactionScreenConfig {
+  /** Module type — controls behaviour & price field */
+  type: TransactionType;
+  /** Which price field to use */
+  priceField: PriceField;
+  /** Show price column in the items table */
+  showPrices: boolean;
+  /** Enable discount inputs */
+  allowDiscount: boolean;
+  /** Show payment section */
+  showPayment: boolean;
+  /** Party label */
+  partyLabel: string;
+  /** Party type filter */
+  partyType: 'customer' | 'supplier' | 'all';
+  /** Show warehouse selector */
+  showWarehouse: boolean;
+  /** Show notes */
+  showNotes: boolean;
+  /** Submit button label */
+  submitLabel: string;
+  /** Page title */
+  title: string;
+  /** When true, the "party" slot shows a WarehousePicker instead of a PartyPicker */
+  partyIsWarehouse?: boolean;
+  /** Whether to show the party selector at all (defaults to true) */
+  showParty?: boolean;
+  /** Allow creating new batches and serials during selection */
+  allowCreateBatchAndSerial?: boolean;
+  /** If true, user must select a warehouse before searching/adding items */
+  requireWarehouseFirst?: boolean;
+  /** Allow editing unit price inline */
+  allowEditPrice?: boolean;
+  /** Whether to show available stock for variants in the search dropdown */
+  showStock?: boolean;
+}
+
+// ── Module Presets ──
+
+export const TRANSACTION_PRESETS: Record<TransactionType, TransactionScreenConfig> = {
+  sales: {
+    type: 'sales',
+    priceField: 'default_sale_price',
+    showPrices: true,
+    allowDiscount: true,
+    showPayment: false,
+    partyLabel: 'Customer',
+    partyType: 'customer',
+    showWarehouse: true,
+    showNotes: true,
+    submitLabel: 'Create Sales Order',
+    title: 'New Sale',
+    allowCreateBatchAndSerial: false,
+    allowEditPrice: false,
+    showStock: true,
+  },
+  quotation: {
+    type: 'quotation',
+    priceField: 'default_sale_price',
+    showPrices: true,
+    allowDiscount: true,
+    showPayment: false,
+    partyLabel: 'Customer',
+    partyType: 'customer',
+    showWarehouse: true,
+    showNotes: true,
+    submitLabel: 'Create Quotation',
+    title: 'New Quotation',
+    allowCreateBatchAndSerial: false,
+    allowEditPrice: false,
+    showStock: true,
+  },
+  purchase: {
+    type: 'purchase',
+    priceField: 'default_cost_price',
+    showPrices: true,
+    allowDiscount: true,
+    showPayment: false,
+    partyLabel: 'Supplier',
+    partyType: 'supplier',
+    showWarehouse: true,
+    showNotes: true,
+    submitLabel: 'Create Purchase Order',
+    title: 'New Purchase',
+    allowCreateBatchAndSerial: true,
+    allowEditPrice: true,
+    showStock: true,
+  },
+  transfer: {
+    type: 'transfer',
+    priceField: 'default_sale_price',
+    showPrices: false,
+    allowDiscount: false,
+    showPayment: false,
+    partyLabel: 'Destination Warehouse',
+    partyType: 'all',
+    partyIsWarehouse: true,
+    showWarehouse: true,
+    showNotes: true,
+    submitLabel: 'Create Transfer',
+    title: 'New Transfer',
+    allowCreateBatchAndSerial: false,
+    allowEditPrice: false,
+    showStock: true,
+    requireWarehouseFirst: true,
+  },
+  pos: {
+    type: 'pos',
+    priceField: 'default_sale_price',
+    showPrices: true,
+    allowDiscount: true,
+    showPayment: true,
+    partyLabel: 'Customer',
+    partyType: 'customer',
+    showWarehouse: false,
+    showNotes: false,
+    submitLabel: 'Complete Sale',
+    title: 'POS Checkout',
+    allowCreateBatchAndSerial: false,
+    allowEditPrice: false,
+    showStock: true,
+  },
+  opening_stock: {
+    type: 'opening_stock',
+    priceField: 'default_cost_price',
+    showPrices: true,
+    allowDiscount: false,
+    showPayment: false,
+    partyLabel: '',
+    partyType: 'all',
+    showParty: false,
+    showWarehouse: true,
+    showNotes: true,
+    submitLabel: 'Create Opening Stock',
+    title: 'Opening Stock',
+    allowCreateBatchAndSerial: true,
+    allowEditPrice: true,
+    showStock: true,
+  },
+  grn: {
+    type: 'grn',
+    priceField: 'default_cost_price',
+    showPrices: true,
+    allowDiscount: true,
+    showPayment: false,
+    partyLabel: 'Supplier',
+    partyType: 'supplier',
+    showWarehouse: true,
+    showNotes: true,
+    submitLabel: 'Create Direct GRN',
+    title: 'New Direct GRN',
+    allowCreateBatchAndSerial: true,
+    allowEditPrice: true,
+    showStock: true,
+  },
+};
+
+// ── Props for the main component ──
+
+export interface ProductTransactionScreenProps {
+  /** Module preset config */
+  config: TransactionScreenConfig;
+  /** Default warehouse ID (POS pre-selects, others allow picking) */
+  defaultWarehouseId?: number;
+  /** Callback on successful submit */
+  onSubmit: (payload: TransactionPayload) => Promise<void>;
+  /** Optional loading state override */
+  isSubmitting?: boolean;
+  /** Optional extra content rendered at the top of the metadata (right) panel */
+  renderExtraMeta?: () => React.ReactNode;
+}
+
+export interface TransactionPayload {
+  type: TransactionType;
+  party_id?: number | null;
+  warehouse_id: number;
+  transaction_date?: string;
+  notes?: string;
+  lines: Array<{
+    item_id: number;
+    variant_id?: number | null;
+    batch_id?: number | null;
+    batch_number?: string;
+    manufacturing_date?: string;
+    expiry_date?: string;
+    supplier_reference?: string;
+    selling_price?: number;
+    serial_numbers?: string[];
+    quantity: number;
+    unit_price: number;
+    discount_percent: number;
+    discount_amount: number;
+    line_total: number;
+  }>;
+  payments?: PaymentEntry[];
+  subtotal: number;
+  discount_total: number;
+  grand_total: number;
+}

package/src/components/shared/ImageUploadComponent.tsx

@@ -75,7 +75,6 @@ export default function ImageUploadComponent({
   };
 
   const uploadUrl = buildProxyUrl(apiPath.replace("{id}", String(entityId)));
-  const multipleUploadUrl = `${uploadUrl}/multiple`;
 
   const getAuthHeaders = (): Record<string, string> => {
     const headers: Record<string, string> = {};
@@ -113,7 +112,7 @@ export default function ImageUploadComponent({
         const formData = new FormData();
         fileArray.forEach(f => formData.append("images[]", f));
         Object.entries(extraFormData).forEach(([k, v]) => formData.append(k, v));
-        const resp = await fetch(multipleUploadUrl, { method: "POST", headers: getAuthHeaders(), body: formData });
+        const resp = await fetch(uploadUrl, { method: "POST", headers: getAuthHeaders(), body: formData });
         const data = await resp.json();
         if (data.is_success) { toast.success(`${fileArray.length} images uploaded`); onRefresh(); } else toast.error(data.message || "Upload failed");
       }

package/src/index.tsx

@@ -34,3 +34,23 @@ export * from './common-components/DashboardLayout';
 export * from './common-components/charts';
 export * from './common-components/PaymentSection';
 export * from './base-components/FinanceErrorToast';
+export * from './base-components/TagsInput';
+export * from './base-components/WizardModal';
+
+// Pickers
+export * from './common-components/pickers/BrandPicker';
+export * from './common-components/pickers/CategoryPicker';
+export * from './common-components/pickers/EntityPickerModal';
+export * from './common-components/pickers/UomGroupPicker';
+export * from './common-components/pickers/UomPicker';
+export * from './common-components/pickers/PartyPicker';
+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 { default as SkuConfigModal } from './common-components/item-wizard/SkuConfigModal';
+export * from './common-components/item-wizard/SkuConfigModal';
+
+// Transaction
+export * from './common-components/transaction';