@apptimate/ui 4.7.0 → 4.8.0

package/package.json

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

package/src/common-components/DashboardLayout.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useState } from 'react';
-import { Briefcase, CreditCard, Settings, Menu, X, LogOut, User as UserIcon, Building2, ChevronRight, Check } from 'lucide-react';
+import { Briefcase, CreditCard, Settings, Menu, X, LogOut, User as UserIcon, Building2, ChevronRight, Check, PanelLeftClose, PanelLeftOpen } from 'lucide-react';
 import { Dropdown, DropdownItem } from '../base-components/Dropdown';
 
 import Link from 'next/link';
@@ -67,6 +67,7 @@ export function DashboardLayout({
 }) {
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const [isOrgModalOpen, setIsOrgModalOpen] = useState(false);
+  const [isSubSidebarOpen, setIsSubSidebarOpen] = useState(true);
   const pathname = usePathname() || "";
   const router = useRouter();
 
@@ -140,11 +141,22 @@ export function DashboardLayout({
   return (
     <div className="flex h-screen bg-[#F4F5F7] overflow-hidden font-sans print:h-auto print:overflow-visible print:bg-white">
       {/* Desktop Global Sidebar */}
-      <aside className="hidden md:flex print:hidden w-[80px] bg-white border-r border-gray-200 flex-col items-center py-6 shrink-0 z-20">
+      <aside className="hidden md:flex print:hidden w-[80px] bg-white border-r border-gray-200 flex-col items-center py-6 shrink-0 z-30 relative group">
         <div className="w-12 h-12 flex items-center justify-center mb-8">
           {logo}
         </div>
 
+        {/* Floating Open Button when Sub-sidebar is closed */}
+        {!isSubSidebarOpen && activeMenu && activeMenu.groups.length > 0 && (
+          <button
+            onClick={() => setIsSubSidebarOpen(true)}
+            className="hidden md:flex absolute -right-4 top-6 z-40 w-8 h-8 bg-white border border-gray-200 rounded-full shadow-sm items-center justify-center text-gray-500 hover:text-[#2D3142] hover:bg-gray-50 transition-all outline-none opacity-0 group-hover:opacity-100 cursor-pointer"
+            title="Expand Sidebar"
+          >
+            <PanelLeftOpen size={16} />
+          </button>
+        )}
+
         <style dangerouslySetInnerHTML={{
           __html: `
           .sidebar-scroll {
@@ -179,7 +191,10 @@ export function DashboardLayout({
             return (
               <div
                 key={menu.id}
-                onClick={() => setActiveMenuId(menu.id)}
+                onClick={() => {
+                  setActiveMenuId(menu.id);
+                  setIsSubSidebarOpen(true);
+                }}
                 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]"
                   }`}
               >
@@ -226,8 +241,17 @@ export function DashboardLayout({
 
       {/* Desktop Secondary Sidebar */}
       {activeMenu && activeMenu.groups.length > 0 && (
-        <aside className="hidden md:flex print:hidden w-[210px] bg-white border-gray-200 flex-col py-8 shrink-0 z-10">
-          <h2 className="px-6 text-xl font-bold text-[#2D3142]/80 mb-6">{activeMenu.label}</h2>
+        <>
+          <aside className={cn(
+            "hidden md:flex print:hidden bg-white border-gray-200 flex-col py-8 shrink-0 z-10 transition-all duration-300 overflow-hidden group",
+            isSubSidebarOpen ? "w-[210px]" : "w-0 opacity-0 px-0"
+          )}>
+            <div className="flex items-center justify-between px-6 mb-6 w-[210px]">
+              <h2 className="text-xl font-bold text-[#2D3142]/80 truncate">{activeMenu.label}</h2>
+              <button onClick={() => setIsSubSidebarOpen(false)} className="text-gray-400 hover:text-[#2D3142] transition-colors flex-shrink-0 outline-none opacity-0 group-hover:opacity-100 cursor-pointer">
+                <PanelLeftClose size={18} />
+              </button>
+            </div>
           <div className="flex-1 overflow-y-auto px-4 space-y-6">
             {activeMenu.groups.map((group) => (
               <div key={group.id}>
@@ -296,6 +320,8 @@ export function DashboardLayout({
             </div>
           )}
         </aside>
+
+        </>
       )}
 
       {/* Main Content Area & Mobile Header */}

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

@@ -57,24 +57,24 @@ export function ProductTransactionScreen({
     setLineItems(prev => prev.map(l => {
       if (l.is_free_qty || !l.variant_id || !evaluatedRules[l.variant_id]) return l;
       const rules = evaluatedRules[l.variant_id];
-      
+
       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 basePrice = (batchPrice !== undefined && batchPrice !== null)
         ? Number(batchPrice)
-        : (actualVariant 
-          ? Number(actualVariant[variantPriceField] || l.item[config.priceField] || 0) 
+        : (actualVariant
+          ? Number(actualVariant[variantPriceField] || l.item[config.priceField] || 0)
           : Number(l.item[config.priceField] || 0));
-      
+
       const uoms = l.item.uom?.uom_group?.uoms || [];
       const currentUom = uoms.find((u: any) => u.id === (l.uom_id || l.item.uom_id));
       const factor = Number(currentUom?.conversion_factor) || 1;
       const effectiveQty = l.quantity * factor;
 
       const priceDetails = PriceCalculationService.calculatePriceDetails(basePrice, effectiveQty, rules, l.batches?.[0]?.batch_id);
-      
+
       return {
         ...l,
         pricing_rules: rules,
@@ -111,6 +111,13 @@ export function ProductTransactionScreen({
         setWarehouseId(initialData.warehouse_id);
         if (initialData.warehouse?.name) setWarehouseName(initialData.warehouse.name);
       }
+      if (initialData.transaction_date || initialData.order_date || initialData.quotation_date || initialData.date) {
+        setTransactionDate(initialData.transaction_date || initialData.order_date || initialData.quotation_date || initialData.date);
+      }
+      if (initialData.expected_delivery_date || initialData.expected_delivery) {
+        setExpectedDeliveryDate(initialData.expected_delivery_date || initialData.expected_delivery);
+      }
+
       if (initialData.lines && Array.isArray(initialData.lines)) {
         setLineItems(
           initialData.lines.map((l: any) => {
@@ -135,7 +142,7 @@ export function ProductTransactionScreen({
             };
           })
         );
-        
+
         // Populate pricing rules for existing items if party is selected
         if (initialData.party_id && ['sales', 'pos', 'quotation'].includes(config.type)) {
           evaluatePriceLists({
@@ -152,7 +159,7 @@ export function ProductTransactionScreen({
                 return line;
               }));
             }
-          }).catch(() => {});
+          }).catch(() => { });
         }
       }
     }
@@ -186,7 +193,7 @@ export function ProductTransactionScreen({
           ? Number(batchPrice)
           : (actualVariant ? Number(actualVariant[variantPriceField] || itemWithVariants[config.priceField] || 0) : Number(itemWithVariants[config.priceField] || 0));
         const qty = extra?.quantity || 1;
-        
+
         const uomId = itemWithVariants.uom_id;
         const uoms = itemWithVariants.uom?.uom_group?.uoms || [];
         const currentUom = uoms.find((u: any) => u.id === uomId);
@@ -206,7 +213,7 @@ export function ProductTransactionScreen({
           discountAmt = priceDetails.discountAmount * factor;
           appliedRule = priceDetails.appliedRule;
         }
-        
+
         const newLine: TransactionLineItem = {
           uid: `${itemWithVariants.id}-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,
           item: itemWithVariants,
@@ -253,14 +260,14 @@ export function ProductTransactionScreen({
           const batchPrice = ['sales', 'quotation'].includes(config.type) && updatedLine.batches?.[0] ? (updatedLine.batches[0] as any)[batchPriceField] : undefined;
           const basePrice = (batchPrice !== undefined && batchPrice !== null)
             ? Number(batchPrice)
-            : (actualVariant 
-              ? Number(actualVariant[variantPriceField] || updatedLine.item[config.priceField] || 0) 
+            : (actualVariant
+              ? Number(actualVariant[variantPriceField] || updatedLine.item[config.priceField] || 0)
               : Number(updatedLine.item[config.priceField] || 0));
-          
+
           const uoms = updatedLine.item.uom?.uom_group?.uoms || [];
           const currentUom = uoms.find((u: any) => u.id === (updatedLine.uom_id || updatedLine.item.uom_id));
           const factor = Number(currentUom?.conversion_factor) || 1;
-          
+
           const effectiveQty = updatedLine.quantity * factor;
 
           console.log("DEBUG: handleUpdateLine rules -> ", {
@@ -275,7 +282,7 @@ export function ProductTransactionScreen({
           updatedLine.line_total = (updatedLine.unit_price * updatedLine.quantity) - updatedLine.discount_amount;
         } else if (isQtyChanged || isUomChanged || isPriceChanged || isDiscountChanged) {
           updatedLine.line_total = (updatedLine.unit_price * updatedLine.quantity) - updatedLine.discount_amount;
-          
+
           const isManualPriceOverride = isPriceChanged && !isUomChanged;
           if (isManualPriceOverride) {
             updatedLine.applied_price_rule = undefined;
@@ -286,6 +293,14 @@ export function ProductTransactionScreen({
           updatedLine.batches[0].quantity = updatedLine.quantity;
         }
 
+        if (updatedLine.is_free_qty) {
+          updatedLine.unit_price = 0;
+          updatedLine.discount_amount = 0;
+          updatedLine.discount_percent = 0;
+          updatedLine.line_total = 0;
+          updatedLine.applied_price_rule = undefined;
+        }
+
         return updatedLine;
       })
     );
@@ -470,7 +485,7 @@ export function ProductTransactionScreen({
             expectedDeliveryDate={expectedDeliveryDate}
             notes={notes}
             payments={payments}
-            onPartyChange={async (id, party) => { 
+            onPartyChange={async (id, party) => {
               if (partyId !== id && lineItems.length > 0 && ['sales', 'pos', 'quotation'].includes(config.type)) {
                 if (hasActivePriceLists) {
                   toast.loading('Checking price changes...', { id: 'price-calc' });
@@ -480,12 +495,12 @@ export function ProductTransactionScreen({
                       transaction_type: config.type,
                       items: lineItems.filter(l => l.variant_id && !l.is_free_qty).map(l => ({ variant_id: l.variant_id! }))
                     });
-                    
+
                     toast.dismiss('price-calc');
-                    
+
                     if (res.is_success && res.result) {
                       const evaluatedRules = res.result as Record<number, any[]>;
-                      
+
                       let hasActualPriceChanges = false;
                       for (const l of lineItems) {
                         if (!l.is_free_qty && l.variant_id && evaluatedRules[l.variant_id]) {
@@ -496,24 +511,24 @@ export function ProductTransactionScreen({
                           const batchPrice = ['sales', 'quotation'].includes(config.type) && l.batches?.[0] ? (l.batches[0] as any)[batchPriceField] : undefined;
                           const basePrice = (batchPrice !== undefined && batchPrice !== null)
                             ? Number(batchPrice)
-                            : (actualVariant 
-                              ? Number(actualVariant[variantPriceField] || l.item[config.priceField] || 0) 
+                            : (actualVariant
+                              ? Number(actualVariant[variantPriceField] || l.item[config.priceField] || 0)
                               : Number(l.item[config.priceField] || 0));
-                          
+
                           const uoms = l.item.uom?.uom_group?.uoms || [];
                           const currentUom = uoms.find((u: any) => u.id === (l.uom_id || l.item.uom_id));
                           const factor = Number(currentUom?.conversion_factor) || 1;
                           const effectiveQty = l.quantity * factor;
 
                           const priceDetails = PriceCalculationService.calculatePriceDetails(basePrice, effectiveQty, rules, l.batches?.[0]?.batch_id);
-                          
+
                           if (Math.abs((priceDetails.unitPrice * factor) - l.unit_price) > 0.001) {
                             hasActualPriceChanges = true;
                             break;
                           }
                         }
                       }
-                      
+
                       if (hasActualPriceChanges) {
                         const previousRulesApplied = lineItems.some(l => l.applied_price_rule);
                         setPriceEvaluationModal({
@@ -542,8 +557,8 @@ export function ProductTransactionScreen({
                   }
                 }
               }
-              setPartyId(id); 
-              setPartyName(party?.name ?? null); 
+              setPartyId(id);
+              setPartyName(party?.name ?? null);
             }}
             onWarehouseChange={(id, name) => { setWarehouseId(id); setWarehouseName(name ?? null); }}
             onDateChange={setTransactionDate}
@@ -574,15 +589,15 @@ export function ProductTransactionScreen({
           size="sm"
         >
           <div className="text-[14px] text-foreground-1 leading-relaxed">
-            {priceEvaluationModal.type === 'confirm' 
+            {priceEvaluationModal.type === 'confirm'
               ? "A few items have price changes based on the price list. Do you want to apply them?"
               : "Prices need to be changed based on the party selection."}
           </div>
           <ModalFooter>
             {priceEvaluationModal.type === 'confirm' && (
-              <Button 
-                variant="flat" 
-                color="secondary" 
+              <Button
+                variant="flat"
+                color="secondary"
                 onClick={() => {
                   setPartyId(priceEvaluationModal.pendingPartyId);
                   setPartyName(priceEvaluationModal.pendingParty?.name ?? null);
@@ -592,8 +607,8 @@ export function ProductTransactionScreen({
                 No
               </Button>
             )}
-            <Button 
-              color="primary" 
+            <Button
+              color="primary"
               onClick={() => {
                 applyEvaluatedPrices(priceEvaluationModal.evaluatedRules);
                 setPartyId(priceEvaluationModal.pendingPartyId);

package/src/finance-components/PaymentForm.tsx

@@ -0,0 +1,142 @@
+"use client";
+
+import React, { useState } from "react";
+import { Button, Input, ModalFooter } from "../index";
+import { PaymentSection, PaymentEntry } from "../common-components/PaymentSection";
+import toast from "react-hot-toast";
+
+interface PaymentFormProps {
+  invoice: any;
+  onSuccess: () => void;
+  onCancel: () => void;
+  onRecordPayment: (payload: any) => Promise<{ is_success: boolean; message?: string }>;
+  fetchPaymentModes: () => Promise<any>;
+  fetchBankAccounts: () => Promise<any>;
+  fetchChequeLeaves?: (query: string, page?: number) => Promise<any>;
+}
+
+export function PaymentForm({
+  invoice,
+  onSuccess,
+  onCancel,
+  onRecordPayment,
+  fetchPaymentModes,
+  fetchBankAccounts,
+  fetchChequeLeaves,
+}: PaymentFormProps) {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const outstanding = Math.abs(Number(invoice.amount_due || 0) - Number(invoice.amount_settled || invoice.amount_received || 0));
+
+  const [paymentDate, setPaymentDate] = useState(new Date().toISOString().split("T")[0]);
+  const [reference, setReference] = useState("");
+  const [remarks, setRemarks] = useState("");
+  const [payments, setPayments] = useState<PaymentEntry[]>([]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (payments.length === 0) {
+      toast.error("Please add at least one payment");
+      return;
+    }
+
+    const totalToPay = payments.reduce((sum, p) => sum + (Number(p.amount) || 0), 0);
+    if (totalToPay > outstanding + 0.01) {
+      toast.error(`Payment amount exceeds outstanding balance (${outstanding.toFixed(2)})`);
+      return;
+    }
+
+    setIsSubmitting(true);
+    let successCount = 0;
+
+    try {
+      for (const p of payments) {
+        if (Number(p.amount) <= 0) continue;
+        const payload: any = {
+          invoice_id: invoice.id,
+          payment_date: paymentDate,
+          payment_amount: p.amount,
+          payment_method: p.mode_code,
+          payment_mode_id: p.mode_id,
+          remarks: remarks || null,
+          reference: reference || null,
+        };
+
+        if (p.metadata) {
+          if (p.metadata.reference) payload.reference = p.metadata.reference;
+          if (p.metadata.bank_account_id) payload.bank_account_id = p.metadata.bank_account_id;
+          payload.mode_metadata = p.metadata;
+        }
+
+        const res = await onRecordPayment(payload);
+        if (res.is_success) successCount++;
+        else toast.error(`Failed for ${p.mode_name}: ${res.message}`);
+      }
+
+      if (successCount > 0) {
+        toast.success("Payment recorded successfully");
+        onSuccess();
+      }
+    } catch (e: any) {
+      toast.error(e.message || "Error recording payment");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div className="flex flex-col gap-1.5">
+        <label className="text-[11px] font-bold text-gray-500 uppercase tracking-wider">Payment Date *</label>
+        <Input
+          type="date"
+          value={paymentDate}
+          onChange={(e) => setPaymentDate(e.target.value)}
+        />
+      </div>
+
+      <PaymentSection
+        totalAmount={outstanding}
+        payments={payments}
+        onPaymentsChange={setPayments}
+        fetchPaymentModes={async () => {
+          const res = await fetchPaymentModes();
+          if (res.is_success && Array.isArray(res.result)) {
+            res.result = res.result.filter((m: any) => {
+              const code = m.code?.toLowerCase();
+              return code !== "credit" && code !== "credit-metal";
+            });
+          }
+          return res;
+        }}
+        fetchBankAccounts={fetchBankAccounts}
+        fetchChequeLeaves={fetchChequeLeaves}
+      />
+
+      <div className="flex flex-col gap-4 mt-2">
+        <div className="flex flex-col gap-1.5">
+          <label className="text-[11px] font-bold text-gray-500 uppercase tracking-wider">Reference No</label>
+          <Input
+            value={reference}
+            onChange={(e) => setReference(e.target.value)}
+            placeholder="Leave blank to auto-generate"
+          />
+        </div>
+        <div className="flex flex-col gap-1.5">
+          <label className="text-[11px] font-bold text-gray-500 uppercase tracking-wider">Remarks</label>
+          <textarea
+            value={remarks}
+            onChange={(e) => setRemarks(e.target.value)}
+            rows={2}
+            placeholder="Optional notes..."
+            className="w-full bg-white border-[1.5px] border-gray-200 rounded-[10px] px-3.5 py-2.5 text-[13px] text-gray-800 outline-none transition-all hover:border-gray-300 focus:border-primary/50 resize-none"
+          />
+        </div>
+      </div>
+
+      <ModalFooter>
+        <Button type="button" variant="flat" color="default" onClick={onCancel}>Cancel</Button>
+        <Button type="submit" color="primary" isLoading={isSubmitting}>Record Payment</Button>
+      </ModalFooter>
+    </form>
+  );
+}

package/src/index.tsx

@@ -56,3 +56,4 @@ export * from './common-components/item-wizard/SkuConfigModal';
 
 // Transaction
 export * from './common-components/transaction';
+export * from './finance-components/PaymentForm';