@apptimate/ui 7.1.0 → 7.3.0

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { Search, Plus, X } from "lucide-react";
+import { Search, Plus, X, Save } 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";
@@ -84,7 +84,7 @@ export function BatchSelectionModal({
       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);
@@ -127,7 +127,7 @@ export function BatchSelectionModal({
     }
     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.");
@@ -150,30 +150,69 @@ export function BatchSelectionModal({
     setSelectKey(prev => prev + 1);
   };
 
-  const updateRow = (uid: string, field: keyof BatchRow, value: string) => {
+  const updateRow = (uid: string, field: keyof BatchRow, value: any) => {
     setRows(rows.map(r => r.uid === uid ? { ...r, [field]: value } : r));
   };
 
+  const saveBatchToDB = async (row: BatchRow) => {
+    if (!item) return;
+    const price = parseFloat(row.selling_price);
+    if (isNaN(price) || price < 0) {
+      toast.error("Please enter a valid selling price to save.");
+      return;
+    }
+
+    const payload = {
+      item_id: item.id,
+      variant_id: variant?.id,
+      warehouse_id: warehouseId,
+      batch_number: row.batch_number || undefined,
+      manufacturing_date: row.manufacturing_date || undefined,
+      expiry_date: row.expiry_date || undefined,
+      supplier_reference: row.supplier_reference || undefined,
+      selling_price: price,
+    };
+
+    const loadingToast = toast.loading("Saving batch...");
+    try {
+      const res = await sendRequest({
+        url: `${process.env.NEXT_PUBLIC_API_URL}/api/inventory/batches`,
+        method: "POST",
+        data: payload
+      });
+      if (res.ok) {
+        toast.success("Batch saved successfully", { id: loadingToast });
+        const newBatch = res.responseData?.result;
+        if (newBatch) {
+          setRows(rows.map(r => r.uid === row.uid ? {
+            ...r,
+            isNew: false,
+            batch_id: newBatch.id,
+            batch_number: newBatch.batch_number
+          } : r));
+          fetchBatches();
+        }
+      } else {
+        toast.error(res.responseData?.message || "Failed to save batch", { id: loadingToast });
+      }
+    } catch (e: any) {
+      toast.error("Failed to save batch", { id: loadingToast });
+    }
+  };
+
   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;
@@ -206,37 +245,39 @@ export function BatchSelectionModal({
   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 
+              <SearchableSelect
                 key={selectKey}
                 options={batches as any[]}
                 onChange={(val) => {
-                  if(val) handleSelectExisting(val as string | number);
+                  if (val) handleSelectExisting(val as string | number);
                 }}
                 placeholder="Select Existing Batch..."
-                option={{ label: 'batch_number', value: 'id', renderOption: (opt: any) => (
-                  <div className="flex flex-col w-full py-0.5 gap-0.5">
-                    <div className="flex justify-between items-center w-full gap-2">
-                      <span className="truncate font-medium">{opt.batch_number}</span>
-                      {opt.qty_available !== undefined && (
-                        <span className="text-[10px] font-medium text-foreground-subtle bg-surface-hover px-1.5 py-0.5 rounded whitespace-nowrap shrink-0">
-                          {Number(opt.qty_available).toFixed(2)} in stock
+                option={{
+                  label: 'batch_number', value: 'id', renderOption: (opt: any) => (
+                    <div className="flex flex-col w-full py-0.5 gap-0.5">
+                      <div className="flex justify-between items-center w-full gap-2">
+                        <span className="truncate font-medium">{opt.batch_number}</span>
+                        {opt.qty_available !== undefined && (
+                          <span className="text-[10px] font-medium text-foreground-subtle bg-surface-hover px-1.5 py-0.5 rounded whitespace-nowrap shrink-0">
+                            {Number(opt.qty_available).toFixed(2)} in stock
+                          </span>
+                        )}
+                      </div>
+                      {opt.expiry_date && (
+                        <span className="text-[10px] text-foreground-subtle">
+                          Exp: {opt.expiry_date.substring(0, 10)}
                         </span>
                       )}
                     </div>
-                    {opt.expiry_date && (
-                      <span className="text-[10px] text-foreground-subtle">
-                        Exp: {opt.expiry_date.substring(0, 10)}
-                      </span>
-                    )}
-                  </div>
-                ) }}
+                  )
+                }}
               />
             </div>
           </div>
@@ -265,93 +306,105 @@ export function BatchSelectionModal({
                 rows.map(row => {
                   const batchInfo = batches.find(b => String(b.id) === String(row.batch_id));
                   const displayQtyAvailable = row.qty_available !== undefined ? row.qty_available : batchInfo?.qty_available;
-                  
+
                   return (
-                  <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 && displayQtyAvailable !== undefined ? displayQtyAvailable : 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 && displayQtyAvailable !== undefined && (
-                          <span className="text-[10px] text-gray-400 mt-0.5">Avail: {Number(displayQtyAvailable).toFixed(4)}</span>
+                    <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>
                         )}
-                      </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>
+                      </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 && displayQtyAvailable !== undefined ? displayQtyAvailable : 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 && displayQtyAvailable !== undefined && (
+                            <span className="text-[10px] text-gray-400 mt-0.5">Avail: {Number(displayQtyAvailable).toFixed(4)}</span>
+                          )}
+                        </div>
+                      </TCell>
+                      <TCell label="">
+                        <div className="flex justify-center items-center gap-1 w-full">
+                          {row.isNew && (
+                            <button
+                              onClick={() => saveBatchToDB(row)}
+                              className="p-1 text-primary-600 hover:text-primary-700 rounded-md hover:bg-primary-50 transition-colors"
+                              title="Save Batch"
+                            >
+                              <Save size={16} />
+                            </button>
+                          )}
+                          <button
+                            onClick={() => removeRow(row.uid)}
+                            className="p-1 text-gray-400 hover:text-danger-500 rounded-md hover:bg-danger-50 transition-colors flex justify-center"
+                            title="Remove"
+                          >
+                            <X size={16} />
+                          </button>
+                        </div>
+                      </TCell>
+                    </TRow>
                   );
                 })
               ) : (

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

@@ -36,12 +36,13 @@ interface MetadataPanelProps {
   isSubmitting: boolean;
   renderExtraMeta?: () => React.ReactNode;
   fetchChequeLeaves?: (query: string, page: number) => Promise<{ is_success: boolean; result?: any[] }>;
+  isFullscreen?: boolean;
 }
 
 export function MetadataPanel({
   config, lineItems, partyId, partyName, warehouseId, warehouseName, transactionDate, expectedDeliveryDate, notes, payments,
   onPartyChange, onWarehouseChange, onDateChange, onExpectedDeliveryDateChange, onNotesChange, onPaymentsChange, onSubmit, isSubmitting,
-  renderExtraMeta, fetchChequeLeaves,
+  renderExtraMeta, fetchChequeLeaves, isFullscreen,
 }: MetadataPanelProps) {
   const [paymentModes, setPaymentModes] = useState<PaymentMode[]>([]);
   const [bankAccounts, setBankAccounts] = useState<BankAccount[]>([]);
@@ -132,7 +133,9 @@ export function MetadataPanel({
   );
 
   return (
-    <div className="flex flex-col h-full gap-6">
+    <div className="flex flex-col h-full">
+      {/* ── Scrollable Content ── */}
+      <div className="flex-1 overflow-y-auto custom-scrollbar space-y-6 pr-1">
       {/* ── Extra Module-Specific Meta (e.g. adjustment type/reason) ── */}
       {renderExtraMeta && renderExtraMeta()}
 
@@ -216,8 +219,8 @@ export function MetadataPanel({
         </Section>
       )}
 
-      {/* ── Totals ── */}
-      {config.showPrices && lineItems.length > 0 && (
+      {/* ── Totals (hidden for POS — shown at bottom of left panel instead) ── */}
+      {config.showPrices && config.type !== 'pos' && lineItems.length > 0 && (
         <div className="bg-surface-0 rounded-[12px] border border-border-subtle p-4 space-y-2">
           <TotalRow label="Subtotal" value={formatCurrency(subtotal)} />
           {discountTotal > 0 && (
@@ -239,23 +242,29 @@ export function MetadataPanel({
             fetchBankAccounts={getBankAccountsLookup}
             fetchChequeLeaves={fetchChequeLeaves}
             compact={true}
+            collapseModes={config.type === 'pos'}
           />
         </Section>
       )}
+      </div>
 
-      {/* ── Spacer ── */}
-      <div className="flex-1" />
-
-      {/* ── Submit Button ── */}
-      <Button
-        type="submit"
-        color="primary"
-        isDisabled={lineItems.length === 0}
-        isLoading={isSubmitting}
-        className="!w-full !py-4 !text-[14px] !font-semibold !rounded-[10px]"
-      >
-        {config.submitLabel}
-      </Button>
+      {/* ── Submit Button (sticky bottom) ── */}
+      <div className="shrink-0 pt-4">
+        <Button
+          type="submit"
+          color="primary"
+          isDisabled={lineItems.length === 0}
+          isLoading={isSubmitting}
+          className={cn(
+            "!w-full !font-semibold transition-all",
+            isFullscreen 
+              ? "!h-[72px] !text-[18px] !rounded-[12px] shadow-lg shadow-primary/20" 
+              : "!py-4 !text-[14px] !rounded-[10px]"
+          )}
+        >
+          {config.submitLabel}
+        </Button>
+      </div>
     </div>
   );
 }

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

@@ -75,6 +75,7 @@ export function ProductSelectionPanel({
         try {
           const params: Record<string, string | number> = { search: value, limit: 20, type: config.type };
           if (warehouseId) params.warehouse_id = warehouseId;
+          if (config.allowPhantomBOM) params.allow_phantom_bom = 1;
 
           if (['sales', 'quotation', 'pos'].includes(config.type)) {
             params.apply_sales_prices = 1;
@@ -261,7 +262,7 @@ export function ProductSelectionPanel({
     let discAmt = line.discount_amount;
     let discPercent = line.discount_percent;
 
-    if (field === 'quantity') qty = Math.max(0.001, num);
+    if (field === 'quantity') qty = Math.max(0, num);
     if (field === 'unit_price') price = Math.max(0, num);
     if (field === 'discount_amount') {
       const maxDiscount = price;
@@ -353,7 +354,7 @@ export function ProductSelectionPanel({
   };
 
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex flex-col flex-1 min-h-0 w-full">
       {/* ── Search Bar ── */}
       {!config.disableItemSelection && (
         <div ref={panelRef} className="relative mb-4">
@@ -637,7 +638,8 @@ export function ProductSelectionPanel({
                                         <AsyncSearchableSelect
                                           controlClassName="!min-h-8 h-8 !py-1 text-sm"
                                           placeholder="Select Batch..."
-                                          loadOptions={async (search) => {
+                                          loadOptions={async (search, page) => {
+                                            if (page > 1) return []; // Backend is unpaginated, don't repeat on scroll
                                             const params: any = {};
                                             if (line.variant_id) params.variant_id = line.variant_id;
                                             if (warehouseId) params.warehouse_id = warehouseId;
@@ -728,7 +730,7 @@ export function ProductSelectionPanel({
                               })()}
                             </div>
                           )}
-                          {Number(line.unit_price) === 0 && (
+                          {Number(line.unit_price) === 0 && ['purchase', 'grn', 'quotation', 'sales', 'pos'].includes(config.type) && (
                             <div className="mt-2 flex items-center gap-2">
                               <label className={cn("flex items-center gap-1.5", !!(line.purchase_order_line_id || line.sales_order_line_id || line.sales_quotation_line_id) ? "cursor-not-allowed" : "cursor-pointer")}>
                                 <input
@@ -793,7 +795,7 @@ export function ProductSelectionPanel({
                     <TCell label="Qty" className="py-2.5 text-center">
                       <input
                         type="number"
-                        value={line.quantity}
+                        value={line.quantity === 0 ? '' : line.quantity}
                         onChange={(e) => updateLineInput(line.uid, 'quantity', e.target.value)}
                         className="w-20 h-10 px-2 text-[13px] text-center font-medium bg-surface-1 border border-border-subtle rounded-md focus:border-primary/50 focus:outline-none transition-colors"
                         min={0.001}

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

@@ -31,6 +31,7 @@ export function ProductTransactionScreen({
   fetchChequeLeaves,
   initialData,
   onAddNewItem,
+  isFullscreen,
 }: ProductTransactionScreenProps) {
   // ── State ──
   const [lineItems, setLineItems] = useState<TransactionLineItem[]>([]);
@@ -62,7 +63,7 @@ export function ProductTransactionScreen({
       const variantPriceField = config.priceField === 'default_cost_price' ? 'cost_price' : 'sale_price';
       const actualVariant = l.item.variants?.find((v: any) => v.id === l.variant_id);
       const batchPriceField = config.priceField === 'default_cost_price' ? 'cost_price' : 'selling_price';
-      const batchPrice = ['sales', 'quotation'].includes(config.type) && l.batches?.[0] ? (l.batches[0] as any)[batchPriceField] : undefined;
+      const batchPrice = ['sales', 'quotation', 'pos'].includes(config.type) && l.batches?.[0] ? (l.batches[0] as any)[batchPriceField] : undefined;
       const basePrice = (batchPrice !== undefined && batchPrice !== null)
         ? Number(batchPrice)
         : (actualVariant
@@ -260,7 +261,7 @@ export function ProductTransactionScreen({
           const variantPriceField = config.priceField === 'default_cost_price' ? 'cost_price' : 'sale_price';
           const actualVariant = updatedLine.item.variants?.find((v: any) => v.id === updatedLine.variant_id);
           const batchPriceField = config.priceField === 'default_cost_price' ? 'cost_price' : 'selling_price';
-          const batchPrice = ['sales', 'quotation'].includes(config.type) && updatedLine.batches?.[0] ? (updatedLine.batches[0] as any)[batchPriceField] : undefined;
+          const batchPrice = ['sales', 'quotation', 'pos'].includes(config.type) && updatedLine.batches?.[0] ? (updatedLine.batches[0] as any)[batchPriceField] : undefined;
           const basePrice = (batchPrice !== undefined && batchPrice !== null)
             ? Number(batchPrice)
             : (actualVariant
@@ -503,7 +504,7 @@ export function ProductTransactionScreen({
       {/* ── 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">
+        <div className="flex-[3] min-w-0 flex flex-col min-h-0">
           <ProductSelectionPanel
             config={config}
             partyId={partyId}
@@ -515,13 +516,41 @@ export function ProductTransactionScreen({
             onToggleExpand={handleToggleExpand}
             onAddNewItem={onAddNewItem}
           />
+
+          {/* ── POS: Amount to Pay Summary Bar ── */}
+          {config.type === 'pos' && lineItems.length > 0 && (
+            <div className="shrink-0 mt-3 bg-surface-0 rounded-[14px] border border-border-subtle px-5 py-3.5 flex items-center justify-between gap-6">
+              <div className="flex items-center gap-6">
+                <div className="flex items-center gap-2">
+                  <span className="text-[11.5px] font-semibold text-foreground-subtle uppercase tracking-wide">Subtotal</span>
+                  <span className="text-[13.5px] font-bold text-foreground-1">
+                    {subtotal.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+                  </span>
+                </div>
+                {discountTotal > 0 && (
+                  <div className="flex items-center gap-2">
+                    <span className="text-[11.5px] font-semibold text-foreground-subtle uppercase tracking-wide">Discount</span>
+                    <span className="text-[13.5px] font-bold text-green-600">
+                      -{discountTotal.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+                    </span>
+                  </div>
+                )}
+              </div>
+              <div className="flex items-center gap-3">
+                <span className="text-[12px] font-bold text-foreground-subtle uppercase tracking-wide">Amount to Pay</span>
+                <span className="text-[22px] font-extrabold text-foreground-0 tracking-tight tabular-nums">
+                  {grandTotal.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+                </span>
+              </div>
+            </div>
+          )}
         </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">
+        <div className="flex-1 min-w-0 flex flex-col">
           <MetadataPanel
             config={config}
             lineItems={lineItems}
@@ -556,7 +585,7 @@ export function ProductTransactionScreen({
                           const variantPriceField = config.priceField === 'default_cost_price' ? 'cost_price' : 'sale_price';
                           const actualVariant = l.item.variants?.find((v: any) => v.id === l.variant_id);
                           const batchPriceField = config.priceField === 'default_cost_price' ? 'cost_price' : 'selling_price';
-                          const batchPrice = ['sales', 'quotation'].includes(config.type) && l.batches?.[0] ? (l.batches[0] as any)[batchPriceField] : undefined;
+                          const batchPrice = ['sales', 'quotation', 'pos'].includes(config.type) && l.batches?.[0] ? (l.batches[0] as any)[batchPriceField] : undefined;
                           const basePrice = (batchPrice !== undefined && batchPrice !== null)
                             ? Number(batchPrice)
                             : (actualVariant
@@ -617,6 +646,7 @@ export function ProductTransactionScreen({
             isSubmitting={submitting}
             renderExtraMeta={renderExtraMeta}
             fetchChequeLeaves={fetchChequeLeaves}
+            isFullscreen={isFullscreen}
           />
         </div>
       </div>

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

@@ -171,6 +171,8 @@ export interface TransactionScreenConfig {
   disablePartySelection?: boolean;
   /** Disable warehouse selection (e.g. for revisions) */
   disableWarehouseSelection?: boolean;
+  /** Allow phantom BOMs to be selected (e.g. for stock decrease) */
+  allowPhantomBOM?: boolean;
 }
 
 // ── Module Presets ──
@@ -319,6 +321,8 @@ export interface ProductTransactionScreenProps {
   initialData?: any;
   /** Optional callback to create a new item directly from the search bar */
   onAddNewItem?: (callbacks: { setItemSearch: (value: string) => void }) => void;
+  /** Whether the screen is currently in fullscreen mode */
+  isFullscreen?: boolean;
 }
 
 export interface TransactionPayload {

package/src/components/shared/ImageUploadComponent.tsx

@@ -81,6 +81,9 @@ export default function ImageUploadComponent({
 
   const getAuthHeaders = (): Record<string, string> => {
     const headers: Record<string, string> = {};
+    if (typeof window !== "undefined") {
+      headers["X-Tenant-Domain"] = window.location.hostname;
+    }
     // Add org header
     try {
       const orgRaw = typeof window !== "undefined" ? localStorage.getItem("selected_organization") : null;