page.tsx

Go to the documentation of this file.

'use client';
 
import { useState, useEffect, useRef } from 'react';
 
interface DocumentProcessing {
  Physkey: string;
  LoadDt: string;
  SrcFileName: string;
  DecodeStage: number;
  DecodeStage_Word: string;
  DecodedFileType: string;
  DOCU?: Array<{
    DocTypeName: string;
    Date: string;
    InvoiceNumber: string;
    Issuer: string;
    GrandTotal: number;
  }>;
  f103?: string; // Comments
}
 
type TabType = 'ready' | 'processing' | 'about';
 
export default function UploadDocumentQueue() {
  const [activeTab, setActiveTab] = useState<TabType>('ready');
  const [readyDocs, setReadyDocs] = useState<DocumentProcessing[]>([]);
  const [processingDocs, setProcessingDocs] = useState<DocumentProcessing[]>([]);
  const [loading, setLoading] = useState(false);
  const [uploading, setUploading] = useState(false);
  const [isDragOver, setIsDragOver] = useState(false);
  const [selectedDoc, setSelectedDoc] = useState<DocumentProcessing | null>(null);
  const [showOptionsModal, setShowOptionsModal] = useState(false);
  const [showUploadModal, setShowUploadModal] = useState(false);
  const [enablePreview, setEnablePreview] = useState(true);
  const [startDate, setStartDate] = useState('2020-01-01');
  const [endDate, setEndDate] = useState('');
  const [maxRows, setMaxRows] = useState('20');
  const fileInputRef = useRef<HTMLInputElement>(null);
 
  useEffect(() => {
    // Set end date to tomorrow
    const tomorrow = new Date();
    tomorrow.setDate(tomorrow.getDate() + 1);
    setEndDate(tomorrow.toISOString().split('T')[0]);
    
    // Load documents on mount
    loadDocuments();
  }, []);
 
  const loadDocuments = async () => {
    setLoading(true);
    try {
      // Build query params
      let url = '/GNAP/J/BUCK?3=retailmax.elink.documentprocessing.list';
      if (startDate) url += `&9=f101,ge,${startDate}`;
      if (endDate) url += `&9=f101,lt,${endDate}`;
      url += `&8=${maxRows}`;
 
      // In production: fetch(url)
      // For now, use sample data
      console.log('Load documents from:', url);
      
      // Simulate API call with sample data
      const sampleReady: DocumentProcessing[] = [
        {
          Physkey: 'KEP3JWQYYBG4MZTDJS3AYSAAAAIQAAAB',
          LoadDt: '2025-03-13T17:50:00',
          SrcFileName: 'INVOICE_A3324989.PDF',
          DecodeStage: 19,
          DecodeStage_Word: 'Ready',
          DecodedFileType: 'PDF',
          DOCU: [{
            DocTypeName: 'Invoice',
            Date: '2025-03-13',
            InvoiceNumber: 'A3324989',
            Issuer: 'Ausjet Holdings Pty',
            GrandTotal: 499.63
          }],
          f103: ''
        },
        {
          Physkey: 'KEP3JWAYYBG4MZTDDIWQYBIAAAJQAAAB',
          LoadDt: '2025-03-12T14:40:00',
          SrcFileName: 'Print Invoice A3324949.pdf',
          DecodeStage: 19,
          DecodeStage_Word: 'Ready',
          DecodedFileType: 'PDF',
          DOCU: [{
            DocTypeName: 'Invoice',
            Date: '',
            InvoiceNumber: 'A3324949',
            Issuer: 'Ausjet Holdings Pty',
            GrandTotal: 976.21
          }],
          f103: ''
        },
        {
          Physkey: 'KEP3JWAYYBG4MZTDDIUQYBIAAAIQAAAB',
          LoadDt: '2025-03-12T14:40:00',
          SrcFileName: 'Print Invoice A3324895.pdf',
          DecodeStage: 19,
          DecodeStage_Word: 'Ready',
          DecodedFileType: 'PDF',
          DOCU: [{
            DocTypeName: 'Invoice',
            Date: '2025-03-12',
            InvoiceNumber: 'A3324895',
            Issuer: 'Ausjet Holdings Pty',
            GrandTotal: 863.67
          }],
          f103: ''
        }
      ];
 
      const sampleProcessing: DocumentProcessing[] = [
        {
          Physkey: 'KEP3PROC1',
          LoadDt: '2025-02-28T19:02:00',
          SrcFileName: 'Print Invoice A3324351.pdf',
          DecodeStage: 42,
          DecodeStage_Word: 'Analysing',
          DecodedFileType: 'PDF'
        },
        {
          Physkey: 'KEP3PROC2',
          LoadDt: '2025-02-28T19:01:00',
          SrcFileName: 'Print Invoice A3324685.pdf',
          DecodeStage: 42,
          DecodeStage_Word: 'Analysing',
          DecodedFileType: 'PDF'
        },
        {
          Physkey: 'KEP3PROC3',
          LoadDt: '2025-02-28T18:57:00',
          SrcFileName: 'Print Invoice A3324684.pdf',
          DecodeStage: 42,
          DecodeStage_Word: 'Analysing',
          DecodedFileType: 'PDF'
        }
      ];
 
      setReadyDocs(sampleReady);
      setProcessingDocs(sampleProcessing);
    } catch (error) {
      console.error('Error loading documents:', error);
      alert('Error loading documents. Please try again.');
    } finally {
      setLoading(false);
    }
  };
 
  const handleUploadFile = async (file: File) => {
    setUploading(true);
    setShowUploadModal(false);
    
    try {
      const formData = new FormData();
      formData.append('f8', 'retailmax.elink.documentprocessing.load');
      formData.append('f11_B', 'E');
      formData.append('f135_E', '1'); // Queue
      formData.append('f110/n301', file);
 
      // In production: 
      // const response = await fetch('/gnap/J/dati', {
      //   method: 'POST',
      //   body: formData,
      //   headers: {
      //     'X-Api-Key': sessionStorage.getItem('LginApiKey') || ''
      //   }
      // });
      
      console.log('Upload file:', file.name);
      alert(`File "${file.name}" uploaded successfully!\n\nThe document will be processed and appear in the queue shortly.`);
      
      // Reload documents after short delay
      setTimeout(() => {
        loadDocuments();
      }, 2000);
    } catch (error) {
      console.error('Error uploading file:', error);
      alert('Error uploading file. Please try again.');
    } finally {
      setUploading(false);
    }
  };
 
  const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    setIsDragOver(true);
  };
 
  const handleDragLeave = (e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    setIsDragOver(false);
  };
 
  const handleDrop = (e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    setIsDragOver(false);
 
    const files = e.dataTransfer.files;
    if (files && files.length > 0) {
      if (files.length > 1) {
        alert('Please drop only one file at a time');
        return;
      }
      handleUploadFile(files[0]);
    }
  };
 
  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files;
    if (files && files.length > 0) {
      handleUploadFile(files[0]);
    }
  };
 
  const openUploadModal = () => {
    setShowUploadModal(true);
  };
 
  const closeUploadModal = () => {
    setShowUploadModal(false);
  };
 
  const openOptionsModal = (doc: DocumentProcessing) => {
    setSelectedDoc(doc);
    setShowOptionsModal(true);
  };
 
  const closeOptionsModal = () => {
    setShowOptionsModal(false);
    setSelectedDoc(null);
  };
 
  const handleRejectDocument = async () => {
    if (!selectedDoc) return;
    
    if (confirm('Really reject this document?\n\nIt will not be processed any further.')) {
      // Fieldpine command structure
      const command = {
        CommandText: `:stock document ${selectedDoc.Physkey} mark rejected`
      };
      
      // In production: await fetch('/OpenApi/Stock2/Primitive', { method: 'POST', body: JSON.stringify(command) });
      console.log('Reject document:', command);
      alert('Document rejected');
      closeOptionsModal();
      loadDocuments();
    }
  };
 
  const handleRescanDocument = async () => {
    if (!selectedDoc) return;
    
    if (confirm('Rescan this document?\n\nThe document will be reset as if you had just now uploaded it.\nYou may be charged again for this rescanning.')) {
      const command = {
        CommandText: `:stock document ${selectedDoc.Physkey} mark rerun`
      };
      
      // In production: await fetch('/OpenApi/Stock2/Primitive', { method: 'POST', body: JSON.stringify(command) });
      console.log('Rescan document:', command);
      alert('Document queued for rescanning');
      closeOptionsModal();
      loadDocuments();
    }
  };
 
  const handleReceiveOrder = (physkey: string) => {
    // Navigate to receive page
    window.location.href = `/purchase-orders/receivedoc?wq=${physkey}`;
  };
 
  const formatDateTime = (dateStr: string) => {
    if (!dateStr) return '';
    const date = new Date(dateStr);
    return date.toLocaleString('en-GB', { 
      day: '2-digit', 
      month: 'short', 
      year: 'numeric',
      hour: '2-digit',
      minute: '2-digit'
    });
  };
 
  return (
    <div className="min-h-screen bg-surface p-6">
      <div className="max-w-7xl mx-auto">
        {/* Header */}
        <div className="mb-6">
          <div className="flex items-center gap-4 mb-4">
            <button
              onClick={() => window.history.back()}
              className="text-brand hover:underline cursor-pointer"
            >
              ← Back to Purchase Orders
            </button>
          </div>
          <h1 className="text-3xl font-bold text-brand mb-2">Document Work Queue</h1>
          <p className="text-muted">
            Manage inbound documents such as PDF files, invoice scans and other paperwork. 
            Fieldpine will attempt to decode and process this paperwork automatically.
          </p>
          <p className="text-sm text-muted mt-2">
            NOTE: Currently only a limited set of suppliers and documents can be processed.
            <a href="https://fieldpine.com/docs/howdoi/receivescan.htm" target="_blank" className="text-brand ml-2 hover:underline">User Guide</a>
          </p>
        </div>
 
        {/* Upload Drop Zone */}
        <div 
          className={`card p-6 mb-6 border-2 border-dashed transition-all cursor-pointer ${
            isDragOver ? 'border-brand bg-green-50' : 'border-border'
          }`}
          onDragOver={handleDragOver}
          onDragLeave={handleDragLeave}
          onDrop={handleDrop}
          onClick={openUploadModal}
        >
          <div className="text-center">
            <div className="text-4xl mb-2">📄</div>
            <p className="font-semibold mb-1">Drop New Documents Here</p>
            <p className="text-sm text-muted">
              Documents will be sent to Fieldpine.com for analysis
            </p>
            <button 
              className="mt-3 px-4 py-2 text-white rounded hover:opacity-80 transition-all cursor-pointer bg-brand"
              onClick={(e) => { e.stopPropagation(); openUploadModal(); }}
            >
              Find File
            </button>
          </div>
        </div>
 
        {/* Filters */}
        <div className="card p-4 mb-6">
          <div className="flex flex-wrap gap-4 items-end">
            <div>
              <label className="block text-sm font-medium mb-1">From Date (incl)</label>
              <input
                type="date"
                value={startDate}
                onChange={(e) => setStartDate(e.target.value)}
                className="border border-border rounded px-3 py-2"
              />
            </div>
            <div>
              <label className="block text-sm font-medium mb-1">To Date (excl)</label>
              <input
                type="date"
                value={endDate}
                onChange={(e) => setEndDate(e.target.value)}
                className="border border-border rounded px-3 py-2"
              />
            </div>
            <div>
              <label className="block text-sm font-medium mb-1">Max Rows</label>
              <select
                value={maxRows}
                onChange={(e) => setMaxRows(e.target.value)}
                className="border border-border rounded px-3 py-2"
              >
                <option value="10">10</option>
                <option value="20">20</option>
                <option value="50">50</option>
                <option value="100">100</option>
                <option value="500">500</option>
              </select>
            </div>
            <button
              onClick={loadDocuments}
              disabled={loading}
              className="px-4 py-2 text-white rounded hover:opacity-80 transition-all cursor-pointer bg-brand"
            >
              {loading ? 'Loading...' : 'Load'}
            </button>
            <label className="flex items-center gap-2 ml-auto">
              <input
                type="checkbox"
                checked={enablePreview}
                onChange={(e) => setEnablePreview(e.target.checked)}
              />
              <span className="text-sm">Show Preview</span>
            </label>
          </div>
        </div>
 
        {/* Tabs */}
        <div className="mb-6">
          <div className="border-b border-border flex gap-1">
            <button
              onClick={() => setActiveTab('ready')}
              className={`px-4 py-2 font-medium transition-colors cursor-pointer ${
                activeTab === 'ready'
                  ? 'border-b-2 border-brand text-brand'
                  : 'text-muted hover:text-text'
              }`}
            >
              Ready For Use <span className="text-sm">({readyDocs.length})</span>
            </button>
            <button
              onClick={() => setActiveTab('processing')}
              className={`px-4 py-2 font-medium transition-colors cursor-pointer ${
                activeTab === 'processing'
                  ? 'border-b-2 border-brand text-brand'
                  : 'text-muted hover:text-text'
              }`}
            >
              Still Processing <span className="text-sm">({processingDocs.length})</span>
            </button>
            <button
              onClick={() => setActiveTab('about')}
              className={`px-4 py-2 font-medium transition-colors cursor-pointer ${
                activeTab === 'about'
                  ? 'border-b-2 border-brand text-brand'
                  : 'text-muted hover:text-text'
              }`}
            >
              About
            </button>
          </div>
        </div>
 
        {/* Tab Content */}
        {activeTab === 'ready' && (
          <div className="card overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b border-border">
                  <th className="text-left py-3 px-4 font-semibold">Received Date</th>
                  <th className="text-left py-3 px-4 font-semibold">Content</th>
                  <th className="text-left py-3 px-4 font-semibold">Doc Date</th>
                  <th className="text-left py-3 px-4 font-semibold">Invoice#</th>
                  <th className="text-left py-3 px-4 font-semibold">Issuer</th>
                  <th className="text-left py-3 px-4 font-semibold">Value</th>
                  <th className="text-left py-3 px-4 font-semibold">Comments</th>
                  <th className="text-left py-3 px-4 font-semibold">Options</th>
                  <th className="text-left py-3 px-4 font-semibold">Original FileName</th>
                </tr>
              </thead>
              <tbody>
                {readyDocs.map((doc, idx) => (
                  <tr key={doc.Physkey} className={idx % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
                    <td className="py-3 px-4">{formatDateTime(doc.LoadDt)}</td>
                    <td className="py-3 px-4">{doc.DOCU?.[0]?.DocTypeName || ''}</td>
                    <td className="py-3 px-4">{doc.DOCU?.[0]?.Date || ''}</td>
                    <td className="py-3 px-4">{doc.DOCU?.[0]?.InvoiceNumber || ''}</td>
                    <td className="py-3 px-4">{doc.DOCU?.[0]?.Issuer || ''}</td>
                    <td className="py-3 px-4">${doc.DOCU?.[0]?.GrandTotal?.toFixed(2) || '0.00'}</td>
                    <td className="py-3 px-4">{doc.f103 || ''}</td>
                    <td className="py-3 px-4">
                      <div className="flex gap-2">
                        <button
                          onClick={() => openOptionsModal(doc)}
                          className="px-3 py-1 text-sm border border-border rounded hover:bg-gray-100 cursor-pointer"
                        >
                          Options
                        </button>
                        <button
                          onClick={() => handleReceiveOrder(doc.Physkey)}
                          className="px-3 py-1 text-sm text-white rounded hover:opacity-80 cursor-pointer bg-brand"
                        >
                          Receive Order
                        </button>
                      </div>
                    </td>
                    <td className="py-3 px-4 text-sm text-muted">{doc.SrcFileName}</td>
                  </tr>
                ))}
                {readyDocs.length === 0 && (
                  <tr>
                    <td colSpan={9} className="py-8 text-center text-muted">
                      No documents ready for use
                    </td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>
        )}
 
        {activeTab === 'processing' && (
          <div className="card overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b border-border">
                  <th className="text-left py-3 px-4 font-semibold">Load Date</th>
                  <th className="text-left py-3 px-4 font-semibold">Original FileName</th>
                  <th className="text-left py-3 px-4 font-semibold">DecodeStage</th>
                  <th className="text-left py-3 px-4 font-semibold">DecodedFileType</th>
                  <th className="text-left py-3 px-4 font-semibold">Options</th>
                </tr>
              </thead>
              <tbody>
                {processingDocs.map((doc, idx) => (
                  <tr key={doc.Physkey} className={idx % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
                    <td className="py-3 px-4">{formatDateTime(doc.LoadDt)}</td>
                    <td className="py-3 px-4">{doc.SrcFileName}</td>
                    <td className="py-3 px-4">{doc.DecodeStage_Word}</td>
                    <td className="py-3 px-4">{doc.DecodedFileType}</td>
                    <td className="py-3 px-4">
                      <button
                        onClick={() => openOptionsModal(doc)}
                        className="px-3 py-1 text-sm border border-border rounded hover:bg-gray-100 cursor-pointer"
                      >
                        Options
                      </button>
                    </td>
                  </tr>
                ))}
                {processingDocs.length === 0 && (
                  <tr>
                    <td colSpan={5} className="py-8 text-center text-muted">
                      No documents currently processing
                    </td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>
        )}
 
        {activeTab === 'about' && (
          <div className="card p-6">
            <h2 className="text-xl font-bold mb-4">About Document Processing</h2>
            <p className="mb-4">
              This page shows documents that have been loaded or are currently being processed through the system. 
              As various documents arrive in the form of Emails, XML files, photographs and scanned images they are 
              placed in the work queue for processing.
            </p>
 
            <h3 className="font-bold mt-6 mb-3">Processing Workflow</h3>
            <div className="space-y-4 mb-6">
              <div className="border border-brand rounded p-4" style={{ backgroundColor: '#ffffa0' }}>
                <h4 className="font-semibold mb-2">1. Acquire Document</h4>
                <p className="text-sm">Image Scanner • Digital Photograph • Excel • Email • Electronic Feeds</p>
              </div>
              <div className="border border-brand rounded p-4" style={{ backgroundColor: '#a0a0ff' }}>
                <h4 className="font-semibold mb-2">2. Document Loaded</h4>
                <p className="text-sm">OCR Analysis • Content Analysis</p>
              </div>
              <div className="border border-brand rounded p-4" style={{ backgroundColor: '#a0ffa0' }}>
                <h4 className="font-semibold mb-2">3. Await Human Confirmation</h4>
                <p className="text-sm">Apply to System</p>
              </div>
            </div>
 
            <h3 className="font-bold mt-6 mb-3">Tips and Tricks</h3>
            <p className="mb-4">
              The system works by 'reading' the document much like a human. It matches that to patterns and attempts 
              to determine the contents. While this works well when operational, it is somewhat fragile as the document 
              you receive is not formally defined and can subtly change without warning.
            </p>
            
            <h4 className="font-semibold mb-2">Recommended File Formats (in order of preference):</h4>
            <ul className="list-disc ml-6 mb-4">
              <li>TIFF</li>
              <li>PNG</li>
              <li>BMP</li>
              <li>JPEG</li>
              <li>PDF (not recommended for scans, as is typically simply a photo store saved into a PDF file)</li>
            </ul>
 
            <p className="mb-4">
              If you are taking photographs of documents, please try and use a high resolution camera. Photographs 
              taken with iPad cameras are often not processable due to resolution and aggressive compression. If 
              photographing documents, try to hold the document at right angles and photograph square on.
            </p>
          </div>
        )}
 
        {/* Upload Modal */}
        {showUploadModal && (
          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" onClick={closeUploadModal}>
            <div className="bg-white rounded-lg p-6 max-w-md w-full mx-4" onClick={(e) => e.stopPropagation()}>
              <div className="flex justify-between items-center mb-4">
                <h2 className="text-xl font-bold">Document Upload</h2>
                <button onClick={closeUploadModal} className="text-2xl hover:text-brand cursor-pointer">&times;</button>
              </div>
              <p className="mb-4">Select a file containing the invoice</p>
              <input
                ref={fileInputRef}
                type="file"
                onChange={handleFileSelect}
                accept=".pdf,.png,.jpg,.jpeg,.tiff,.bmp"
                className="mb-4 w-full"
              />
              <div className="flex justify-end gap-2">
                <button
                  onClick={closeUploadModal}
                  className="px-4 py-2 border border-border rounded hover:bg-gray-100 cursor-pointer"
                >
                  Cancel
                </button>
                <button
                  onClick={() => fileInputRef.current?.click()}
                  className="px-4 py-2 text-white rounded hover:opacity-80 cursor-pointer bg-brand"
                >
                  Select File
                </button>
              </div>
            </div>
          </div>
        )}
 
        {/* Options Modal */}
        {showOptionsModal && selectedDoc && (
          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" onClick={closeOptionsModal}>
            <div className="bg-white rounded-lg p-6 max-w-md w-full mx-4" onClick={(e) => e.stopPropagation()}>
              <div className="flex justify-between items-center mb-4">
                <h2 className="text-xl font-bold">Document Options</h2>
                <button onClick={closeOptionsModal} className="text-2xl hover:text-brand cursor-pointer">&times;</button>
              </div>
              <div className="space-y-4">
                {selectedDoc.DOCU?.[0]?.InvoiceNumber && (
                  <div>
                    <span className="font-semibold">Invoice: </span>
                    <span>{selectedDoc.DOCU[0].InvoiceNumber}</span>
                  </div>
                )}
                <div className="border-t pt-4 space-y-3">
                  <div className="flex gap-3">
                    <button
                      onClick={handleRejectDocument}
                      className="flex-1 px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 cursor-pointer"
                    >
                      Reject Document
                    </button>
                    <p className="flex-1 text-sm text-muted">
                      Reject this document. It will not be processed any further
                    </p>
                  </div>
                  <div className="flex gap-3">
                    <button
                      onClick={handleRescanDocument}
                      className="flex-1 px-4 py-2 border border-border rounded hover:bg-gray-100 cursor-pointer"
                    >
                      Rescan Document
                    </button>
                    <p className="flex-1 text-sm text-muted">
                      Rescan this document. The document will be reset as if you had just now uploaded it. You may be charged again.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}
 
        {/* Uploading Overlay */}
        {uploading && (
          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
            <div className="bg-white rounded-lg p-6">
              <div className="flex items-center gap-3">
                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-brand"></div>
                <p className="font-semibold">Processing... Please Wait</p>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}