@apptimate/ui 1.9.0 → 2.0.0

package/package.json

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

package/src/base-components/DateLabel.tsx

@@ -8,12 +8,39 @@ export interface DateLabelProps {
 export function DateLabel({ date, className = '' }: DateLabelProps) {
   if (!date) return <span className="text-gray-300">-</span>;
 
-  const d = new Date(date);
-  
-  // Format to "2026-05-07 4:35PM"
+  let isDateOnly = false;
+  let parsedDate: string | Date = date;
+
+  if (typeof date === 'string') {
+    if (/^\d{4}-\d{2}-\d{2}$/.test(date)) {
+      isDateOnly = true;
+    } else if (/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/.test(date)) {
+      parsedDate = date.replace(' ', 'T') + 'Z';
+    }
+  }
+
+  let d: Date;
+  if (isDateOnly && typeof date === 'string') {
+    const [y, m, day] = date.split('-');
+    d = new Date(parseInt(y, 10), parseInt(m, 10) - 1, parseInt(day, 10));
+  } else {
+    d = new Date(parsedDate);
+  }
+
+  if (isNaN(d.getTime())) return <span className="text-gray-300">-</span>;
+
   const year = d.getFullYear();
   const month = String(d.getMonth() + 1).padStart(2, '0');
   const day = String(d.getDate()).padStart(2, '0');
+  
+  if (isDateOnly) {
+    return (
+      <div className={`flex flex-col ${className}`}>
+        <span className="text-gray-600 font-medium whitespace-nowrap">{year}-{month}-{day}</span>
+      </div>
+    );
+  }
+
   let hours = d.getHours();
   const minutes = String(d.getMinutes()).padStart(2, '0');
   const ampm = hours >= 12 ? 'PM' : 'AM';

package/src/base-components/DesktopSearchPopover.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Search } from 'lucide-react';
+import { Search, X } from 'lucide-react';
 import { Dropdown } from './Dropdown';
 import { Input } from './Input';
 import { Button } from './Button';
@@ -26,16 +26,33 @@ export const DesktopSearchPopover = ({
                 align="right"
                 contentClassName="w-[300px] p-2"
                 trigger={
-                    <Button
-                        variant="soft"
-                        color="default"
-                        className={cn("!p-0 text-gray-500", triggerClassName)}
-                        icon={<Search size={18} strokeWidth={2} />}
-                        ariaLabel="Search"
-                    />
+                    searchValue ? (
+                        <div className="flex items-center gap-1.5 bg-primary-50 hover:bg-primary-100 transition-colors pl-3 pr-1.5 py-1.5 rounded-full cursor-pointer border border-primary-100">
+                            <Search size={14} className="text-primary-500" />
+                            <span className="text-xs font-bold text-primary-700 max-w-[120px] truncate">{searchValue}</span>
+                            <div 
+                                className="p-1 hover:bg-primary-200 rounded-full text-primary-600 transition-colors"
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    onSearchChange("");
+                                }}
+                                title="Clear search"
+                            >
+                                <X size={14} />
+                            </div>
+                        </div>
+                    ) : (
+                        <Button
+                            variant="soft"
+                            color="default"
+                            className={cn("!p-0 text-gray-500", triggerClassName)}
+                            icon={<Search size={18} strokeWidth={2} />}
+                            ariaLabel="Search"
+                        />
+                    )
                 }
             >
-                <div className="p-1">
+                <div className="p-1" onClick={(e) => e.stopPropagation()}>
                     <Input
                         autoFocus
                         placeholder={placeholder}

package/src/common-components/DashboardLayout.tsx

@@ -135,7 +135,7 @@ export function DashboardLayout({
                   size: 22,
                   className: isActive ? "stroke-[2.5]" : "stroke-[2]"
                 })}
-                <span className={`text-[11px] ${isActive ? "font-bold" : "font-medium"}`}>{menu.label}</span>
+                <span className={`text-[11px] text-center leading-tight px-1 ${isActive ? "font-bold" : "font-medium"}`}>{menu.label}</span>
               </div>
             );
           })}

package/src/common-components/PaymentSection.tsx

@@ -92,7 +92,9 @@ export function PaymentSection({ totalAmount, payments, onPaymentsChange, compac
   }, []);
 
   // ── Calculations ──
