@apptimate/ui 1.9.0 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apptimate/ui",
-  "version": "1.9.0",
+  "version": "2.1.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

@@ -9,8 +9,9 @@ import { CreditCard, Banknote, Building, Trash2, Loader2, Split, Check, AlertCir
 export interface PaymentModeField {
   key: string;
   label: string;
-  type: "text" | "number" | "date" | "bank_account_select";
+  type: "text" | "number" | "date" | "bank_account_select" | "material_type_select";
   required: boolean;
+  readonly?: boolean;
 }
 
 export interface PaymentMode {
@@ -56,11 +57,15 @@ export interface PaymentSectionProps {
   fetchPaymentModes: () => Promise<{ is_success: boolean; result?: any }>;
   /** Fetcher for bank accounts */
   fetchBankAccounts: () => Promise<{ is_success: boolean; result?: any }>;
+  /** Optional array of material types for the material_type_select field */
+  materialTypes?: any[];
+  /** Special mode codes that are allowed (e.g. 'credit-gold') */
+  allowedSpecialModes?: string[];
 }
 
 /* ── Component ── */
 
-export function PaymentSection({ totalAmount, payments, onPaymentsChange, compact, fetchPaymentModes, fetchBankAccounts }: PaymentSectionProps) {
+export function PaymentSection({ totalAmount, payments, onPaymentsChange, compact, fetchPaymentModes, fetchBankAccounts, materialTypes = [], allowedSpecialModes = [] }: PaymentSectionProps) {
   const [paymentModes, setPaymentModes] = useState<PaymentMode[]>([]);
   const [bankAccounts, setBankAccounts] = useState<BankAccount[]>([]);
   const [isLoading, setIsLoading] = useState(false);
@@ -72,7 +77,9 @@ export function PaymentSection({ totalAmount, payments, onPaymentsChange, compac
       setIsLoading(true);
       try {
         const [modesRes, bankRes] = await Promise.all([fetchPaymentModes(), fetchBankAccounts()]);
-        const modes: PaymentMode[] = modesRes.is_success ? (modesRes.result || []) : [];
+        const modesRaw: PaymentMode[] = modesRes.is_success ? (modesRes.result || []) : [];
+        const SPECIAL_MODES = ["credit-gold"];
+        const modes = modesRaw.filter((m) => !SPECIAL_MODES.includes(m.code) || allowedSpecialModes.includes(m.code));
         setPaymentModes(modes);
         if (bankRes.is_success) setBankAccounts(bankRes.result || []);
 
@@ -92,16 +99,18 @@ 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 });
 
-  // ── Mode icon ──
   const getModeIcon = useCallback((code: string, size = 14) => {
     switch (code) {
       case "cash": return <Banknote size={size} />;
       case "card": return <CreditCard size={size} />;
       case "bank_transfer": return <Building size={size} />;
+      case "credit-gold": return <AlertCircle size={size} />; // Fallback, better to use something else if available
       default: return <CreditCard size={size} />;
     }
   }, []);
@@ -118,8 +127,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(() => {
@@ -191,7 +226,7 @@ export function PaymentSection({ totalAmount, payments, onPaymentsChange, compac
       {/* ── Single Mode: Entry with fields (no delete) ── */}
       {selectionMode === "single" && payments.length === 1 && (
         <PaymentEntryRow entry={payments[0]} mode={paymentModes.find((m) => m.id === payments[0].mode_id)}
-          bankAccounts={bankAccounts} onUpdate={(updates) => updatePayment(0, updates)} onRemove={() => {}} showRemove={false} />
+          bankAccounts={bankAccounts} materialTypes={materialTypes} onUpdate={(updates) => updatePayment(0, updates)} onRemove={() => {}} showRemove={false} />
       )}
 
       {/* ── Split Mode: Multi-entry UI ── */}
@@ -200,14 +235,18 @@ export function PaymentSection({ totalAmount, payments, onPaymentsChange, compac
           {payments.map((entry, idx) => {
             const mode = paymentModes.find((m) => m.id === entry.mode_id);
             return (
-              <PaymentEntryRow key={idx} entry={entry} mode={mode} bankAccounts={bankAccounts}
+              <PaymentEntryRow key={idx} entry={entry} mode={mode} bankAccounts={bankAccounts} materialTypes={materialTypes}
                 onUpdate={(updates) => updatePayment(idx, updates)} onRemove={() => removePayment(idx)} />
             );
           })}
           {/* 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 +264,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 +278,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>
@@ -264,12 +306,13 @@ interface PaymentEntryRowProps {
   entry: PaymentEntry;
   mode?: PaymentMode;
   bankAccounts: BankAccount[];
+  materialTypes?: any[];
   onUpdate: (updates: Partial<PaymentEntry>) => void;
   onRemove: () => void;
   showRemove?: boolean;
 }
 
-function PaymentEntryRow({ entry, mode, bankAccounts, onUpdate, onRemove, showRemove = true }: PaymentEntryRowProps) {
+function PaymentEntryRow({ entry, mode, bankAccounts, materialTypes = [], onUpdate, onRemove, showRemove = true }: PaymentEntryRowProps) {
   const fields = mode?.field_config?.fields || [];
 
   const getModeIcon = () => {
@@ -277,6 +320,7 @@ function PaymentEntryRow({ entry, mode, bankAccounts, onUpdate, onRemove, showRe
       case "cash": return <Banknote size={13} />;
       case "card": return <CreditCard size={13} />;
       case "bank_transfer": return <Building size={13} />;
+      case "credit-gold": return <AlertCircle size={13} />;
       default: return <CreditCard size={13} />;
     }
   };
@@ -317,15 +361,26 @@ function PaymentEntryRow({ entry, mode, bankAccounts, onUpdate, onRemove, showRe
               {field.type === "bank_account_select" ? (
                 <select value={entry.metadata[field.key] || ""}
                   onChange={(e) => onUpdate({ metadata: { ...entry.metadata, [field.key]: e.target.value ? Number(e.target.value) : "" } })}
-                  className="w-full bg-surface-1 border-[1.5px] border-border-subtle rounded-[8px] px-2.5 py-2.5 text-[12px] text-foreground-1 outline-none focus:border-primary/40 transition-all">
+                  disabled={field.readonly}
+                  className="w-full bg-surface-1 border-[1.5px] border-border-subtle rounded-[8px] px-2.5 py-2.5 text-[12px] text-foreground-1 outline-none focus:border-primary/40 transition-all disabled:opacity-50 disabled:cursor-not-allowed">
                   <option value="">Select...</option>
                   {bankAccounts.map((b) => (<option key={b.id} value={b.id}>{b.bank_name} - {b.account_number}</option>))}
                 </select>
+              ) : field.type === "material_type_select" ? (
+                <select value={entry.metadata[field.key] || ""}
+                  onChange={(e) => onUpdate({ metadata: { ...entry.metadata, [field.key]: e.target.value ? Number(e.target.value) : "" } })}
+                  disabled={field.readonly}
+                  className="w-full bg-surface-1 border-[1.5px] border-border-subtle rounded-[8px] px-2.5 py-2.5 text-[12px] text-foreground-1 outline-none focus:border-primary/40 transition-all disabled:opacity-50 disabled:cursor-not-allowed">
+                  <option value="">Select Material...</option>
+                  {materialTypes.map((m) => (<option key={m.id} value={m.id}>{m.name}</option>))}
+                </select>
               ) : (
                 <input type={field.type === "number" ? "number" : field.type === "date" ? "date" : "text"}
+                  {...(field.type === "number" ? { step: "any" } : {})}
                   value={entry.metadata[field.key] || ""}
                   onChange={(e) => onUpdate({ metadata: { ...entry.metadata, [field.key]: e.target.value } })}
-                  className="w-full bg-surface-1 border-[1.5px] border-border-subtle rounded-[8px] px-2.5 py-2.5 text-[12px] text-foreground-1 outline-none focus:border-primary/40 transition-all [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" />
+                  readOnly={field.readonly}
+                  className={cn("w-full bg-surface-1 border-[1.5px] border-border-subtle rounded-[8px] px-2.5 py-2.5 text-[12px] text-foreground-1 outline-none focus:border-primary/40 transition-all [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none", field.readonly && "opacity-60 bg-surface-0 cursor-not-allowed border-border")} />
               )}
             </div>
           ))}