@apptimate/ui 4.1.0 → 4.2.0

package/package.json

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

package/src/common-components/DashboardLayout.tsx

@@ -5,7 +5,7 @@ import { Briefcase, CreditCard, Settings, Menu, X, LogOut, User as UserIcon, Bui
 import { Dropdown, DropdownItem } from '../base-components/Dropdown';
 
 import Link from 'next/link';
-import { usePathname } from 'next/navigation';
+import { usePathname, useRouter } from 'next/navigation';
 import { cn } from '@apptimate/core-lib';
 
 export type DashboardMenuConfig = {
@@ -68,6 +68,7 @@ export function DashboardLayout({
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const [isOrgModalOpen, setIsOrgModalOpen] = useState(false);
   const pathname = usePathname() || "";
+  const router = useRouter();
 
   // Find which main menu should be active based on current path.
   // When basePath is set, prefer the menu whose items are mostly within basePath.
@@ -106,6 +107,26 @@ export function DashboardLayout({
 
   const activeMenu = menus.find(m => m.id === activeMenuId) || menus[0];
 
+  const handleMainMenuSelect = (menu: DashboardMenuConfig) => {
+    setActiveMenuId(menu.id);
+
+    const firstItem = menu.groups.flatMap(group => group.items)[0];
+    if (!firstItem) return;
+
+    const isInternal = basePath
+      ? firstItem.path.startsWith(basePath)
+      : !externalPaths.some(path => firstItem.path.startsWith(path));
+    const href = basePath && isInternal
+      ? firstItem.path.replace(basePath, "") || "/"
+      : firstItem.path;
+
+    if (isInternal) {
+      router.push(href);
+    } else {
+      window.location.href = href;
+    }
+  };
+
   const handleSelectOrg = (org: OrganizationConfig) => {
     onOrganizationChange?.(org);
     setIsOrgModalOpen(false);
@@ -158,7 +179,7 @@ export function DashboardLayout({
             return (
               <div
                 key={menu.id}
-                onClick={() => setActiveMenuId(menu.id)}
+                onClick={() => handleMainMenuSelect(menu)}
                 className={`flex flex-col items-center justify-center gap-1.5 cursor-pointer transition-colors w-full px-1 ${isActive ? "text-[#2D3142]" : "text-gray-400 hover:text-[#2D3142]"
                   }`}
               >

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

@@ -9,6 +9,7 @@ import {
 } from 'lucide-react';
 import { getPaymentModes, getBankAccountsLookup } from '@apptimate/core-lib';
 import { PartyPicker, WarehousePicker } from '../pickers';
+import { PaymentSection } from '../PaymentSection';
 import type {
   TransactionScreenConfig, PaymentMode, PaymentEntry, BankAccount,
   PartyLookup, PaymentModeField, TransactionLineItem,
@@ -34,12 +35,13 @@ interface MetadataPanelProps {
   onSubmit: () => void;
   isSubmitting: boolean;
   renderExtraMeta?: () => React.ReactNode;
+  fetchChequeLeaves?: (query: string, page: number) => Promise<{ is_success: boolean; result?: any[] }>;
 }
 
 export function MetadataPanel({
   config, lineItems, partyId, partyName, warehouseId, warehouseName, transactionDate, expectedDeliveryDate, notes, payments,
   onPartyChange, onWarehouseChange, onDateChange, onExpectedDeliveryDateChange, onNotesChange, onPaymentsChange, onSubmit, isSubmitting,
-  renderExtraMeta,
+  renderExtraMeta, fetchChequeLeaves,
 }: MetadataPanelProps) {
   const [paymentModes, setPaymentModes] = useState<PaymentMode[]>([]);
   const [bankAccounts, setBankAccounts] = useState<BankAccount[]>([]);
@@ -226,77 +228,15 @@ export function MetadataPanel({
       {/* ── Payment Section ── */}
       {config.showPayment && (
         <Section label="Payment">
-          {isLoadingMeta ? (
-            <div className="flex items-center justify-center py-4">
-              <Loader2 size={18} className="animate-spin text-primary" />
-            </div>
-          ) : (
-            <div className="space-y-2.5">
-              {/* Existing payment entries */}
-              {payments.map((entry, idx) => {
-                const mode = paymentModes.find((m) => m.id === entry.mode_id);
-                return (
-                  <PaymentEntryRow
-                    key={idx}
-                    entry={entry}
-                    mode={mode}
-                    bankAccounts={bankAccounts}
-                    onUpdate={(updates) => updatePayment(idx, updates)}
-                    onRemove={() => removePayment(idx)}
-                  />
-                );
-              })}
-
-              {/* Add payment mode buttons */}
-              {(lineItems.length > 0) && (
-                <div className="flex flex-wrap gap-2 pt-1">
-                  {paymentModes
-                    .filter((m) => m.is_active)
-                    .map((mode) => {
-                      const modeIcon = mode.code === 'cash' ? <Banknote size={14} /> :
-                                       mode.code === 'card' ? <CreditCard size={14} /> :
-                                       mode.code === 'bank_transfer' ? <Building size={14} /> :
-                                       <CreditCard size={14} />;
-                      return (
-                        <button
-                          key={mode.id}
-                          onClick={() => addPayment(mode)}
-                          className="inline-flex items-center gap-2 px-4 py-2 text-[12px] font-semibold rounded-[10px] bg-surface-0 border border-border-subtle text-foreground-1 hover:border-primary/40 hover:bg-primary/5 hover:text-primary transition-all"
-                        >
-                          {modeIcon}
-                          {mode.name}
-                        </button>
-                      );
-                    })}
-                </div>
-              )}
-
-              {/* Balance */}
-              {payments.length > 0 && (
-                <div className="bg-surface-0 rounded-[10px] border border-border-subtle p-3.5 mt-2 space-y-1.5">
-                  <TotalRow label="Total Paid" value={formatCurrency(totalPaid)} />
-                  <TotalRow
-                    label={balance > 0.01 ? "Balance Due" : balance < -0.01 ? "Change Due" : "Settled"}
-                    value={formatCurrency(Math.abs(balance))}
-                    className={balance > 0.01 ? 'text-danger-alt' : balance < -0.01 ? 'text-amber-600' : 'text-green-600'}
-                    bold
-                  />
-                  {balance < -0.01 && (
-                    <div className="flex items-center gap-1.5 mt-1 text-[11px] text-amber-600 font-medium">
-                      <AlertCircle size={12} />
-                      <span>Change: {formatCurrency(Math.abs(balance))}</span>
-                    </div>
-                  )}
-                  {Math.abs(balance) < 0.01 && (
-                    <div className="flex items-center gap-1.5 mt-1 text-[11px] text-green-600 font-medium">
-                      <Check size={12} />
-                      <span>Fully paid</span>
-                    </div>
-                  )}
-                </div>
-              )}
-            </div>
-          )}
+          <PaymentSection
+            totalAmount={grandTotal}
+            payments={payments}
+            onPaymentsChange={onPaymentsChange}
+            fetchPaymentModes={getPaymentModes}
+            fetchBankAccounts={getBankAccountsLookup}
+            fetchChequeLeaves={fetchChequeLeaves}
+            compact={true}
+          />
         </Section>
       )}
 

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

@@ -312,9 +312,10 @@ export function ProductSelectionPanel({
   return (
     <div className="flex flex-col h-full">
       {/* ── Search Bar ── */}
-      <div ref={panelRef} className="relative mb-4">
-        <div className="flex items-center gap-2 bg-surface-0 border-[1.5px] border-border-subtle rounded-[12px] px-4 py-2.5 focus-within:border-primary/50 transition-all">
-          <Search size={18} className="text-foreground-disabled shrink-0" />
+      {!config.disableItemSelection && (
+        <div ref={panelRef} className="relative mb-4">
+          <div className="flex items-center gap-2 bg-surface-0 border-[1.5px] border-border-subtle rounded-[12px] px-4 py-2.5 focus-within:border-primary/50 transition-all">
+            <Search size={18} className="text-foreground-disabled shrink-0" />
           <input
             ref={inputRef}
             type="text"
@@ -513,6 +514,7 @@ export function ProductSelectionPanel({
           </div>
         )}
       </div>
+      )}
 
       {/* ── Selected Items Table ── */}
       <div className="flex-1 overflow-y-auto custom-scrollbar w-full">
@@ -549,9 +551,16 @@ export function ProductSelectionPanel({
                         )}
                       </div>
                       <div className="flex flex-col flex-1 min-w-0">
-                        <span className="text-[13px] font-semibold text-foreground-1 leading-tight break-words">{line.item.name}</span>
+                        <span className="text-[13px] font-semibold text-foreground-1 leading-tight break-words">
+                          {line.item.name}
+                          {line.is_free_qty && (
+                            <span className="ml-2 inline-flex items-center px-1.5 py-0.5 rounded text-[9px] font-bold bg-green-100 text-green-700 uppercase tracking-wider align-middle">
+                              Free
+                            </span>
+                          )}
+                        </span>
                         <span className="text-[11px] text-foreground-subtle font-mono mt-0.5 break-words">
-                          {line.variant_id && line.item.variants?.find(v => v.id === line.variant_id)
+                          {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}
                         </span>
@@ -610,23 +619,36 @@ export function ProductSelectionPanel({
                             })()}
                           </div>
                         )}
-                        {(config.type === 'purchase' || config.type === 'grn') && line.unit_price === 0 && (
+                        {(config.type === 'purchase' || config.type === 'grn') && Number(line.unit_price) === 0 && (
                           <div className="mt-2 flex items-center gap-2">
-                            <label className="flex items-center gap-1.5 cursor-pointer">
+                            <label className={cn("flex items-center gap-1.5", !!line.purchase_order_line_id ? "cursor-not-allowed" : "cursor-pointer")}>
                               <input 
                                 type="checkbox" 
                                 checked={line.is_free_qty || false}
                                 onChange={(e) => handleToggleFreeQty(line.uid, e.target.checked)}
-                                className="rounded border-border-subtle text-primary focus:ring-primary h-3 w-3"
+                                disabled={!!line.purchase_order_line_id}
+                                className={cn(
+                                  "rounded border-border-subtle text-primary h-3 w-3",
+                                  !!line.purchase_order_line_id ? "opacity-50 cursor-not-allowed" : "focus:ring-primary"
+                                )}
                               />
-                              <span className="text-[11.5px] font-medium text-foreground-subtle hover:text-foreground-1 transition-colors">Free Quantity</span>
+                              <span className={cn(
+                                "text-[11.5px] font-medium transition-colors",
+                                !!line.purchase_order_line_id ? "text-foreground-disabled" : "text-foreground-subtle hover:text-foreground-1"
+                              )}>
+                                Free Quantity
+                              </span>
                             </label>
 
                             {line.is_free_qty && (
                               <div className="flex items-center">
                                 <button
                                   onClick={() => setActiveParentLineUidFor(line.uid)}
-                                  className="h-6 text-[11.5px] bg-surface-1 border border-border-subtle hover:bg-surface-hover rounded-md px-2 ml-2 min-w-[120px] max-w-[180px] text-left truncate transition-colors focus:border-primary/50 focus:outline-none flex justify-between items-center"
+                                  disabled={!!line.purchase_order_line_id}
+                                  className={cn(
+                                    "h-6 text-[11.5px] bg-surface-1 border border-border-subtle rounded-md px-2 ml-2 min-w-[120px] max-w-[180px] text-left truncate transition-colors flex justify-between items-center",
+                                    !!line.purchase_order_line_id ? "opacity-60 cursor-not-allowed" : "hover:bg-surface-hover focus:border-primary/50 focus:outline-none"
+                                  )}
                                 >
                                   <span>
                                     {line.parent_line_uids && line.parent_line_uids.length > 0
@@ -634,13 +656,9 @@ 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.name} ${
-                                                  p.variant_id
-                                                    ? `(${
-                                                        p.item.variants?.find((v) => v.id === p.variant_id)?.variant_name
-                                                      })`
-                                                    : ""
-                                                }`
+                                              ? 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...";
                                           } else {
                                             return `${line.parent_line_uids.length} Parents Selected`;
@@ -674,7 +692,8 @@ export function ProductSelectionPanel({
                       <select
                         value={line.uom_id || line.item.uom_id || ''}
                         onChange={(e) => updateLineInput(line.uid, 'uom_id', e.target.value)}
-                        className="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 min-w-[80px]"
+                        disabled={line.item.tracking_type === 'serial'}
+                        className="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 min-w-[80px] disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50"
                       >
                         {line.item.uom?.uom_group?.uoms?.map((uom: any) => (
                           <option key={uom.id} value={uom.id}>{uom.abbreviation}</option>
@@ -687,7 +706,7 @@ export function ProductSelectionPanel({
                     <TCell label="Rate" className="py-2.5">
                       <input
                         type="text"
-                        value={editingRates[line.uid] ?? line.unit_price.toFixed(2)}
+                        value={editingRates[line.uid] ?? Number(line.unit_price || 0).toFixed(2)}
                         onChange={(e) => {
                           const val = e.target.value;
                           if (/^\d*\.?\d{0,2}$/.test(val)) {

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

@@ -1,7 +1,8 @@
 'use client';
 
-import React, { useState, useCallback, useMemo } from 'react';
+import React, { useState, useCallback, useMemo, useEffect } from 'react';
 import { cn } from '@apptimate/core-lib';
+import toast from 'react-hot-toast';
 import { ProductSelectionPanel } from './ProductSelectionPanel';
 import { MetadataPanel } from './MetadataPanel';
 import type {
@@ -25,6 +26,8 @@ export function ProductTransactionScreen({
   onSubmit,
   isSubmitting: externalSubmitting,
   renderExtraMeta,
+  fetchChequeLeaves,
+  initialData,
 }: ProductTransactionScreenProps) {
   // ── State ──
   const [lineItems, setLineItems] = useState<TransactionLineItem[]>([]);
@@ -42,6 +45,43 @@ export function ProductTransactionScreen({
 
   const submitting = externalSubmitting ?? isSubmitting;
 
+  useEffect(() => {
+    if (initialData) {
+      if (initialData.party_id) {
+        setPartyId(initialData.party_id);
+        if (initialData.party?.name) setPartyName(initialData.party.name);
+      }
+      if (initialData.warehouse_id) {
+        setWarehouseId(initialData.warehouse_id);
+      }
+      if (initialData.lines && Array.isArray(initialData.lines)) {
+        setLineItems(
+          initialData.lines.map((l: any) => {
+            const qty = l.quantity || 1;
+            const unitPrice = l.unit_price || 0;
+            return {
+              uid: l.uid || Math.random().toString(36).slice(2, 7),
+              item: l.item,
+              variant_id: l.variant_id || null,
+              batches: [],
+              serial_numbers: [],
+              quantity: qty,
+              unit_price: unitPrice,
+              discount_percent: 0,
+              discount_amount: 0,
+              line_total: unitPrice * qty,
+              expanded: false,
+              is_free_qty: l.is_free_qty,
+              parent_line_uids: l.parent_line_uids,
+              uom_id: l.uom_id,
+              purchase_order_line_id: l.purchase_order_line_id,
+            };
+          })
+        );
+      }
+    }
+  }, [initialData]);
+
   // ── Add item to line items ──
   const handleAddItem = useCallback(
     (
@@ -80,6 +120,7 @@ export function ProductTransactionScreen({
           discount_amount: discountAmt,
           line_total: unitPrice * qty - discountAmt,
           expanded: false,
+          uom_id: itemWithVariants.uom_id,
         };
         return [...prevLineItems, newLine];
       });
@@ -115,6 +156,33 @@ export function ProductTransactionScreen({
   const handleSubmit = useCallback(async () => {
     if (lineItems.length === 0) return;
 
+    if (config.requireFullPayment) {
+      const totalPayments = payments.reduce((sum, p) => sum + (Number(p.amount) || 0), 0);
+      if (Math.abs(totalPayments - grandTotal) > 0.01) {
+        toast.error('Total payments must equal the Grand Total (Use Credit mode to pay later).');
+        return;
+      }
+    }
+
+    if (!config.disableTrackingSelection) {
+      for (const line of lineItems) {
+        if (line.item.tracking_type === 'batch') {
+          const selectedTotal = line.batches?.reduce((sum, b) => sum + b.quantity, 0) || 0;
+          if (selectedTotal !== line.quantity) {
+            toast.error(`Please select batches for ${line.item.name} to match the total quantity.`);
+            return;
+          }
+        }
+        if (line.item.tracking_type === 'serial') {
+          const selectedCount = line.serial_numbers?.length || 0;
+          if (selectedCount !== line.quantity) {
+            toast.error(`Please select exactly ${line.quantity} serial numbers for ${line.item.name}.`);
+            return;
+          }
+        }
+      }
+    }
+
     const payload: TransactionPayload = {
       type: config.type,
       party_id: partyId,
@@ -139,6 +207,7 @@ export function ProductTransactionScreen({
             is_free_qty: l.is_free_qty,
             parent_line_uids: l.parent_line_uids,
             uom_id: l.uom_id,
+            purchase_order_line_id: l.purchase_order_line_id,
             unit_price: l.unit_price,
             discount_percent: l.discount_percent,
             discount_amount: (l.discount_amount / l.quantity) * b.quantity,
@@ -160,6 +229,7 @@ export function ProductTransactionScreen({
           is_free_qty: l.is_free_qty,
           parent_line_uids: l.parent_line_uids,
           uom_id: l.uom_id,
+          purchase_order_line_id: l.purchase_order_line_id,
           unit_price: l.unit_price,
           discount_percent: l.discount_percent,
           discount_amount: l.discount_amount,
@@ -234,6 +304,7 @@ export function ProductTransactionScreen({
             onSubmit={handleSubmit}
             isSubmitting={submitting}
             renderExtraMeta={renderExtraMeta}
+            fetchChequeLeaves={fetchChequeLeaves}
           />
         </div>
       </div>

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

@@ -77,6 +77,7 @@ export interface TransactionLineItem {
   is_free_qty?: boolean;
   parent_line_uids?: string[];
   uom_id?: number;
+  purchase_order_line_id?: number | null;
   unit_price: number;
   discount_percent: number;
   discount_amount: number;
@@ -137,6 +138,8 @@ export interface TransactionScreenConfig {
   partyIsWarehouse?: boolean;
   /** Whether to show the party selector at all (defaults to true) */
   showParty?: boolean;
+  /** Disable the search bar (useful for PO to GRN conversions where items are fixed) */
+  disableItemSelection?: boolean;
   /** Allow creating new batches and serials during selection */
   allowCreateBatchAndSerial?: boolean;
   /** If true, user must select a warehouse before searching/adding items */
@@ -151,6 +154,8 @@ export interface TransactionScreenConfig {
   showExpectedDeliveryDate?: boolean;
   /** Disable batch/serial selection completely (e.g. for Purchase Orders and Quotations) */
   disableTrackingSelection?: boolean;
+  /** Enforce that the sum of payments equals the grand total before allowing submission */
+  requireFullPayment?: boolean;
 }
 
 // ── Module Presets ──
@@ -263,7 +268,7 @@ export const TRANSACTION_PRESETS: Record<TransactionType, TransactionScreenConfi
     priceField: 'default_cost_price',
     showPrices: true,
     allowDiscount: true,
-    showPayment: false,
+    showPayment: true,
     partyLabel: 'Supplier',
     partyType: 'supplier',
     showWarehouse: true,
@@ -273,6 +278,7 @@ export const TRANSACTION_PRESETS: Record<TransactionType, TransactionScreenConfi
     allowCreateBatchAndSerial: true,
     allowEditPrice: true,
     showStock: true,
+    requireFullPayment: true,
   },
 };
 
@@ -289,6 +295,10 @@ export interface ProductTransactionScreenProps {
   isSubmitting?: boolean;
   /** Optional extra content rendered at the top of the metadata (right) panel */
   renderExtraMeta?: () => React.ReactNode;
+  /** Fetcher for cheque leaves (for auto-complete) */
+  fetchChequeLeaves?: (query: string, page: number) => Promise<{ is_success: boolean; result?: any[] }>;
+  /** Initial data for populating the transaction screen (e.g., from a PO) */
+  initialData?: any;
 }
 
 export interface TransactionPayload {
@@ -313,6 +323,7 @@ export interface TransactionPayload {
     is_free_qty?: boolean;
     parent_line_uids?: string[];
     uom_id?: number;
+    purchase_order_line_id?: number | null;
     unit_price: number;
     discount_percent: number;
     discount_amount: number;