-  const totalPaid = useMemo(() => payments.reduce((s, p) => s + p.amount, 0), [payments]);
+  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]);
+  const creditAmount = useMemo(() => payments.reduce((s, p) => s + (isCreditPayment(p) ? p.amount : 0), 0), [payments, isCreditPayment]);
   const balance = useMemo(() => totalAmount - totalPaid, [totalAmount, totalPaid]);
   const formatCurrency = (v: number) => v.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
 
@@ -118,8 +120,34 @@ export function PaymentSection({ totalAmount, payments, onPaymentsChange, compac
   const updatePayment = useCallback((index: number, updates: Partial<PaymentEntry>) => {
     const next = [...payments];
     next[index] = { ...next[index], ...updates };
+
+    if (
+      selectionMode === "split" &&
+      Object.prototype.hasOwnProperty.call(updates, "amount") &&
+      !isCreditPayment(next[index]) &&
+      next.length > 1
+    ) {
+      const targetIndex = next.findIndex((payment, paymentIndex) =>
+        paymentIndex !== index &&
+        !isCreditPayment(payment) &&
+        Number(payment.amount || 0) <= 0
+      );
+
+      if (targetIndex >= 0) {
+        const paidExceptTarget = next.reduce((sum, payment, paymentIndex) => {
+          if (paymentIndex === targetIndex || isCreditPayment(payment)) return sum;
+          return sum + Number(payment.amount || 0);
+        }, 0);
+
+        next[targetIndex] = {
+          ...next[targetIndex],
+          amount: Math.max(0, Math.round((totalAmount - paidExceptTarget) * 100) / 100),
+        };
+      }
+    }
+
     onPaymentsChange(next);
-  }, [payments, onPaymentsChange]);
+  }, [payments, selectionMode, totalAmount, isCreditPayment, onPaymentsChange]);
 
   // ── Auto-sync single mode amount when totalAmount changes ──
   useEffect(() => {
@@ -207,7 +235,11 @@ export function PaymentSection({ totalAmount, payments, onPaymentsChange, compac
           {/* Add split mode buttons */}
           <div className="flex flex-wrap gap-1.5 pt-1">
             {paymentModes
-              .filter((m) => m.is_active && !payments.some(p => p.mode_id === m.id))
+              .filter((m) => {
+                if (!m.is_active) return false;
+                const canBeMultiple = ["card", "bank_transfer", "cheque"].includes(m.code);
+                return canBeMultiple || !payments.some(p => p.mode_id === m.id);
+              })
               .map((mode) => (
                 <button key={mode.id} onClick={() => addPayment(mode)}
                   className="inline-flex items-center gap-1.5 px-3 py-1.5 text-[11px] font-semibold rounded-[8px] bg-surface-0 border border-border-subtle text-foreground-subtle hover:border-primary/40 hover:text-primary transition-all">
@@ -225,8 +257,11 @@ export function PaymentSection({ totalAmount, payments, onPaymentsChange, compac
           <TotalRow label="Amount to Pay" value={formatCurrency(totalAmount)} bold />
           <div className="border-t border-border-subtle my-2" />
           <TotalRow label="Total Paid" value={formatCurrency(totalPaid)} />
+          {creditAmount > 0.01 && (
+            <TotalRow label="Credit Amount" value={formatCurrency(creditAmount)} className="text-amber-600" />
+          )}
           <TotalRow
-            label={balance > 0.01 ? "Balance Due" : balance < -0.01 ? "Change Due" : "Settled"}
+            label={balance > 0.01 ? "Outstanding Balance" : balance < -0.01 ? "Change Due" : "Settled"}
             value={formatCurrency(Math.abs(balance))}
             className={balance > 0.01 ? "text-danger-alt" : "text-green-600"}
             bold
@@ -236,7 +271,7 @@ export function PaymentSection({ totalAmount, payments, onPaymentsChange, compac
               <AlertCircle size={12} /><span>Change: {formatCurrency(Math.abs(balance))}</span>
             </div>
           )}
-          {Math.abs(balance) < 0.01 && (
+          {Math.abs(balance) < 0.01 && creditAmount <= 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>