Approve Scan Button

A button component for approving scans and adding identified cards to the user's collection. Integrates with the Optimistic CRUD Pipeline pattern.

Overview

The ApproveScanButton component provides a clean interface for users to approve processed scans and add identified cards to their collection. It follows the Optimistic CRUD Pipeline pattern and provides clear feedback states.

The component handles the complete approval workflow:

  • Loading State: Shows spinner and "Approving..." text
  • Success State: Shows checkmark and "Approved" text
  • Error Handling: Provides error feedback via callback
  • Collection Integration: Creates user_cards entries

Basic Usage

Default Button

Standard approve scan button with success/error callbacks

import { ApproveScanButton } from '@/components/ui/ApproveScanButton';

function MyComponent() {
  const handleSuccess = (result) => {
    console.log('Scan approved:', result);
    // Handle success - maybe refresh data or show toast
  };

  const handleError = (error) => {
    console.error('Approve failed:', error);
    // Handle error - show error message
  };

  return (
    <ApproveScanButton
      scanId="scan-uuid-here"
      onSuccess={handleSuccess}
      onError={handleError}
    />
  );
}

Props

Component Interface

Available props for the ApproveScanButton component

interface ApproveScanButtonProps {
  scanId: string;
  onSuccess?: (result: any) => void;
  onError?: (error: string) => void;
  className?: string;
  disabled?: boolean;
}
interface ApproveScanButtonProps {
  scanId: string;
  onSuccess?: (result: any) => void;
  onError?: (error: string) => void;
  className?: string;
  disabled?: boolean;
}

States

The button has three main states:

  • Default: Shows "📚 Approve Scan" with primary styling
  • Loading: Shows spinner and "Approving..." text, button is disabled
  • Success: Shows "✅ Approved" with success styling for 3 seconds

Integration

This component integrates with several parts of the system:

  • API Endpoint: Calls /api/scans/bulk for bulk operations
  • Database: Creates entries in user_cards table
  • Scan Status: Updates scan processing status to 'approved'
  • Collection Pipeline: Completes the scan → review → collection workflow

Design Tokens

The component uses CircuitDS design tokens for consistent styling:

  • Spacing: Uses --sds-size-space-* tokens
  • Colors: Uses semantic color tokens for success states
  • Typography: Uses --sds-size-font-* tokens
  • Border Radius: Uses --sds-size-radius-* tokens