pharmacy-erp 1.0.0

package/frontend/src/components/pos/CashSessionGuard.tsx

@@ -0,0 +1,255 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { DollarSign, Store, Loader2, AlertCircle, RefreshCw, Calculator } from 'lucide-react';
+import { toast } from 'react-hot-toast';
+import { api } from '@/lib/api';
+import { usePaymentMethodsStore } from '@/store/payment-methods-store';
+
+interface SessionData {
+  id: string;
+  opening_amount: number;
+  opened_at: string;
+}
+
+interface CashSessionGuardProps {
+  children: (session: SessionData) => React.ReactNode;
+}
+
+interface Branch {
+  id: string;
+  name: string;
+}
+
+export function CashSessionGuard({ children }: CashSessionGuardProps) {
+  const { requireCashSession } = usePaymentMethodsStore();
+  const [session, setSession] = useState<SessionData | null>(null);
+  const [loadingStatus, setLoadingStatus] = useState<boolean>(true);
+  const [hasError, setHasError] = useState<boolean>(false);
+
+  // Open Register state
+  const [openingAmount, setOpeningAmount] = useState<string>('0');
+  const [terminalName, setTerminalName] = useState<string>('POS Terminal 1');
+  const [branches, setBranches] = useState<Branch[]>([]);
+  const [selectedBranchId, setSelectedBranchId] = useState<string>('');
+  const [isOpening, setIsOpening] = useState<boolean>(false);
+
+  const fetchBranches = async () => {
+    try {
+      const branchesData: any = await api.getBranches();
+      const list = Array.isArray(branchesData) ? branchesData : [];
+      setBranches(list);
+      if (list.length > 0) {
+        setSelectedBranchId(list[0].id);
+      }
+    } catch (error) {
+      console.error('Failed to fetch branches', error);
+    }
+  };
+
+  const checkSession = async () => {
+    setLoadingStatus(true);
+    setHasError(false);
+    try {
+      const activeSession: any = await api.getActiveSession();
+      if (activeSession && activeSession.id) {
+        setSession({
+          id: activeSession.id,
+          opening_amount: Number(activeSession.opening_amount) || 0,
+          opened_at: activeSession.opened_at,
+        });
+      } else {
+        await fetchBranches();
+      }
+    } catch (err: any) {
+      // 404 or any "no active session" error is expected when register is closed
+      if (
+        err?.status === 404 ||
+        err?.response?.status === 404 ||
+        err?.message?.toLowerCase().includes('not found') ||
+        err?.message?.toLowerCase().includes('no active session') ||
+        err?.message?.includes('404')
+      ) {
+        await fetchBranches();
+      } else {
+        console.error('Unexpected error checking cash session:', err);
+        // Only show hard error if cash session is strictly required
+        if (requireCashSession) {
+          setHasError(true);
+        } else {
+          await fetchBranches();
+        }
+      }
+    } finally {
+      setLoadingStatus(false);
+    }
+  };
+
+  useEffect(() => {
+    checkSession();
+  }, []);
+
+  const handleOpenRegister = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    const branchId = selectedBranchId || (branches.length > 0 ? branches[0].id : '');
+    if (!branchId) {
+      toast.error('Please select a branch');
+      return;
+    }
+
+    setIsOpening(true);
+    try {
+      const amount = parseFloat(openingAmount) || 0;
+      if (isNaN(amount) || amount < 0) {
+        throw new Error('Invalid opening amount');
+      }
+
+      const newSession: any = await api.openSession({
+        opening_amount: amount,
+        terminal_name: terminalName.trim() || 'POS Terminal 1',
+        branch_id: branchId,
+      });
+
+      toast.success('Cash register opened successfully');
+      setSession({
+        id: newSession.id,
+        opening_amount: Number(newSession.opening_amount) || amount,
+        opened_at: newSession.opened_at || new Date().toISOString(),
+      });
+    } catch (error: any) {
+      console.error('Failed to open register', error);
+      toast.error(error?.message || 'Failed to open cash register');
+    } finally {
+      setIsOpening(false);
+    }
+  };
+
+  // If cash session is NOT required by settings, bypass the guard screen and render POS directly!
+  if (!requireCashSession) {
+    return <>{children(session || { id: '', opening_amount: 0, opened_at: '' })}</>;
+  }
+
+  if (loadingStatus) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full min-h-[500px] w-full bg-background">
+        <Loader2 className="w-10 h-10 animate-spin text-pos-500 mb-4" />
+        <p className="text-foreground/70">Checking register status...</p>
+      </div>
+    );
+  }
+
+  if (hasError) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full min-h-[500px] w-full bg-background p-4">
+        <AlertCircle className="w-12 h-12 text-red-500 mb-4" />
+        <h2 className="text-xl font-semibold text-foreground mb-2">Connection Error</h2>
+        <p className="text-foreground/70 mb-6 text-center max-w-md text-sm">
+          Unable to verify cash register status from the server.
+        </p>
+        <div className="flex gap-3">
+          <button
+            onClick={checkSession}
+            className="flex items-center gap-2 px-4 py-2 bg-pos-500 hover:bg-pos-600 text-white rounded-lg transition-colors text-sm font-medium"
+          >
+            <RefreshCw className="w-4 h-4" />
+            Retry
+          </button>
+          <button
+            onClick={() => {
+              setHasError(false);
+              fetchBranches();
+            }}
+            className="px-4 py-2 bg-surface border border-border hover:bg-background text-foreground rounded-lg transition-colors text-sm font-medium"
+          >
+            Open Register Manually
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  if (session) {
+    return <>{children(session)}</>;
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
+      <div className="bg-surface border border-border rounded-2xl shadow-2xl w-full max-w-md overflow-hidden">
+        <div className="p-6 bg-pos-500/10 border-b border-border text-center">
+          <div className="w-14 h-14 bg-pos-500 text-white rounded-2xl flex items-center justify-center mx-auto mb-3 shadow-lg shadow-pos-500/20">
+            <Calculator className="w-7 h-7" />
+          </div>
+          <h2 className="text-2xl font-bold text-foreground">Open Cash Register</h2>
+          <p className="text-sm text-foreground/60 mt-1">Start your shift by entering the opening float</p>
+        </div>
+
+        <form onSubmit={handleOpenRegister} className="p-6 space-y-4">
+          <div className="space-y-1.5">
+            <label className="text-xs font-semibold uppercase tracking-wider text-foreground/60 block">Branch</label>
+            <div className="relative">
+              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <Store className="h-4 w-4 text-foreground/40" />
+              </div>
+              <select
+                value={selectedBranchId}
+                onChange={(e) => setSelectedBranchId(e.target.value)}
+                required
+                className="w-full pl-9 pr-4 py-2.5 bg-background border border-border rounded-xl text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-pos-500"
+              >
+                {branches.length === 0 ? (
+                  <option value="" disabled>Loading branches...</option>
+                ) : (
+                  branches.map(b => (
+                    <option key={b.id} value={b.id}>{b.name}</option>
+                  ))
+                )}
+              </select>
+            </div>
+          </div>
+
+          <div className="space-y-1.5">
+            <label className="text-xs font-semibold uppercase tracking-wider text-foreground/60 block">Terminal Name</label>
+            <input
+              type="text"
+              value={terminalName}
+              onChange={(e) => setTerminalName(e.target.value)}
+              required
+              className="w-full px-3.5 py-2.5 bg-background border border-border rounded-xl text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-pos-500"
+            />
+          </div>
+
+          <div className="space-y-1.5">
+            <label className="text-xs font-semibold uppercase tracking-wider text-foreground/60 block">Opening Cash Amount</label>
+            <div className="relative">
+              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <DollarSign className="h-4 w-4 text-foreground/40" />
+              </div>
+              <input
+                type="number"
+                min="0"
+                step="0.01"
+                value={openingAmount}
+                onChange={(e) => setOpeningAmount(e.target.value)}
+                required
+                className="w-full pl-9 pr-4 py-2.5 bg-background border border-border rounded-xl text-foreground text-sm font-semibold focus:outline-none focus:ring-2 focus:ring-pos-500"
+                placeholder="0.00"
+              />
+            </div>
+          </div>
+
+          <div className="pt-3">
+            <button
+              type="submit"
+              disabled={isOpening}
+              className="w-full flex items-center justify-center gap-2 py-3 px-4 bg-pos-500 hover:bg-pos-600 text-white rounded-xl font-bold transition-all shadow-lg shadow-pos-500/20 disabled:opacity-60"
+            >
+              {isOpening ? <Loader2 className="w-5 h-5 animate-spin" /> : null}
+              Open Register & Start Shift
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

package/frontend/src/components/pos/CloseSessionModal.tsx

@@ -0,0 +1,160 @@
+'use client';
+
+import React, { useState } from 'react';
+import { X, Loader2, TrendingUp, TrendingDown, Minus, DollarSign } from 'lucide-react';
+import { toast } from 'react-hot-toast';
+import { api } from '@/lib/api';
+import { useAppStore } from '@/store/app-store';
+import { formatMoney } from '@/lib/utils';
+
+interface CloseSessionModalProps {
+  open: boolean;
+  onClose: () => void;
+  sessionId: string;
+  openingAmount: number;
+  onSessionClosed: () => void;
+}
+
+export function CloseSessionModal({
+  open,
+  onClose,
+  sessionId,
+  openingAmount,
+  onSessionClosed,
+}: CloseSessionModalProps) {
+  const [closingAmount, setClosingAmount] = useState<string>('');
+  const [notes, setNotes] = useState<string>('');
+  const [isClosing, setIsClosing] = useState<boolean>(false);
+  
+  // Safe extraction to avoid issues if store doesn't have currency
+  const currency = useAppStore((state) => (state as any).currency || 'USD');
+
+  if (!open) return null;
+
+  const parsedClosing = parseFloat(closingAmount) || 0;
+  const variance = parsedClosing - openingAmount;
+  
+  let varianceColor = 'text-gray-500';
+  let VarianceIcon = Minus;
+  let varianceBg = 'bg-gray-500/10 border-gray-500/20';
+
+  if (variance > 0) {
+    varianceColor = 'text-green-500';
+    VarianceIcon = TrendingUp;
+    varianceBg = 'bg-green-500/10 border-green-500/20';
+  } else if (variance < 0) {
+    varianceColor = 'text-red-500';
+    VarianceIcon = TrendingDown;
+    varianceBg = 'bg-red-500/10 border-red-500/20';
+  }
+
+  const handleClose = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!closingAmount) {
+      toast.error('Closing amount is required');
+      return;
+    }
+
+    setIsClosing(true);
+    try {
+      await api.closeSession(sessionId, {
+        closing_amount: parsedClosing,
+        notes: notes.trim() ? notes : undefined,
+      });
+      toast.success('Session closed successfully');
+      onSessionClosed();
+    } catch (error) {
+      console.error('Failed to close session', error);
+      toast.error('Failed to close register');
+    } finally {
+      setIsClosing(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
+      <div className="bg-surface border border-border rounded-xl shadow-xl w-full max-w-md overflow-hidden relative">
+        <button 
+          onClick={onClose}
+          className="absolute top-4 right-4 text-foreground/50 hover:text-foreground p-1 rounded-full hover:bg-background transition-colors"
+          disabled={isClosing}
+        >
+          <X className="w-5 h-5" />
+        </button>
+
+        <div className="p-6 border-b border-border">
+          <h2 className="text-2xl font-bold text-foreground">Close Cash Register</h2>
+          <p className="text-sm text-foreground/70 mt-1">End your shift and close out the register</p>
+        </div>
+
+        <form onSubmit={handleClose} className="p-6 space-y-4">
+          <div className="flex justify-between items-center p-3 bg-background rounded-lg border border-border">
+            <span className="text-sm font-medium text-foreground/70">Opening Amount</span>
+            <span className="font-semibold text-foreground">{formatMoney(openingAmount, currency)}</span>
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-foreground block">Closing Amount</label>
+            <div className="relative">
+              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <DollarSign className="h-5 w-5 text-foreground/40" />
+              </div>
+              <input
+                type="number"
+                min="0"
+                step="0.01"
+                value={closingAmount}
+                onChange={(e) => setClosingAmount(e.target.value)}
+                required
+                className="w-full pl-10 pr-4 py-2 bg-background border border-border rounded-md text-foreground focus:outline-none focus:ring-2 focus:ring-pos-500"
+                placeholder="0.00"
+              />
+            </div>
+          </div>
+
+          {closingAmount !== '' && (
+            <div className={`flex items-center gap-2 p-3 rounded-lg border ${varianceBg}`}>
+              <VarianceIcon className={`w-5 h-5 ${varianceColor}`} />
+              <div className="flex-1">
+                <span className="text-sm font-medium text-foreground block">Variance</span>
+                <span className={`font-semibold ${varianceColor}`}>
+                  {variance > 0 ? '+' : ''}{formatMoney(variance, currency)}
+                </span>
+              </div>
+            </div>
+          )}
+
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-foreground block">Notes (Optional)</label>
+            <textarea
+              value={notes}
+              onChange={(e) => setNotes(e.target.value)}
+              rows={3}
+              className="w-full px-3 py-2 bg-background border border-border rounded-md text-foreground focus:outline-none focus:ring-2 focus:ring-pos-500 resize-none"
+              placeholder="Any comments about variance or issues..."
+            />
+          </div>
+
+          <div className="pt-4 flex gap-3">
+            <button
+              type="button"
+              onClick={onClose}
+              disabled={isClosing}
+              className="flex-1 py-2 px-4 bg-background border border-border hover:bg-surface text-foreground rounded-lg font-medium transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={isClosing}
+              className="flex-1 flex items-center justify-center gap-2 py-2 px-4 bg-pos-500 hover:bg-pos-500/90 text-white rounded-lg font-medium transition-colors disabled:opacity-70"
+            >
+              {isClosing ? <Loader2 className="w-5 h-5 animate-spin" /> : null}
+              Close Register
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

package/frontend/src/components/pos/PaymentModal.tsx

@@ -0,0 +1,266 @@
+'use client';
+
+import React, { useState } from 'react';
+import { X, Settings, Check, Loader2 } from 'lucide-react';
+import { useAppStore } from '@/store/app-store';
+import { usePaymentMethodsStore } from '@/store/payment-methods-store';
+import { usePosStore } from '@/store/pos-store';
+import { formatMoney } from '@/lib/utils';
+import { api } from '@/lib/api';
+import toast from 'react-hot-toast';
+
+interface PaymentModalProps {
+  open: boolean;
+  onClose: () => void;
+  onSettingsOpen: () => void;
+  onSaleComplete?: () => void; // callback to refresh products after sale
+  cashSessionId?: string;
+  onSaleSuccess?: (saleData: any) => void;
+}
+
+export default function PaymentModal({ open, onClose, onSettingsOpen, onSaleComplete, cashSessionId, onSaleSuccess }: PaymentModalProps) {
+  const { currency } = useAppStore();
+  const { cart, total, subtotal, discount, customer, completeSale } = usePosStore();
+  const { methods, recordSale } = usePaymentMethodsStore();
+
+  const [selectedMethodId, setSelectedMethodId] = useState<string | null>(null);
+  const [isProcessing, setIsProcessing] = useState(false);
+
+  const enabledMethods = methods.filter((m) => m.enabled);
+
+  const handleCompleteSale = async () => {
+    if (!selectedMethodId || isProcessing) return;
+
+    const method = methods.find((m) => m.id === selectedMethodId);
+    if (!method) return;
+
+    setIsProcessing(true);
+
+    try {
+      // 1. Call the backend API to create the sale and deduct stock
+      const salePayload: any = {
+        payment_method: method.name.toLowerCase(),
+        items: cart.map((item) => ({
+          medicine_id: item.medicine_id,
+          quantity: Number(item.quantity) || 1,
+          unit_price: Number(item.unit_price) || 0,
+        })),
+        customer_id: customer?.id || null,
+      };
+
+      if (cashSessionId && typeof cashSessionId === 'string' && cashSessionId.trim().length > 0) {
+        salePayload.cash_session_id = cashSessionId;
+      }
+
+      const res: any = await api.processSale(salePayload);
+
+      // Construct receipt data for the receipt modal
+      const receiptData = {
+        invoice_number: res?.invoice_number || `INV-${Date.now().toString().slice(-8).toUpperCase()}`,
+        created_at: res?.created_at || new Date().toISOString(),
+        items: cart.map((item) => ({
+          medicine_id: item.medicine_id,
+          name: item.name,
+          quantity: item.quantity,
+          unit_price: item.unit_price,
+          line_total: item.line_total,
+        })),
+        total_amount: total,
+        payment_method: method.name,
+        customer: customer ? { id: customer.id, name: customer.name } : null,
+      };
+
+      // 2. Record in local payment tracking store (for POS-level summary)
+      recordSale({
+        items: cart.map((item) => ({
+          name: item.name,
+          quantity: item.quantity,
+          unit_price: item.unit_price,
+          line_total: item.line_total,
+        })),
+        subtotal,
+        discount: discount.amount,
+        total,
+        paymentMethodId: method.id,
+        paymentMethodName: method.name,
+        paymentType: method.type,
+        customerName: customer?.name || null,
+      });
+
+      // 3. Clear the POS cart
+      completeSale();
+
+      // 4. Notify success
+      toast.success(`Sale completed via ${method.name}!`);
+
+      // 5. Refresh product data (stock quantities changed)
+      if (onSaleComplete) {
+        onSaleComplete();
+      }
+
+      // 6. Trigger receipt if callback provided
+      if (onSaleSuccess) {
+        onSaleSuccess(receiptData);
+      }
+
+      setSelectedMethodId(null);
+      onClose();
+    } catch (error: any) {
+      console.error('Sale failed:', error);
+      toast.error(error.message || 'Failed to process sale. Please try again.');
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
+  const handleClose = () => {
+    if (isProcessing) return; // Don't close while processing
+    setSelectedMethodId(null);
+    onClose();
+  };
+
+  if (!open) return null;
+
+  // Separate cash and mobile methods
+  const cashMethods = enabledMethods.filter((m) => m.type === 'cash');
+  const mobileMethods = enabledMethods.filter((m) => m.type === 'mobile');
+
+  return (
+    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
+      <div className="bg-background rounded-2xl max-w-[560px] w-[95%] shadow-[0_25px_50px_rgba(0,0,0,0.25)] flex flex-col overflow-hidden">
+        {/* Header */}
+        <div className="flex items-center justify-between px-6 pt-5 pb-1">
+          <h2 className="text-2xl font-bold text-foreground">Payment</h2>
+          <div className="flex items-center gap-1">
+            <button
+              onClick={() => { handleClose(); onSettingsOpen(); }}
+              className="p-2 hover:bg-surface rounded-full text-foreground/40 transition-colors"
+              title="Payment Settings"
+            >
+              <Settings size={18} />
+            </button>
+            <button onClick={handleClose} className="p-2 hover:bg-surface rounded-full text-foreground/50 transition-colors">
+              <X size={22} />
+            </button>
+          </div>
+        </div>
+
+        {/* Total */}
+        <div className="px-6 pb-4 pt-1">
+          <p className="text-sm text-foreground/40 text-center mb-0.5">Total Due</p>
+          <div className="text-4xl font-black text-foreground text-center">
+            {formatMoney(total, currency)}
+          </div>
+        </div>
+
+        {/* All Payment Options */}
+        <div className="px-6 pb-2">
+          {/* Cash */}
+          {cashMethods.length > 0 && (
+            <div className="mb-3">
+              <div className="text-xs font-semibold text-foreground/40 uppercase tracking-wider mb-2 px-1">Cash</div>
+              <div className="grid grid-cols-1 gap-2">
+                {cashMethods.map((method) => (
+                  <button
+                    key={method.id}
+                    onClick={() => setSelectedMethodId(method.id)}
+                    disabled={isProcessing}
+                    className={`flex items-center gap-3 p-3.5 rounded-xl border-2 transition-all ${
+                      selectedMethodId === method.id
+                        ? 'border-green-500 bg-green-50 dark:bg-green-500/10 shadow-sm'
+                        : 'border-transparent bg-surface hover:border-green-300 dark:hover:border-green-500/40'
+                    }`}
+                  >
+                    <div
+                      className="w-10 h-10 rounded-xl flex items-center justify-center text-xl"
+                      style={{ backgroundColor: method.color + '18' }}
+                    >
+                      {method.logo}
+                    </div>
+                    <span className={`text-base font-semibold flex-1 text-left ${
+                      selectedMethodId === method.id ? 'text-green-700 dark:text-green-300' : 'text-foreground'
+                    }`}>
+                      {method.name}
+                    </span>
+                    {selectedMethodId === method.id && (
+                      <div className="w-6 h-6 rounded-full bg-green-500 flex items-center justify-center">
+                        <Check size={14} className="text-white" />
+                      </div>
+                    )}
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Mobile Banks */}
+          {mobileMethods.length > 0 && (
+            <div className="mb-3">
+              <div className="text-xs font-semibold text-foreground/40 uppercase tracking-wider mb-2 px-1">Mobile Bank</div>
+              <div className="grid grid-cols-3 gap-2">
+                {mobileMethods.map((method) => (
+                  <button
+                    key={method.id}
+                    onClick={() => setSelectedMethodId(method.id)}
+                    disabled={isProcessing}
+                    className={`flex flex-col items-center gap-2.5 p-4 rounded-xl border-2 transition-all relative ${
+                      selectedMethodId === method.id
+                        ? 'border-pos-500 bg-pos-50 dark:bg-pos-500/10 shadow-sm'
+                        : 'border-transparent bg-surface hover:border-pos-300 dark:hover:border-pos-500/40'
+                    }`}
+                  >
+                    {selectedMethodId === method.id && (
+                      <div className="absolute top-1.5 right-1.5 w-5 h-5 rounded-full bg-pos-500 flex items-center justify-center">
+                        <Check size={12} className="text-white" />
+                      </div>
+                    )}
+                    <div
+                      className="w-11 h-11 rounded-xl flex items-center justify-center text-2xl"
+                      style={{ backgroundColor: method.color + '18' }}
+                    >
+                      {method.logo}
+                    </div>
+                    <span className={`text-sm font-semibold ${
+                      selectedMethodId === method.id ? 'text-pos-600 dark:text-pos-300' : 'text-foreground'
+                    }`}>
+                      {method.name}
+                    </span>
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Action Buttons */}
+        <div className="px-6 pb-5 pt-2 flex gap-3">
+          <button
+            onClick={handleClose}
+            disabled={isProcessing}
+            className="flex-1 bg-surface hover:bg-border text-foreground/60 font-semibold py-4 rounded-xl transition-colors text-base disabled:opacity-50"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleCompleteSale}
+            disabled={!selectedMethodId || isProcessing}
+            className={`flex-[2] font-bold py-4 rounded-xl transition-all text-base flex items-center justify-center gap-2 ${
+              selectedMethodId && !isProcessing
+                ? 'bg-pos-500 hover:bg-pos-600 text-white shadow-lg shadow-pos-500/20'
+                : 'bg-border text-foreground/25 cursor-not-allowed'
+            }`}
+          >
+            {isProcessing ? (
+              <>
+                <Loader2 size={20} className="animate-spin" />
+                Processing...
+              </>
+            ) : (
+              'Complete Sale'
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}