@apptimate/ui 2.7.0 → 2.9.0

package/package.json

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

package/src/common-components/DashboardLayout.tsx

@@ -113,9 +113,9 @@ export function DashboardLayout({
     : 'Select Org';
 
   return (
-    <div className="flex h-screen bg-[#F4F5F7] overflow-hidden font-sans">
+    <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 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-20">
         <div className="w-12 h-12 flex items-center justify-center mb-8">
           {logo}
         </div>
@@ -173,7 +173,7 @@ export function DashboardLayout({
 
       {/* Desktop Secondary Sidebar */}
       {activeMenu && activeMenu.groups.length > 0 && (
-        <aside className="hidden md:flex w-[210px] bg-white border-gray-200 flex-col py-8 shrink-0 z-10">
+        <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>
           <div className="flex-1 overflow-y-auto px-4 space-y-6">
             {activeMenu.groups.map((group) => (
@@ -234,9 +234,9 @@ export function DashboardLayout({
       )}
 
       {/* Main Content Area & Mobile Header */}
-      <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
+      <div className="flex-1 flex flex-col min-w-0 overflow-hidden print:overflow-visible">
         {/* Mobile Header */}
-        <header className="md:hidden flex items-center justify-between p-4 bg-white border-b border-gray-200 shrink-0 z-10">
+        <header className="md:hidden print:hidden flex items-center justify-between p-4 bg-white border-b border-gray-200 shrink-0 z-10">
           <div className="flex items-center justify-center w-8 h-8">
             {logo}
           </div>
@@ -267,8 +267,8 @@ export function DashboardLayout({
         </header>
 
         {/* Main Content Scrollable Area */}
-        <main className="flex-1 p-4 md:p-6 lg:p-8 overflow-hidden min-h-0">
-          <div className="bg-white rounded-2xl h-full p-4 md:p-8 flex flex-col overflow-y-auto">
+        <main className="flex-1 p-4 md:p-6 lg:p-8 overflow-hidden min-h-0 print:overflow-visible print:p-0">
+          <div className="bg-white rounded-2xl h-full p-4 md:p-8 flex flex-col overflow-y-auto print:h-auto print:overflow-visible print:p-0 print:bg-transparent print:rounded-none">
             {children}
           </div>
         </main>

package/src/common-components/PaymentSection.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useEffect, useCallback, useMemo } from "react";
+import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
 import { cn } from "@apptimate/core-lib";
 import { CreditCard, Banknote, Building, Trash2, Loader2, Split, Check, AlertCircle } from "lucide-react";
 
@@ -70,6 +70,12 @@ export function PaymentSection({ totalAmount, payments, onPaymentsChange, compac
   const [bankAccounts, setBankAccounts] = useState<BankAccount[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [selectionMode, setSelectionMode] = useState<"single" | "split">("single");
+  const paymentsRef = useRef(payments);
+
+  // Keep ref in sync
+  useEffect(() => {
+    paymentsRef.current = payments;
+  }, [payments]);
 
   // ── Load payment modes on mount ──
   useEffect(() => {
@@ -84,7 +90,7 @@ export function PaymentSection({ totalAmount, payments, onPaymentsChange, compac
         if (bankRes.is_success) setBankAccounts(bankRes.result || []);
 
         // Auto-select cash if no payments yet
-        if (payments.length === 0 && modes.length > 0) {
+        if (paymentsRef.current.length === 0 && modes.length > 0) {
           const cashMode = modes.find((m) => m.code === "cash" && m.is_active);
           if (cashMode) {
             onPaymentsChange([{
@@ -92,12 +98,21 @@ export function PaymentSection({ totalAmount, payments, onPaymentsChange, compac
               amount: totalAmount, metadata: {},
             }]);
           }
+        } else if (paymentsRef.current.length > 1) {
+          setSelectionMode("split");
         }
       } finally { setIsLoading(false); }
     };
     load();
   }, []);
 
+  // Also sync selectionMode if payments change from outside
+  useEffect(() => {
+    if (payments.length > 1 && selectionMode === "single") {
+      setSelectionMode("split");
+    }
+  }, [payments.length, selectionMode]);
+
   // ── Calculations ──
   const isCreditPayment = useCallback((payment: PaymentEntry) => payment.mode_code === "credit", []);
   const totalPaid = useMemo(() => payments.reduce((s, p) => s + (isCreditPayment(p) ? 0 : p.amount), 0), [payments, isCreditPayment]);