SpreadsheetViewer

import { SpreadsheetViewer } from '@reductoai-collab/components';
import '@reductoai-collab/components/styles/spreadsheet-viewer.css';

function App() {
  return (
    <div style={{ height: '600px', width: '100%' }}>
      <SpreadsheetViewer
        url="https://example.com/spreadsheet.xlsx"
        onLoad={(metadata) => {
          console.log(`Loaded ${metadata.sheetCount} sheets`);
        }}
        onError={(error) => {
          console.error(`Error: ${error.message}`);
        }}
      />
    </div>
  );
}

import { SpreadsheetViewer } from '@reductoai-collab/components';

function BasicViewer() {
  return (
    <div style={{ height: '600px', width: '100%' }}>
      <SpreadsheetViewer
        url="/documents/financial-report.xlsx"
        onLoad={(metadata) => {
          console.log('Sheet names:', metadata.sheetNames);
        }}
      />
    </div>
  );
}

import { SpreadsheetViewer, type BoundingBox } from '@reductoai-collab/components';

function ViewerWithBboxes() {
  const bboxes: BoundingBox[] = [
    {
      id: 'header-row',
      page: 1,        // Sheet number (1-indexed)
      top: 1,         // Starting row
      left: 1,        // Starting column (A = 1)
      width: 5,       // Number of columns
      height: 1,      // Number of rows
      color: 'blue',
      label: 'Header',
    },
    {
      id: 'data-table',
      page: 1,
      top: 2,
      left: 1,
      width: 5,
      height: 10,
      color: 'green',
      label: 'Sales Data',
      metadata: {
        tableId: 'tbl-001',
        confidence: 0.95,
      },
    },
  ];

  return (
    <div style={{ height: '600px', width: '100%' }}>
      <SpreadsheetViewer
        url="/documents/sales-data.xlsx"
        bboxes={bboxes}
        onBboxClick={(bbox) => {
          console.log('Clicked:', bbox.id);
          console.log('Custom data:', bbox.metadata);
        }}
      />
    </div>
  );
}

import { useState } from 'react';
import { SpreadsheetViewer, type BoundingBox } from '@reductoai-collab/components';

interface ReductoBlock {
  id: string;
  type: 'table' | 'text' | 'key_value';
  bbox: {
    page: number;
    top: number;
    left: number;
    width: number;
    height: number;
  };
  content: string;
}

interface ExtractionResult {
  blocks: ReductoBlock[];
}

function ReductoViewer({
  documentUrl,
  extractionResult,
}: {
  documentUrl: string;
  extractionResult: ExtractionResult;
}) {
  const [selectedBlock, setSelectedBlock] = useState<ReductoBlock | null>(null);

  // Map block types to colors
  const colorMap: Record<string, BoundingBox['color']> = {
    table: 'blue',
    text: 'green',
    key_value: 'purple',
  };

  // Convert Reducto blocks to bounding boxes
  const bboxes: BoundingBox[] = extractionResult.blocks.map((block) => ({
    id: block.id,
    page: block.bbox.page,
    top: block.bbox.top,
    left: block.bbox.left,
    width: block.bbox.width,
    height: block.bbox.height,
    color: colorMap[block.type] ?? 'gray',
    label: block.type,
    metadata: {
      blockId: block.id,
      type: block.type,
      content: block.content,
    },
  }));

  return (
    <div style={{ display: 'flex', height: '600px' }}>
      {/* Viewer */}
      <div style={{ flex: 1 }}>
        <SpreadsheetViewer
          url={documentUrl}
          bboxes={bboxes}
          onBboxClick={(bbox) => {
            const block = extractionResult.blocks.find(
              (b) => b.id === bbox.metadata?.blockId
            );
            setSelectedBlock(block ?? null);
          }}
        />
      </div>

      {/* Details Panel */}
      <div style={{ width: '300px', padding: '16px', borderLeft: '1px solid #e5e7eb' }}>
        <h3>Selected Block</h3>
        {selectedBlock ? (
          <div>
            <p><strong>Type:</strong> {selectedBlock.type}</p>
            <p><strong>Content:</strong></p>
            <pre style={{ whiteSpace: 'pre-wrap', fontSize: '12px' }}>
              {selectedBlock.content}
            </pre>
          </div>
        ) : (
          <p style={{ color: '#6b7280' }}>Click a bounding box to see details</p>
        )}
      </div>
    </div>
  );
}

interface BoundingBox {
  id: string;                    // Unique identifier
  page: number;                  // Sheet number (1-indexed)
  top: number;                   // Starting row (1-indexed)
  left: number;                  // Starting column (1-indexed, A=1)
  width: number;                 // Number of columns
  height: number;                // Number of rows
  color?: BoundingBoxColor;      // Box color (default: 'blue')
  label?: string;                // Optional label text
  metadata?: Record<string, unknown>;  // Custom data
}

type BoundingBoxColor =
  | 'blue' | 'green' | 'red' | 'yellow'
  | 'purple' | 'orange' | 'pink' | 'gray';

interface WorkbookMetadata {
  sheetCount: number;      // Total number of sheets
  sheetNames: string[];    // Array of sheet names
  activeSheet: number;     // Currently active sheet index
}

interface SpreadsheetError {
  code: 'FETCH_ERROR' | 'PARSE_ERROR' | 'INVALID_FORMAT';
  message: string;
  originalError?: Error;
}