diff --git a/.github/workflows/ci-cd.yml b/.github/workflows/ci-cd.yml index 9aa82d3..5579b58 100644 --- a/.github/workflows/ci-cd.yml +++ b/.github/workflows/ci-cd.yml @@ -1,6 +1,7 @@ name: InvoiceFlow CI/CD Pipeline on: + workflow_dispatch: push: branches: [ main, develop ] pull_request: @@ -17,22 +18,24 @@ jobs: steps: - name: Checkout code uses: actions/checkout@v4 + with: + ref: ${{ github.event.pull_request.head.sha || github.sha }} - name: Setup Terraform uses: hashicorp/setup-terraform@v3 with: - terraform_version: 1.6.0 + terraform_version: 1.15.9 - name: Terraform Format Check run: | - find infra/ -name "*.tf" -exec terraform fmt -check=true {} \; + terraform fmt -check -recursive infra/ - name: Terraform Validation run: | for env in dev staging prod; do echo "Validating $env environment..." cd infra/environments/$env - terraform init -backend=false + terraform init -backend=false -input=false terraform validate cd ../../.. done @@ -47,11 +50,18 @@ jobs: with: directory: infra/ framework: terraform + skip_download: true + skip_results_upload: true + download_external_modules: false # Security scanning security-scan: name: Security Scan runs-on: ubuntu-latest + permissions: + contents: read + security-events: write + actions: read steps: - name: Checkout code uses: actions/checkout@v4 @@ -65,7 +75,7 @@ jobs: output: 'trivy-results.sarif' - name: Upload Trivy scan results - uses: github/codeql-action/upload-sarif@v2 + uses: github/codeql-action/upload-sarif@v3 with: sarif_file: 'trivy-results.sarif' @@ -76,87 +86,27 @@ jobs: needs: [auth-service-tests, match-service-tests] timeout-minutes: 20 steps: - - name: Checkout code - uses: actions/checkout@v4 - - - name: Set up Docker Buildx - uses: docker/setup-buildx-action@v3 - - - name: Set up Python - uses: actions/setup-python@v4 + - uses: actions/checkout@v4 with: - python-version: '3.11' - - - name: Install e2e test dependencies - run: | - cd services/e2e - pip install -r requirements.txt - - - name: Build service images - run: | - # Build images for all services - if [ -d "services/ingest" ]; then - docker build -t invoiceflow/ingest:e2e services/ingest/ - fi - if [ -d "services/extract" ]; then - docker build -t invoiceflow/extract:e2e services/extract/ - fi - if [ -d "services/match" ]; then - docker build -t invoiceflow/match:e2e services/match/ - fi - - - name: Start services with docker-compose - run: | - docker-compose -f docker-compose.e2e.yml up -d - - # Wait for services to be healthy - timeout=120 - elapsed=0 - - while [ $elapsed -lt $timeout ]; do - if docker-compose -f docker-compose.e2e.yml ps | grep -q "healthy"; then - ingest_health=$(docker inspect invoiceflow-ingest-e2e --format='{{.State.Health.Status}}' 2>/dev/null || echo "unknown") - extract_health=$(docker inspect invoiceflow-extract-e2e --format='{{.State.Health.Status}}' 2>/dev/null || echo "unknown") - match_health=$(docker inspect invoiceflow-match-e2e --format='{{.State.Health.Status}}' 2>/dev/null || echo "unknown") - - if [ "$ingest_health" = "healthy" ] && [ "$extract_health" = "healthy" ] && [ "$match_health" = "healthy" ]; then - echo "All services are healthy" - break - fi - fi - - echo "Waiting for services to become healthy... ($elapsed/$timeout)" - sleep 10 - elapsed=$((elapsed + 10)) - done - - if [ $elapsed -ge $timeout ]; then - echo "Services failed to become healthy" - docker-compose -f docker-compose.e2e.yml ps - docker-compose -f docker-compose.e2e.yml logs - exit 1 - fi - - - name: Run end-to-end tests - timeout-minutes: 5 - run: | - cd services/e2e - python -m pytest test_full_pipeline.py -v --timeout=300 - - - name: Upload test results - uses: actions/upload-artifact@v3 - if: always() + ref: ${{ github.event.pull_request.head.sha || github.sha }} + - uses: actions/setup-python@v5 with: - name: e2e-test-results - path: | - services/e2e/htmlcov/ - services/e2e/coverage.xml - - - name: Cleanup services - if: always() - run: | - docker-compose -f docker-compose.e2e.yml down --remove-orphans - docker-compose -f docker-compose.e2e.yml rm -f + python-version: '3.11' + - run: pip install -r services/pipeline/requirements.txt + - run: python -m pytest tests/pipeline tests/legacy/test_document_contract.py -q + - run: docker compose -f docker-compose.e2e.yml up -d postgres rabbitmq localstack --wait --wait-timeout 180 + - run: python scripts/check_legacy_storage.py --bootstrap + - run: docker compose -f docker-compose.e2e.yml up -d --build --wait --wait-timeout 240 + - run: python -m pytest services/e2e/test_full_pipeline.py -v + - if: always() + run: docker compose -f docker-compose.e2e.yml logs --no-color | tee legacy-provider-e2e.log + - if: always() + uses: actions/upload-artifact@v4 + with: + name: legacy-provider-e2e + path: legacy-provider-e2e.log + - if: always() + run: docker compose -f docker-compose.e2e.yml down --remove-orphans # Auth Service Testing auth-service-tests: @@ -199,6 +149,7 @@ jobs: cd services/auth python -m pip install --upgrade pip pip install -r requirements.txt + pip install flake8 mypy pytest-cov - name: Lint Python code run: | @@ -220,6 +171,15 @@ jobs: cd services/auth python -m pytest tests/ -v --cov=app --cov-report=xml --cov-report=term-missing + - name: Real PostgreSQL auth HTTP roundtrip + env: + DATABASE_URL: postgresql://testuser:testpassword@localhost:5432/testdb + JWT_SECRET: test-secret-key-that-is-long-enough-for-testing + ENVIRONMENT: testing + run: | + cd services/auth + python scripts/check_native_auth.py + - name: Upload auth service coverage uses: codecov/codecov-action@v3 with: @@ -277,6 +237,7 @@ jobs: run: | cd services/match pip install -r requirements.txt + pip install flake8 black isort "mypy==1.11.2" - name: Lint match service code run: | @@ -355,175 +316,10 @@ jobs: # E2E Testing e2e-tests: name: End-to-End Tests - runs-on: ubuntu-latest needs: [auth-service-tests, frontend-tests] - services: - postgres: - image: postgres:15 - env: - POSTGRES_PASSWORD: testpassword - POSTGRES_USER: testuser - POSTGRES_DB: testdb - options: >- - --health-cmd pg_isready - --health-interval 10s - --health-timeout 5s - --health-retries 5 - ports: - - 5432:5432 - - steps: - - name: Checkout code - uses: actions/checkout@v4 - - - name: Setup Node.js - uses: actions/setup-node@v4 - with: - node-version: '18' - cache: 'npm' - cache-dependency-path: frontend/package-lock.json - - - name: Set up Python - uses: actions/setup-python@v4 - with: - python-version: '3.11' - - - name: Install Python dependencies - run: | - cd services/auth - pip install -r requirements.txt - - - name: Install frontend dependencies - run: | - cd frontend - npm ci - - - name: Install Playwright - run: | - cd frontend - npx playwright install --with-deps - - - name: Start auth service - env: - DATABASE_URL: postgresql://testuser:testpassword@localhost:5432/testdb - JWT_SECRET: test-secret-key-that-is-long-enough-for-testing - ENVIRONMENT: testing - run: | - cd services/auth - python -m uvicorn app.main:app --host 0.0.0.0 --port 8000 & - sleep 10 - - - name: Start frontend - env: - VITE_AUTH_SERVICE_URL: http://localhost:8000 - run: | - cd frontend - npm run build - npm run preview --port 3000 & - sleep 10 - - - name: Run E2E tests - run: | - cd frontend - npm run test:e2e - - - name: Upload E2E test results - uses: actions/upload-artifact@v3 - if: always() - with: - name: playwright-report - path: frontend/playwright-report/ + uses: ./.github/workflows/durable-pipeline.yml # End-to-End Pipeline Tests - e2e-pipeline: - name: End-to-End Pipeline Tests - runs-on: ubuntu-latest - needs: [auth-service-tests, match-service-tests] - timeout-minutes: 20 - steps: - - name: Checkout code - uses: actions/checkout@v4 - - - name: Set up Docker Buildx - uses: docker/setup-buildx-action@v3 - - - name: Set up Python - uses: actions/setup-python@v4 - with: - python-version: '3.11' - - - name: Install e2e test dependencies - run: | - cd services/e2e - pip install -r requirements.txt - - - name: Build service images - run: | - # Build images for all services - if [ -d "services/ingest" ]; then - docker build -t invoiceflow/ingest:e2e services/ingest/ - fi - if [ -d "services/extract" ]; then - docker build -t invoiceflow/extract:e2e services/extract/ - fi - if [ -d "services/match" ]; then - docker build -t invoiceflow/match:e2e services/match/ - fi - - - name: Start services with docker-compose - run: | - docker-compose -f docker-compose.e2e.yml up -d - - # Wait for services to be healthy - timeout=120 - elapsed=0 - - while [ $elapsed -lt $timeout ]; do - if docker-compose -f docker-compose.e2e.yml ps | grep -q "healthy"; then - ingest_health=$(docker inspect invoiceflow-ingest-e2e --format='{{.State.Health.Status}}' 2>/dev/null || echo "unknown") - extract_health=$(docker inspect invoiceflow-extract-e2e --format='{{.State.Health.Status}}' 2>/dev/null || echo "unknown") - match_health=$(docker inspect invoiceflow-match-e2e --format='{{.State.Health.Status}}' 2>/dev/null || echo "unknown") - - if [ "$ingest_health" = "healthy" ] && [ "$extract_health" = "healthy" ] && [ "$match_health" = "healthy" ]; then - echo "All services are healthy" - break - fi - fi - - echo "Waiting for services to become healthy... ($elapsed/$timeout)" - sleep 10 - elapsed=$((elapsed + 10)) - done - - if [ $elapsed -ge $timeout ]; then - echo "Services failed to become healthy" - docker-compose -f docker-compose.e2e.yml ps - docker-compose -f docker-compose.e2e.yml logs - exit 1 - fi - - - name: Run end-to-end tests - timeout-minutes: 5 - run: | - cd services/e2e - python -m pytest test_full_pipeline.py -v --timeout=300 - - - name: Upload test results - uses: actions/upload-artifact@v3 - if: always() - with: - name: e2e-test-results - path: | - services/e2e/htmlcov/ - services/e2e/coverage.xml - - - name: Cleanup services - if: always() - run: | - docker-compose -f docker-compose.e2e.yml down --remove-orphans - docker-compose -f docker-compose.e2e.yml rm -f - - # Build and push Docker images build-images: name: Build Docker Images runs-on: ubuntu-latest diff --git a/.github/workflows/durable-pipeline.yml b/.github/workflows/durable-pipeline.yml new file mode 100644 index 0000000..f9a8d61 --- /dev/null +++ b/.github/workflows/durable-pipeline.yml @@ -0,0 +1,40 @@ +name: Durable PDF pipeline +on: [push, pull_request, workflow_call] +jobs: + pdf-queue-postgres-e2e: + runs-on: ubuntu-latest + timeout-minutes: 20 + steps: + - uses: actions/checkout@v4 + with: + ref: ${{ github.event.pull_request.head.sha || github.sha }} + - uses: actions/setup-python@v5 + with: + python-version: '3.11' + - run: pip install -r services/pipeline/requirements.txt + - run: python -m pytest tests/pipeline tests/legacy/test_document_contract.py -q + - run: docker compose -f docker-compose.pipeline.yml up -d --build --wait --wait-timeout 240 + - run: python scripts/check_pipeline_http.py + - uses: actions/setup-node@v4 + with: + node-version: '22' + - run: npm ci + working-directory: frontend + - run: npm run lint && npm run format:check && npm run build && npx vitest run --threads false && npm run test:exception:coverage -- --threads false + working-directory: frontend + env: + VITE_AUTH_SERVICE_URL: http://127.0.0.1:8003 + VITE_EXCEPTION_API_URL: http://127.0.0.1:8003 + - run: npx playwright install --with-deps chromium + working-directory: frontend + - run: node scripts/check-browser.cjs + working-directory: frontend + - if: always() + run: docker compose -f docker-compose.pipeline.yml logs --no-color | tee pipeline-e2e.log + - if: always() + uses: actions/upload-artifact@v4 + with: + name: real-pipeline-log + path: pipeline-e2e.log + - if: always() + run: docker compose -f docker-compose.pipeline.yml down diff --git a/.github/workflows/exception-service.yml b/.github/workflows/exception-service.yml index e34bd69..41b9efd 100644 --- a/.github/workflows/exception-service.yml +++ b/.github/workflows/exception-service.yml @@ -1,6 +1,7 @@ name: Exception Service CI/CD on: + workflow_dispatch: push: branches: [ main, develop ] paths: @@ -55,6 +56,8 @@ jobs: steps: - name: Checkout code uses: actions/checkout@v4 + with: + ref: ${{ github.event.pull_request.head.sha || github.sha }} - name: Set up Python uses: actions/setup-python@v4 @@ -74,7 +77,7 @@ jobs: run: | python -m pip install --upgrade pip pip install -r requirements.txt - pip install flake8 black mypy + pip install flake8 black mypy "pypdf==6.19.0" - name: Lint with flake8 working-directory: services/exception @@ -90,6 +93,10 @@ jobs: working-directory: services/exception run: mypy app/ --ignore-missing-imports + - name: Run context, settings and document regressions + working-directory: services/exception + run: python -m pytest ../../tests/legacy -q + - name: Run unit tests working-directory: services/exception env: @@ -106,6 +113,12 @@ jobs: run: | pytest tests/integration/ -v --timeout=300 + - name: Exercise migrations against actual PostgreSQL + working-directory: services/exception + env: + DATABASE_URL: postgresql+asyncpg://postgres:postgres@localhost:5432/test_db + run: python ../../scripts/check_exception_migrations.py + - name: Upload coverage to Codecov if: success() uses: codecov/codecov-action@v3 @@ -122,6 +135,8 @@ jobs: steps: - name: Checkout code uses: actions/checkout@v4 + with: + ref: ${{ github.event.pull_request.head.sha || github.sha }} - name: Set up Node.js uses: actions/setup-node@v4 @@ -147,7 +162,7 @@ jobs: - name: Run unit tests working-directory: frontend run: | - npm test -- --coverage --watchAll=false --testPathPattern="exception" --coverageThreshold='{"global":{"branches":95,"functions":95,"lines":95,"statements":95}}' + npm run test:exception:coverage - name: Build for production working-directory: frontend @@ -161,131 +176,27 @@ jobs: flags: frontend name: exception-service-frontend - # E2E Tests + # Execute the real authenticated PDF/database/broker/browser workflow. + # The former command referred to browser tests that were never committed. e2e-tests: name: E2E Tests - runs-on: ubuntu-latest needs: [backend-tests, frontend-tests] - - services: - postgres: - image: postgres:15 - env: - POSTGRES_PASSWORD: postgres - POSTGRES_DB: test_db - options: >- - --health-cmd pg_isready - --health-interval 10s - --health-timeout 5s - --health-retries 5 - ports: - - 5432:5432 - - rabbitmq: - image: rabbitmq:3-management - env: - RABBITMQ_DEFAULT_USER: guest - RABBITMQ_DEFAULT_PASS: guest - options: >- - --health-cmd "rabbitmq-diagnostics -q ping" - --health-interval 30s - --health-timeout 30s - --health-retries 3 - ports: - - 5672:5672 - - steps: - - name: Checkout code - uses: actions/checkout@v4 - - - name: Set up Python - uses: actions/setup-python@v4 - with: - python-version: ${{ env.PYTHON_VERSION }} - - - name: Set up Node.js - uses: actions/setup-node@v4 - with: - node-version: ${{ env.NODE_VERSION }} - cache: 'npm' - cache-dependency-path: frontend/package-lock.json - - - name: Install backend dependencies - working-directory: services/exception - run: | - python -m pip install --upgrade pip - pip install -r requirements.txt - - - name: Install frontend dependencies - working-directory: frontend - run: npm ci - - - name: Install Playwright browsers - working-directory: frontend - run: npx playwright install --with-deps - - - name: Set up database - working-directory: services/exception - env: - DATABASE_URL: postgresql+asyncpg://postgres:postgres@localhost:5432/test_db - run: | - alembic upgrade head - - - name: Start backend service - working-directory: services/exception - env: - DATABASE_URL: postgresql+asyncpg://postgres:postgres@localhost:5432/test_db - RABBITMQ_URL: amqp://guest:guest@localhost:5672/ - ENVIRONMENT: test - run: | - uvicorn app.main:app --host 0.0.0.0 --port 8007 & - sleep 10 - - - name: Start frontend - working-directory: frontend - env: - VITE_EXCEPTION_API_URL: http://localhost:8007 - run: | - npm run dev & - sleep 10 - - - name: Wait for services - run: | - timeout 60 bash -c 'until curl -f http://localhost:8007/health/live; do sleep 2; done' - timeout 60 bash -c 'until curl -f http://localhost:5173; do sleep 2; done' - - - name: Run E2E tests - working-directory: frontend - env: - PLAYWRIGHT_BASE_URL: http://localhost:5173 - API_BASE_URL: http://localhost:8007 - run: | - npx playwright test tests/e2e/exception/ --reporter=html - - - name: Upload E2E test results - uses: actions/upload-artifact@v3 - if: failure() - with: - name: e2e-test-results - path: frontend/test-results/ - retention-days: 7 - - - name: Upload E2E test report - uses: actions/upload-artifact@v3 - if: always() - with: - name: e2e-test-report - path: frontend/playwright-report/ - retention-days: 7 + uses: ./.github/workflows/durable-pipeline.yml # Security Scan security-scan: name: Security Scan runs-on: ubuntu-latest + permissions: + contents: read + security-events: write + actions: read steps: - name: Checkout code uses: actions/checkout@v4 + with: + ref: ${{ github.event.pull_request.head.sha || github.sha }} - name: Run Trivy vulnerability scanner uses: aquasecurity/trivy-action@master @@ -296,7 +207,7 @@ jobs: output: 'trivy-results.sarif' - name: Upload Trivy scan results to GitHub Security tab - uses: github/codeql-action/upload-sarif@v2 + uses: github/codeql-action/upload-sarif@v3 if: always() with: sarif_file: 'trivy-results.sarif' @@ -308,7 +219,7 @@ jobs: bandit -r app/ -f json -o bandit-report.json || true - name: Upload Bandit results - uses: actions/upload-artifact@v3 + uses: actions/upload-artifact@v4 if: always() with: name: bandit-security-report @@ -324,6 +235,8 @@ jobs: steps: - name: Checkout code uses: actions/checkout@v4 + with: + ref: ${{ github.event.pull_request.head.sha || github.sha }} - name: Set up Docker Buildx uses: docker/setup-buildx-action@v2 @@ -367,6 +280,8 @@ jobs: steps: - name: Checkout code uses: actions/checkout@v4 + with: + ref: ${{ github.event.pull_request.head.sha || github.sha }} - name: Set up kubectl uses: azure/setup-kubectl@v3 @@ -434,4 +349,4 @@ jobs: status: failure text: "❌ Exception Service deployment failed. Check the logs for details." env: - SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }} \ No newline at end of file + SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }} diff --git a/.github/workflows/settings-startup.yml b/.github/workflows/settings-startup.yml index aaa9a53..7d3a6a7 100644 --- a/.github/workflows/settings-startup.yml +++ b/.github/workflows/settings-startup.yml @@ -7,6 +7,8 @@ jobs: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 + with: + ref: ${{ github.event.pull_request.head.sha || github.sha }} - uses: actions/setup-python@v5 with: python-version: '3.11' diff --git a/.github/workflows/terraform.yml b/.github/workflows/terraform.yml index b2cc7e3..f8f52ca 100644 --- a/.github/workflows/terraform.yml +++ b/.github/workflows/terraform.yml @@ -17,7 +17,7 @@ on: - '.github/workflows/terraform.yml' env: - TF_VERSION: '1.5.0' + TF_VERSION: '1.15.9' AWS_REGION: 'us-west-2' permissions: @@ -37,6 +37,8 @@ jobs: steps: - name: Checkout uses: actions/checkout@v4 + with: + ref: ${{ github.event.pull_request.head.sha || github.sha }} - name: Setup Terraform uses: hashicorp/setup-terraform@v3 @@ -60,10 +62,16 @@ jobs: name: 'Security Scan' runs-on: ubuntu-latest needs: terraform-validate + permissions: + contents: read + security-events: write + actions: read steps: - name: Checkout uses: actions/checkout@v4 + with: + ref: ${{ github.event.pull_request.head.sha || github.sha }} - name: Setup Terraform uses: hashicorp/setup-terraform@v3 @@ -76,7 +84,9 @@ jobs: with: directory: infra/ framework: terraform - soft_fail: true + skip_download: true + skip_results_upload: true + download_external_modules: false output_format: sarif output_file_path: checkov-results.sarif @@ -90,13 +100,30 @@ jobs: uses: aquasecurity/tfsec-action@v1.0.3 with: working_directory: infra/ - soft_fail: true + + terraform-cloud-readiness: + name: 'AWS Plan Readiness' + runs-on: ubuntu-latest + outputs: + configured: ${{ steps.readiness.outputs.configured }} + steps: + - name: Check configured plan identity + id: readiness + env: + INVOICE_PLAN_ROLE_ARN: ${{ secrets.AWS_ROLE_ARN }} + run: | + if [ -n "$INVOICE_PLAN_ROLE_ARN" ]; then + echo "configured=true" >> "$GITHUB_OUTPUT" + else + echo "configured=false" >> "$GITHUB_OUTPUT" + echo "::notice::AWS plan NOT_EXECUTED: configure an actual AWS_ROLE_ARN, remote state and required deployment inputs. Source validation runs independently." + fi terraform-plan: name: 'Terraform Plan' runs-on: ubuntu-latest - needs: [terraform-validate, terraform-security] - if: github.event_name == 'pull_request' + needs: [terraform-validate, terraform-security, terraform-cloud-readiness] + if: github.event_name == 'pull_request' && needs.terraform-cloud-readiness.outputs.configured == 'true' strategy: matrix: @@ -127,7 +154,7 @@ jobs: id: plan run: | cd infra/environments/${{ matrix.environment }} - terraform plan -no-color -out=tfplan + terraform plan -input=false -no-color -out=tfplan continue-on-error: true - name: Update Pull Request diff --git a/README.md b/README.md index 74f4e89..77b3a66 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,47 @@ +## Runnable durable invoice workflow + +```bash +bash scripts/run_pipeline_demo.sh +``` + +Requires Docker Compose v2 and Python 3.11+. The canonical local stack uses actual +PostgreSQL and RabbitMQ with durable volumes, plus three API/worker roles. Uploads +are stored as actual PDF bytes and accepted work enters a transactional outbox. +Workers extract embedded text, match purchase orders using the existing 2% decimal +variance rule, and persist results. Outbox retries and idempotent workers preserve +work through broker outages and duplicate delivery. + +This local extractor reads real **text PDFs** using pypdf. It accepts labeled +`Vendor:`, `Invoice #:`, `Total Amount:`, `Currency:` and optional `PO Number:` +lines. Scanned, malformed, ambiguous, or missing-field documents fail explicitly; +this is a deterministic text extractor, not a validated OCR/LLM provider or a claim +of general invoice extraction accuracy. No paid provider calls are made. + +The ingest API at http://127.0.0.1:8003 provides: + +- `POST /api/v1/purchase-orders` with `po_number`, positive `amount`, `currency`. +- `POST /api/v1/ingest/upload` with multipart PDF `file` (max10MB). +- `GET /api/v1/ingest/status/{request_id}` and `/api/v1/ingest/stats` read real data. +- `POST /auth/register`, `/auth/login`, `/auth/logout`, `GET /auth/me`: actual local + registration/authentication with PBKDF2 hashes and persisted expiring sessions. +- Bearer-authenticated `/api/v1/review/queue`, `/api/v1/review/{id}`, + `/api/v1/review/{id}/document`, and POST `/{id}/approve` or `/{id}/reject`. + Reviewer identity comes from the session; duplicate decisions return409. + +The local stack's ports bind to loopback. It is a single-team local review lane; +public deployment needs tenancy, registration policy and request rate limits. +Frontend development: set `VITE_AUTH_SERVICE_URL` and `VITE_EXCEPTION_API_URL` to +`http://127.0.0.1:8003`, then run the frontend's normal Vite development command. + +`Durable PDF pipeline` CI executes actual HTTP→PDF→queue→Postgres tests, including +approval/rejection, authentication errors, missing/invalid documents, amount and +currency mismatches, duplicate delivery, stopped workers, stopped broker, and +application/database restart persistence. Source revision and CI receipts gate +recording. The older cloud/service scaffold instructions below describe separate +integrations and do not establish live OCR/LLM, S3, billing or ERP readiness. + +--- + # Invoice Processing System A production-grade microservices architecture for automated invoice processing using FastAPI, PostgreSQL, OpenSearch, and RabbitMQ. @@ -1205,4 +1249,38 @@ This project is licensed under the MIT License - see the [LICENSE](LICENSE) file --- -Built with ❤️ by the InvoiceFlow team \ No newline at end of file +Built with ❤️ by the InvoiceFlow team + +## Frontend review workflow + +```sh +cd frontend +npm ci +npm run lint +npm test -- --run --threads=false +npm run build +npm run dev +``` + +The signed-in dashboard links to `/exception`, where the existing review service +supplies the queue and invoice details. Queue pagination, accessible filtering, +keyboard sorting, and approve/reject forms are available. Set +`VITE_EXCEPTION_API_URL` to the exception service URL (default +`http://localhost:8007`) and run the authentication and exception services before +using the frontend. The frontend does not supply synthetic invoices when the +service is unavailable; it shows a retryable error. + +The component suite verifies queue interactions and pagination. These tests and +a production build do not establish live OCR/model accuracy or the full deployed +microservice pipeline. Record a demo only after exercising authentication → real +queue → invoice review → persisted approval/rejection against the intended stack. + +## CI check status + +Frontend formatting, lint, 18 tests, and build pass locally. The CI coverage runner +uses Vitest options rather than Jest flags and retains the exception module's +95% coverage requirement. Current exception coverage fails that requirement: +22.84% lines/statements, 50% functions, 74.19% branches. This is a real test gap, +not evidence that the full workflow is verified. Backend fatal-error lint passes, +but the existing full style/complexity check reports 208 findings and Black would +reformat 15 backend files. These gates remain enabled. diff --git a/docker-compose.e2e.yml b/docker-compose.e2e.yml index 47e188c..ad0886a 100644 --- a/docker-compose.e2e.yml +++ b/docker-compose.e2e.yml @@ -1,193 +1,116 @@ -version: '3.8' - +# Same canonical runtime, with an explicit local S3 mirror. services: - # Infrastructure Services postgres: - image: postgres:15 - container_name: invoiceflow-postgres-e2e + image: postgres:16 environment: POSTGRES_DB: invoiceflow_test POSTGRES_USER: testuser POSTGRES_PASSWORD: testpassword ports: - - "5432:5432" + - 127.0.0.1:5432:5432 volumes: - - postgres_data:/var/lib/postgresql/data + - pipeline_postgres:/var/lib/postgresql/data healthcheck: - test: ["CMD-SHELL", "pg_isready -U testuser -d invoiceflow_test"] - interval: 10s + test: + - CMD-SHELL + - pg_isready -U testuser -d invoiceflow_test + interval: 2s timeout: 5s - retries: 5 - + retries: 30 rabbitmq: - image: rabbitmq:3-management - container_name: invoiceflow-rabbitmq-e2e + image: rabbitmq:3.13-management environment: - RABBITMQ_DEFAULT_USER: guest - RABBITMQ_DEFAULT_PASS: guest + RABBITMQ_DEFAULT_USER: testuser + RABBITMQ_DEFAULT_PASS: testpassword ports: - - "5672:5672" - - "15672:15672" + - 127.0.0.1:5672:5672 volumes: - - rabbitmq_data:/var/lib/rabbitmq + - pipeline_rabbitmq:/var/lib/rabbitmq healthcheck: - test: ["CMD", "rabbitmq-diagnostics", "-q", "ping"] - interval: 30s - timeout: 30s - retries: 3 - - localstack: - image: localstack/localstack:latest - container_name: invoiceflow-s3-e2e - environment: - SERVICES: s3 - DEBUG: 1 - DATA_DIR: /tmp/localstack/data - DOCKER_HOST: unix:///var/run/docker.sock - ports: - - "4566:4566" - volumes: - - localstack_data:/tmp/localstack - - /var/run/docker.sock:/var/run/docker.sock - healthcheck: - test: ["CMD", "curl", "-f", "http://localhost:4566/_localstack/health"] - interval: 10s - timeout: 5s - retries: 3 - - # Application Services + test: + - CMD-SHELL + - rabbitmq-diagnostics -q check_running && rabbitmq-diagnostics -q check_port_connectivity + interval: 5s + timeout: 10s + retries: 30 ingest: - build: - context: ./services/ingest - dockerfile: Dockerfile - image: invoiceflow/ingest:e2e - container_name: invoiceflow-ingest-e2e + build: &id001 + context: . + dockerfile: services/pipeline/Dockerfile environment: - DATABASE_URL: postgresql+asyncpg://testuser:testpassword@postgres:5432/invoiceflow_test - RABBITMQ_URL: amqp://guest:guest@rabbitmq:5672/ + DATABASE_URL: postgresql://testuser:testpassword@postgres:5432/invoiceflow_test + RABBITMQ_URL: amqp://testuser:testpassword@rabbitmq:5672/ + PIPELINE_ROLE: ingest + EXTRACTION_MODE: local_text S3_ENDPOINT_URL: http://localstack:4566 - AWS_ACCESS_KEY_ID: testing - AWS_SECRET_ACCESS_KEY: testing - AWS_DEFAULT_REGION: us-east-1 + AWS_ACCESS_KEY_ID: test + AWS_SECRET_ACCESS_KEY: test S3_BUCKET_INVOICES: invoices - LOG_LEVEL: DEBUG - PORT: 8003 + S3_BUCKET_PROCESSED: processed-invoices ports: - - "8003:8003" - depends_on: + - 127.0.0.1:8003:8000 + depends_on: &id002 postgres: condition: service_healthy rabbitmq: condition: service_healthy - localstack: - condition: service_healthy - restart: unless-stopped - healthcheck: - test: ["CMD", "curl", "-f", "http://localhost:8003/healthz"] - interval: 30s - timeout: 10s - retries: 3 - start_period: 40s - + healthcheck: &id003 + test: + - CMD + - python + - -c + - import urllib.request; urllib.request.urlopen("http://localhost:8000/health/ready") + interval: 3s + timeout: 5s + retries: 30 extract: - build: - context: ./services/extract - dockerfile: Dockerfile - image: invoiceflow/extract:e2e - container_name: invoiceflow-extract-e2e + build: *id001 environment: - DATABASE_URL: postgresql+asyncpg://testuser:testpassword@postgres:5432/invoiceflow_test - RABBITMQ_URL: amqp://guest:guest@rabbitmq:5672/ + DATABASE_URL: postgresql://testuser:testpassword@postgres:5432/invoiceflow_test + RABBITMQ_URL: amqp://testuser:testpassword@rabbitmq:5672/ + PIPELINE_ROLE: extract + EXTRACTION_MODE: local_text S3_ENDPOINT_URL: http://localstack:4566 - AWS_ACCESS_KEY_ID: testing - AWS_SECRET_ACCESS_KEY: testing - AWS_DEFAULT_REGION: us-east-1 + AWS_ACCESS_KEY_ID: test + AWS_SECRET_ACCESS_KEY: test S3_BUCKET_INVOICES: invoices S3_BUCKET_PROCESSED: processed-invoices - LOG_LEVEL: DEBUG - PORT: 8004 - # Mock AI services for testing - OPENAI_API_KEY: test-key - OPENAI_MODEL: gpt-3.5-turbo - ENABLE_OCR: "false" # Disable OCR for faster testing ports: - - "8004:8004" - depends_on: - postgres: - condition: service_healthy - rabbitmq: - condition: service_healthy - localstack: - condition: service_healthy - ingest: - condition: service_healthy - restart: unless-stopped - healthcheck: - test: ["CMD", "curl", "-f", "http://localhost:8004/health/live"] - interval: 30s - timeout: 10s - retries: 3 - start_period: 40s - + - 127.0.0.1:8004:8000 + depends_on: *id002 + healthcheck: *id003 match: - build: - context: ./services/match - dockerfile: Dockerfile - image: invoiceflow/match:e2e - container_name: invoiceflow-match-e2e + build: *id001 environment: - DATABASE_URL: postgresql+asyncpg://testuser:testpassword@postgres:5432/invoiceflow_test - RABBITMQ_URL: amqp://guest:guest@rabbitmq:5672/ - MATCH_AMOUNT_TOLERANCE: "0.02" - LOG_LEVEL: DEBUG - PORT: 8005 + DATABASE_URL: postgresql://testuser:testpassword@postgres:5432/invoiceflow_test + RABBITMQ_URL: amqp://testuser:testpassword@rabbitmq:5672/ + PIPELINE_ROLE: match + EXTRACTION_MODE: local_text + S3_ENDPOINT_URL: http://localstack:4566 + AWS_ACCESS_KEY_ID: test + AWS_SECRET_ACCESS_KEY: test + S3_BUCKET_INVOICES: invoices + S3_BUCKET_PROCESSED: processed-invoices ports: - - "8005:8005" - depends_on: - postgres: - condition: service_healthy - rabbitmq: - condition: service_healthy - extract: - condition: service_healthy - restart: unless-stopped + - 127.0.0.1:8005:8000 + depends_on: *id002 + healthcheck: *id003 + localstack: + image: localstack/localstack:4.13.1 + environment: + SERVICES: s3 + AWS_DEFAULT_REGION: us-east-1 + ports: + - 127.0.0.1:4566:4566 healthcheck: - test: ["CMD", "curl", "-f", "http://localhost:8005/health/live"] - interval: 30s - timeout: 10s - retries: 3 - start_period: 40s - - # Wait for all services - wait-for-services: - image: busybox:latest - container_name: invoiceflow-wait-e2e - depends_on: - ingest: - condition: service_healthy - extract: - condition: service_healthy - match: - condition: service_healthy - command: | - sh -c ' - echo "All services are ready for testing!" - echo "Ingest: http://localhost:8003" - echo "Extract: http://localhost:8004" - echo "Match: http://localhost:8005" - echo "PostgreSQL: postgres://testuser:testpassword@localhost:5432/invoiceflow_test" - echo "RabbitMQ: amqp://guest:guest@localhost:5672/" - echo "S3 (LocalStack): http://localhost:4566" - ' - + test: + - CMD + - awslocal + - s3 + - ls + interval: 3s + timeout: 5s + retries: 30 volumes: - postgres_data: - driver: local - rabbitmq_data: - driver: local - localstack_data: - driver: local - -networks: - default: - driver: bridge \ No newline at end of file + pipeline_postgres: null + pipeline_rabbitmq: null diff --git a/docker-compose.pipeline.yml b/docker-compose.pipeline.yml new file mode 100644 index 0000000..a395959 --- /dev/null +++ b/docker-compose.pipeline.yml @@ -0,0 +1,62 @@ +services: + postgres: + image: postgres:16 + environment: + POSTGRES_DB: invoiceflow_test + POSTGRES_USER: testuser + POSTGRES_PASSWORD: testpassword + ports: ['127.0.0.1:5432:5432'] + volumes: [pipeline_postgres:/var/lib/postgresql/data] + healthcheck: + test: ['CMD-SHELL', 'pg_isready -U testuser -d invoiceflow_test'] + interval: 2s + timeout: 5s + retries: 30 + rabbitmq: + image: rabbitmq:3.13-management + environment: + RABBITMQ_DEFAULT_USER: testuser + RABBITMQ_DEFAULT_PASS: testpassword + ports: ['127.0.0.1:5672:5672'] + volumes: [pipeline_rabbitmq:/var/lib/rabbitmq] + healthcheck: + test: ['CMD-SHELL', 'rabbitmq-diagnostics -q check_running && rabbitmq-diagnostics -q check_port_connectivity'] + interval: 5s + timeout: 10s + retries: 30 + ingest: + build: &build + context: . + dockerfile: services/pipeline/Dockerfile + environment: &env + DATABASE_URL: postgresql://testuser:testpassword@postgres:5432/invoiceflow_test + RABBITMQ_URL: amqp://testuser:testpassword@rabbitmq:5672/ + PIPELINE_ROLE: ingest + ports: ['127.0.0.1:8003:8000'] + depends_on: &deps + postgres: {condition: service_healthy} + rabbitmq: {condition: service_healthy} + healthcheck: &health + test: ['CMD', 'python', '-c', 'import urllib.request; urllib.request.urlopen("http://localhost:8000/health/ready")'] + interval: 3s + timeout: 5s + retries: 30 + extract: + build: *build + environment: + <<: *env + PIPELINE_ROLE: extract + ports: ['127.0.0.1:8004:8000'] + depends_on: *deps + healthcheck: *health + match: + build: *build + environment: + <<: *env + PIPELINE_ROLE: match + ports: ['127.0.0.1:8005:8000'] + depends_on: *deps + healthcheck: *health +volumes: + pipeline_postgres: + pipeline_rabbitmq: diff --git a/docs/LOCAL_PIPELINE_MIGRATION.md b/docs/LOCAL_PIPELINE_MIGRATION.md new file mode 100644 index 0000000..e9c8b01 --- /dev/null +++ b/docs/LOCAL_PIPELINE_MIGRATION.md @@ -0,0 +1,15 @@ +# One authoritative local invoice pipeline + +The historical ingest/extract CLIs now serve the canonical `services.pipeline.runtime` application. Run them from their original directories (`python -m app.main`), or use `docker compose -f docker-compose.pipeline.yml up --build`. Ingest defaults to port 8003 and extract to 8004. Compose publishes ingest/extract/match at 8003/8004/8005. + +`EXTRACTION_MODE=local_text` is the supported document mode: fields come from embedded PDF text through the strict pypdf parser. OCR, Textract and LLM modes are explicitly rejected. This is not a claim of scanned-document accuracy or live AI integration. Multipart metadata cannot override document fields. + +Upload remains `POST /api/v1/ingest/upload` (202), status is `GET /api/v1/ingest/status/{request_id}` (404 for unknown IDs), stats reflect persisted rows, and `/healthz` aliases actual readiness. Liveness alone does not assert provider readiness. Browser registration/login/review/download use the local opaque-session issuer; the independently tested legacy Auth JWT issuer remains a separate service contract. + +The authoritative schema is the `pipeline_*` PostgreSQL tables. Prototype `ingestions`/`invoices_raw` tables are not automatically imported or treated as completed invoices. Preserve existing databases and migrate documents explicitly through upload; no prototype data is deleted. Extract and match workers use transactional, unique outbox stages and durable RabbitMQ queues. A matched invoice is `MATCHED` until RabbitMQ confirms the final `pipeline_complete` event; only then is it `COMPLETED`. Provider errors cannot be converted to successful completion. + +For local S3 byte storage, use `docker-compose.e2e.yml`: start postgres/rabbitmq/localstack, run `python scripts/check_legacy_storage.py --bootstrap`, then start all services with `--build --wait`. All three roles use the same PostgreSQL, broker and explicitly configured local S3 emulator. No Docker socket or AWS discovery is used. Source bytes are written and read back before upload acceptance; extracted JSON goes to a separate processed bucket. The upload API returns 503 and creates no invoice if source storage fails. + +S3 requires `S3_ENDPOINT_URL`, explicit `AWS_ACCESS_KEY_ID`/`AWS_SECRET_ACCESS_KEY`, `S3_BUCKET_INVOICES`, and `S3_BUCKET_PROCESSED`. Endpoint validation allows loopback/private emulator addresses and known Compose emulator names, and rejects public, link-local metadata, unspecified, multicast or reserved destinations. With no S3 configuration, durable PostgreSQL PDF storage remains the default. This local mirror is not live AWS integration or a public deployment contract. + +The E2E harness attaches to this one stack. It requires exact document-derived 995.00/PO auto-approval and 2500.00/no-PO review decisions, contradictory metadata immunity, original S3 byte equality, actual persisted rows and correlated terminal events. It also verifies malformed PDFs and a real missing-bucket failure. The former harness's blank PDFs, conditional decisions/events, independent Testcontainers providers and simulated upload/status/health have been retired. diff --git a/frontend/.eslintrc.cjs b/frontend/.eslintrc.cjs new file mode 100644 index 0000000..381d905 --- /dev/null +++ b/frontend/.eslintrc.cjs @@ -0,0 +1,14 @@ +module.exports = { + root: true, + env: { browser: true, es2020: true }, + parser: '@typescript-eslint/parser', + plugins: ['@typescript-eslint', 'react-hooks'], + extends: ['eslint:recommended', 'plugin:react-hooks/recommended'], + parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, + rules: { + 'no-unused-vars': 'off', + 'no-undef': 'off', + '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }], + }, + ignorePatterns: ['dist', 'node_modules'], +}; diff --git a/frontend/README.md b/frontend/README.md new file mode 100644 index 0000000..dd49bc1 --- /dev/null +++ b/frontend/README.md @@ -0,0 +1,29 @@ +# InvoiceFlow frontend + +Connected signup/login, protected dashboard, real PDF upload/status, exception queue/filter/sort, detail review, authenticated source PDF download, approval/rejection and logout. + +## Local pipeline + +From the repository root start `docker compose -f docker-compose.pipeline.yml up -d --build --wait`. Then: + +```sh +cd frontend +npm ci +VITE_AUTH_SERVICE_URL=http://127.0.0.1:8003 VITE_EXCEPTION_API_URL=http://127.0.0.1:8003 npm run dev -- --host 127.0.0.1 +``` + +Open http://127.0.0.1:3000, create an account (password at least 12 characters), and sign in. Upload a valid text PDF containing Vendor, Invoice, PO, Total and Currency labeled lines. The local parser has no OCR/AI provider. Missing or mismatched purchase orders enter review. Manual approval is distinct from rule-based auto-approval. The server uses authenticated session identity for audit records. + +## Verification + +```sh +npm run lint +VITE_AUTH_SERVICE_URL=http://127.0.0.1:8003 VITE_EXCEPTION_API_URL=http://127.0.0.1:8003 npm run build +npx vitest run --threads false +npx playwright install chromium +node scripts/check-browser.cjs +``` + +The default browser runner requires the real pipeline on port 8003. It creates synthetic users/invoices and proves signup, invalid-password rejection, login, upload, review, source PDF download, approval, reload, removal from queue, logout and route protection at desktop/mobile widths. It never seeds an auth token to bypass login. `--fixture` intercepts HTTP contracts only for an isolated UI check and prints `UI_CONTRACT_FIXTURE`; that mode does not prove database/queue/extraction and is not used by durable-pipeline CI. Set CHROMIUM_PATH and PLAYWRIGHT_CORE_PATH for externally supplied browser runtimes. Screenshots go to temporary `/tmp` paths. + +The exception coverage command enforces 95% for statements, lines, branches, and functions across `src/exception` runtime code. Types and tests are excluded; no runtime files are excluded. Run `npm run test:exception:coverage -- --threads false`. The behavior suite covers queue/loading/error/empty states, read-only completed reviews, approve/reject validation, cancellations, service and document failures, authenticated API headers, source-download cleanup, server audit identity, query-cache invalidation, pagination, date filters, and keyboard/pointer sorting. Current verified coverage: 100% statements/lines, 98.26% branches, 98.68% functions. Thresholds and collection scope remain unchanged. The durable real-pipeline CI job enforces this gate before its actual browser lane. diff --git a/frontend/package-lock.json b/frontend/package-lock.json index d5592e9..6631b3b 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -8,9 +8,12 @@ "name": "invoiceflow-frontend", "version": "1.0.0", "dependencies": { + "@heroicons/react": "^2.2.0", + "@tanstack/react-query": "^5.104.2", "@types/mapbox-gl": "^2.7.18", "axios": "^1.6.0", "clsx": "^2.0.0", + "date-fns": "^3.6.0", "lucide-react": "^0.292.0", "mapbox-gl": "^2.15.0", "react": "^18.2.0", @@ -31,6 +34,7 @@ "@typescript-eslint/eslint-plugin": "^6.10.0", "@typescript-eslint/parser": "^6.10.0", "@vitejs/plugin-react": "^4.1.1", + "@vitest/coverage-v8": "^0.34.6", "@vitest/ui": "^0.34.6", "autoprefixer": "^10.4.16", "eslint": "^8.53.0", @@ -386,6 +390,13 @@ "node": ">=6.9.0" } }, + "node_modules/@bcoe/v8-coverage": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz", + "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==", + "dev": true, + "license": "MIT" + }, "node_modules/@bundled-es-modules/cookie": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/@bundled-es-modules/cookie/-/cookie-2.0.1.tgz", @@ -907,6 +918,15 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@heroicons/react": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.2.0.tgz", + "integrity": "sha512-LMcepvRaS9LYHJGsF0zzmgKCUim/X3N/DQKc4jepAXJ7l8QxJ1PmxJzqplF2Z3FE4PqBAIGyJAQ/w4B5dsqbtQ==", + "license": "MIT", + "peerDependencies": { + "react": ">= 16 || ^19.0.0-rc" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.13.0", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz", @@ -1150,6 +1170,16 @@ "url": "https://github.com/chalk/wrap-ansi?sponsor=1" } }, + "node_modules/@istanbuljs/schema": { + "version": "0.1.6", + "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.6.tgz", + "integrity": "sha512-+Sg6GCR/wy1oSmQDFq4LQDAhm3ETKnorxN+y5nbLULOR3P0c14f2Wurzj3/xqPXtasLFfHd5iRFQ7AJt4KH2cw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, "node_modules/@jest/schemas": { "version": "29.6.3", "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.3.tgz", @@ -1417,6 +1447,32 @@ "dev": true, "license": "MIT" }, + "node_modules/@tanstack/query-core": { + "version": "5.104.2", + "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.104.2.tgz", + "integrity": "sha512-/qbsxJK5c3Ve1aFIULWYNcT2jeRUAiD4HME6Eu2ZdpofHoVgAjpkQhLg5xHuOoBkTPQUJLfP7zOxy0qsBcqROA==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, + "node_modules/@tanstack/react-query": { + "version": "5.104.2", + "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.104.2.tgz", + "integrity": "sha512-xKmzWGhadbE5wGS/ZmXShRITnI9oItox5GO14KvFZco3+vhTAyXS1erYzJWdiY280zapAGJXFUL9nHgwP6SV/g==", + "license": "MIT", + "dependencies": { + "@tanstack/query-core": "5.104.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "react": "^18 || ^19" + } + }, "node_modules/@testing-library/dom": { "version": "10.4.0", "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz", @@ -1635,6 +1691,13 @@ "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==", "license": "MIT" }, + "node_modules/@types/istanbul-lib-coverage": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz", + "integrity": "sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/json-schema": { "version": "7.0.15", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz", @@ -1936,6 +1999,32 @@ "vite": "^4.2.0 || ^5.0.0 || ^6.0.0" } }, + "node_modules/@vitest/coverage-v8": { + "version": "0.34.6", + "resolved": "https://registry.npmjs.org/@vitest/coverage-v8/-/coverage-v8-0.34.6.tgz", + "integrity": "sha512-fivy/OK2d/EsJFoEoxHFEnNGTg+MmdZBAVK9Ka4qhXR2K3J0DS08vcGVwzDtXSuUMabLv4KtPcpSKkcMXFDViw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@ampproject/remapping": "^2.2.1", + "@bcoe/v8-coverage": "^0.2.3", + "istanbul-lib-coverage": "^3.2.0", + "istanbul-lib-report": "^3.0.1", + "istanbul-lib-source-maps": "^4.0.1", + "istanbul-reports": "^3.1.5", + "magic-string": "^0.30.1", + "picocolors": "^1.0.0", + "std-env": "^3.3.3", + "test-exclude": "^6.0.0", + "v8-to-istanbul": "^9.1.0" + }, + "funding": { + "url": "https://opencollective.com/vitest" + }, + "peerDependencies": { + "vitest": ">=0.32.0 <1" + } + }, "node_modules/@vitest/expect": { "version": "0.34.6", "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-0.34.6.tgz", @@ -2975,6 +3064,16 @@ "node": ">=14" } }, + "node_modules/date-fns": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz", + "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/kossnocorp" + } + }, "node_modules/debug": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz", @@ -4164,6 +4263,13 @@ "node": ">=12" } }, + "node_modules/html-escaper": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz", + "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==", + "dev": true, + "license": "MIT" + }, "node_modules/http-proxy-agent": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz", @@ -4658,6 +4764,60 @@ "dev": true, "license": "ISC" }, + "node_modules/istanbul-lib-coverage": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz", + "integrity": "sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==", + "dev": true, + "license": "BSD-3-Clause", + "engines": { + "node": ">=8" + } + }, + "node_modules/istanbul-lib-report": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.1.tgz", + "integrity": "sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==", + "dev": true, + "license": "BSD-3-Clause", + "dependencies": { + "istanbul-lib-coverage": "^3.0.0", + "make-dir": "^4.0.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/istanbul-lib-source-maps": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.1.tgz", + "integrity": "sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==", + "dev": true, + "license": "BSD-3-Clause", + "dependencies": { + "debug": "^4.1.1", + "istanbul-lib-coverage": "^3.0.0", + "source-map": "^0.6.1" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/istanbul-reports": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.2.0.tgz", + "integrity": "sha512-HGYWWS/ehqTV3xN10i23tkPkpH46MLCIMFNCaaKNavAXTF1RkqxawEPtnjnGZ6XKSInBKkiOA5BKS+aZiY3AvA==", + "dev": true, + "license": "BSD-3-Clause", + "dependencies": { + "html-escaper": "^2.0.0", + "istanbul-lib-report": "^3.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/jackspeak": { "version": "3.4.3", "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz", @@ -4947,6 +5107,22 @@ "@jridgewell/sourcemap-codec": "^1.5.0" } }, + "node_modules/make-dir": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-4.0.0.tgz", + "integrity": "sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==", + "dev": true, + "license": "MIT", + "dependencies": { + "semver": "^7.5.3" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/mapbox-gl": { "version": "2.15.0", "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-2.15.0.tgz", @@ -6457,6 +6633,16 @@ "node": ">=8" } }, + "node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true, + "license": "BSD-3-Clause", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/source-map-js": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", @@ -6759,6 +6945,45 @@ "node": ">=14.0.0" } }, + "node_modules/test-exclude": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz", + "integrity": "sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==", + "dev": true, + "license": "ISC", + "dependencies": { + "@istanbuljs/schema": "^0.1.2", + "glob": "^7.1.4", + "minimatch": "^3.0.4" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/test-exclude/node_modules/brace-expansion": { + "version": "1.1.21", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.21.tgz", + "integrity": "sha512-9zeA+KLZNNzglF2TPKRQEDyx6Yby7daAkuy8MiPzpXPsYDWi/DRM8jmwUDxokQjYqBpv5DgPiwD4h4ZZSy1Ujw==", + "dev": true, + "license": "MIT", + "dependencies": { + "balanced-match": "^1.0.0", + "concat-map": "0.0.1" + } + }, + "node_modules/test-exclude/node_modules/minimatch": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz", + "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==", + "dev": true, + "license": "ISC", + "dependencies": { + "brace-expansion": "^1.1.7" + }, + "engines": { + "node": "*" + } + }, "node_modules/text-table": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", @@ -7036,6 +7261,21 @@ "dev": true, "license": "MIT" }, + "node_modules/v8-to-istanbul": { + "version": "9.3.0", + "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-9.3.0.tgz", + "integrity": "sha512-kiGUalWN+rgBJ/1OHZsBtU4rXZOfj/7rKQxULKlIzwzQSvMJUUNgPwJEEh7gU6xEVxC0ahoOBvN2YI8GH6FNgA==", + "dev": true, + "license": "ISC", + "dependencies": { + "@jridgewell/trace-mapping": "^0.3.12", + "@types/istanbul-lib-coverage": "^2.0.1", + "convert-source-map": "^2.0.0" + }, + "engines": { + "node": ">=10.12.0" + } + }, "node_modules/vite": { "version": "4.5.14", "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.14.tgz", diff --git a/frontend/package.json b/frontend/package.json index 45d0ed0..6a3cf58 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -12,12 +12,13 @@ "preview": "vite preview", "test": "vitest", "test:ui": "vitest --ui", - "test:coverage": "vitest --coverage", + "test:coverage": "vitest run --coverage", "test:e2e": "playwright test", "test:e2e:ui": "playwright test --ui", "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,css,md}\"", "format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,css,md}\"", - "type-check": "tsc --noEmit" + "type-check": "tsc --noEmit", + "test:exception:coverage": "vitest run --config vitest.exception.config.ts --coverage" }, "dependencies": { "react": "^18.2.0", @@ -31,7 +32,10 @@ "react-hot-toast": "^2.4.1", "lucide-react": "^0.292.0", "clsx": "^2.0.0", - "tailwind-merge": "^2.0.0" + "tailwind-merge": "^2.0.0", + "@heroicons/react": "^2.2.0", + "date-fns": "^3.6.0", + "@tanstack/react-query": "^5.104.2" }, "devDependencies": { "@types/react": "^18.2.37", @@ -55,10 +59,11 @@ "@testing-library/user-event": "^14.5.1", "jsdom": "^22.1.0", "@playwright/test": "^1.40.0", - "msw": "^2.0.0" + "msw": "^2.0.0", + "@vitest/coverage-v8": "^0.34.6" }, "engines": { "node": ">=18.0.0", "npm": ">=9.0.0" } -} \ No newline at end of file +} diff --git a/frontend/postcss.config.cjs b/frontend/postcss.config.cjs new file mode 100644 index 0000000..cce4985 --- /dev/null +++ b/frontend/postcss.config.cjs @@ -0,0 +1 @@ +module.exports = { plugins: { tailwindcss: {}, autoprefixer: {} } }; diff --git a/frontend/scripts/check-browser.cjs b/frontend/scripts/check-browser.cjs new file mode 100644 index 0000000..f9b81ae --- /dev/null +++ b/frontend/scripts/check-browser.cjs @@ -0,0 +1,314 @@ +/* Default lane calls the real pipeline. --fixture is UI-only contract verification. */ +const { chromium } = require( + process.env.PLAYWRIGHT_CORE_PATH || "playwright-core", +); +const { spawn } = require("node:child_process"); +const assert = require("node:assert/strict"); +const fs = require("node:fs"); +const path = require("node:path"); +const fixture = process.argv.includes("--fixture"); +const origin = "http://127.0.0.1:4173"; +function pdf(number) { + const lines = [ + "Vendor: Browser Acceptance", + `Invoice: ${number}`, + "PO: UNMATCHED-BROWSER-PO", + "Total: 123.45", + "Currency: USD", + ]; + const stream = + "BT /F1 12 Tf 50 740 Td " + + lines.map((l) => `(${l}) Tj`).join(" 0 -24 Td ") + + " ET"; + const objects = [ + "<< /Type /Catalog /Pages 2 0 R >>", + "<< /Type /Pages /Kids [3 0 R] /Count 1 >>", + "<< /Type /Page /Parent 2 0 R /MediaBox [0 0 612 792] /Resources << /Font << /F1 5 0 R >> >> /Contents 4 0 R >>", + `<< /Length ${Buffer.byteLength(stream)} >>\nstream\n${stream}\nendstream`, + "<< /Type /Font /Subtype /Type1 /BaseFont /Helvetica >>", + ]; + let content = "%PDF-1.4\n", + offsets = [0]; + objects.forEach((o, i) => { + offsets.push(Buffer.byteLength(content)); + content += `${i + 1} 0 obj\n${o}\nendobj\n`; + }); + const xref = Buffer.byteLength(content); + content += + `xref\n0 6\n0000000000 65535 f \n` + + offsets + .slice(1) + .map((o) => String(o).padStart(10, "0") + " 00000 n \n") + .join("") + + `trailer\n<< /Size 6 /Root 1 0 R >>\nstartxref\n${xref}\n%%EOF\n`; + return Buffer.from(content); +} +async function mockContracts(page, email, number, document) { + const now = new Date().toISOString(); + let reviewed = false, + identity = { + id: 1, + email, + is_active: true, + is_verified: false, + created_at: now, + updated_at: now, + }; + const item = { + id: "fixture-invoice", + vendor_name: "Browser Acceptance", + invoice_number: number, + total_amount: 123.45, + matched_status: "NEEDS_REVIEW", + created_at: now, + status: "COMPLETED", + file_path: "/api/v1/review/fixture-invoice/document", + file_type: "pdf", + match_details: '{"reason":"No PO"}', + updated_at: now, + }; + await page.route("http://127.0.0.1:8003/**", async (route) => { + const req = route.request(), + u = new URL(req.url()), + headers = { + "access-control-allow-origin": origin, + "access-control-allow-headers": "Content-Type, Authorization", + }; + let data = {}, + status = 200; + if (req.method() === "OPTIONS") { + await route.fulfill({ status: 204, headers }); + return; + } + if (u.pathname === "/auth/register") { + status = 201; + data = identity; + } else if (u.pathname === "/auth/login") { + if (req.postDataJSON().password === "WrongPassword123!") { + status = 401; + data = { detail: "Invalid email or password" }; + } else + data = { + access_token: "ui-fixture-token", + token_type: "bearer", + expires_in: 3600, + }; + } else if (u.pathname === "/auth/me") data = identity; + else if (u.pathname === "/auth/logout") data = { success: true }; + else if (u.pathname === "/api/v1/ingest/upload") { + status = 202; + data = { + request_id: item.id, + status: "PENDING", + extraction_method: "UI_CONTRACT_FIXTURE", + }; + } else if (u.pathname.startsWith("/api/v1/ingest/status/")) + data = { ...item, fields: { extraction_method: "UI_CONTRACT_FIXTURE" } }; + else if (u.pathname === "/api/v1/review/queue") + data = { + items: reviewed ? [] : [item], + total: reviewed ? 0 : 1, + page: 1, + page_size: 20, + has_next: false, + has_prev: false, + }; + else if (u.pathname.endsWith("/document")) { + assert.equal(req.headers().authorization, "Bearer ui-fixture-token"); + await route.fulfill({ + status, + headers, + contentType: "application/pdf", + body: document, + }); + return; + } else if (u.pathname.endsWith("/approve")) { + assert.equal(req.headers().authorization, "Bearer ui-fixture-token"); + reviewed = true; + data = { + invoice_id: item.id, + action: "approve", + reviewed_by: email, + reviewed_at: now, + review_notes: "Browser acceptance", + }; + } else if (u.pathname.startsWith("/api/v1/review/")) + data = { + ...item, + ...(reviewed + ? { matched_status: "APPROVED", reviewed_by: email, reviewed_at: now } + : {}), + }; + else { + status = 404; + data = { detail: "Unknown fixture contract" }; + } + await route.fulfill({ + status, + headers, + contentType: "application/json", + body: JSON.stringify(data), + }); + }); +} +(async () => { + let server, browser; + try { + server = spawn( + "node", + [ + "node_modules/vite/bin/vite.js", + "preview", + "--host", + "127.0.0.1", + "--port", + "4173", + ], + { cwd: path.resolve(__dirname, ".."), stdio: "inherit" }, + ); + for (let i = 0; i < 100; i++) { + try { + await fetch(origin); + break; + } catch { + await new Promise((r) => setTimeout(r, 100)); + } + } + browser = await chromium.launch({ + ...(process.env.CHROMIUM_PATH + ? { executablePath: process.env.CHROMIUM_PATH } + : {}), + args: ["--no-sandbox", "--disable-dev-shm-usage"], + }); + const results = []; + for (const width of [1440, 390]) { + const page = await browser.newPage({ + viewport: { width, height: 950 }, + acceptDownloads: true, + }); + const errors = []; + page.on("pageerror", (e) => errors.push(e.message)); + const stamp = Date.now() + "-" + width, + email = `browser-${stamp}@example.com`, + number = "INV-BROWSER-" + stamp, + document = pdf(number); + if (fixture) await mockContracts(page, email, number, document); + await page.goto(origin + "/login"); + await page.getByRole("button", { name: "Sign up here" }).click(); + await page.getByLabel("Name", { exact: true }).fill("Browser Acceptance"); + await page.getByLabel("Email", { exact: true }).fill(email); + await page + .getByLabel("Password", { exact: true }) + .fill("BrowserPassword123!"); + await page + .getByLabel("Confirm password", { exact: true }) + .fill("BrowserPassword123!"); + await page + .getByRole("button", { name: "Create account", exact: true }) + .click(); + await page.waitForURL("**/login"); + await page.locator("#email").fill(email); + await page.locator("#password").fill("WrongPassword123!"); + await page.locator("#password").blur(); + await page.getByRole("button", { name: "Sign In", exact: true }).click(); + await page + .getByText("Invalid email or password", { exact: true }) + .first() + .waitFor(); + await page.locator("#password").fill("BrowserPassword123!"); + await page.locator("#password").blur(); + await page.getByRole("button", { name: "Sign In", exact: true }).click(); + await page.waitForURL("**/dashboard"); + await page + .locator("input[type=file]") + .setInputFiles({ + name: "browser-invoice.pdf", + mimeType: "application/pdf", + buffer: document, + }); + await page.getByRole("button", { name: "Upload PDF" }).click(); + await page.waitForFunction( + () => + document + .querySelector("[role=status]") + ?.textContent.includes("processed."), + {}, + { timeout: 70000 }, + ); + await page.getByRole("link", { name: "Open review queue" }).click(); + const row = page.getByRole("row").filter({ hasText: number }); + await row.getByRole("button", { name: "View", exact: true }).click(); + await page + .getByRole("heading", { name: "Invoice Review", exact: true }) + .waitFor(); + const downloadPromise = page.waitForEvent("download"); + await page.getByRole("button", { name: "Download source PDF" }).click(); + const dl = await downloadPromise; + assert.ok( + fs + .readFileSync(await dl.path()) + .subarray(0, 5) + .equals(Buffer.from("%PDF-")), + ); + await page + .getByRole("button", { name: "Start Review", exact: true }) + .first() + .click(); + await page.locator("#reviewed_by").fill(email); + await page.locator("#review_notes").fill("Browser acceptance"); + await page + .getByRole("button", { name: "Approve Invoice", exact: true }) + .click(); + await page.getByRole("heading", { name: "Review Complete" }).waitFor(); + await page.reload(); + await page.getByRole("heading", { name: "Review Complete" }).waitFor(); + assert.ok((await page.locator("body").innerText()).includes(email)); + assert.deepEqual(errors, []); + assert.equal( + await page.evaluate( + () => document.documentElement.scrollWidth > innerWidth + 2, + ), + false, + ); + await page.screenshot({ + path: `/tmp/invoice-review-${width}.png`, + fullPage: true, + }); + await page.getByRole("button", { name: "Back to Queue" }).click(); + assert.equal( + await page.getByRole("row").filter({ hasText: number }).count(), + 0, + ); + await page.goto(origin + "/dashboard"); + await page.getByRole("button", { name: "Logout", exact: true }).click(); + await page.waitForURL("**/login"); + await page.goto(origin + "/exception"); + await page.waitForURL("**/login"); + results.push({ + width, + signup: true, + login: true, + upload: true, + review: true, + sourcePdf: true, + reload: true, + logout: true, + errors, + }); + await page.close(); + } + console.log( + JSON.stringify({ + mode: fixture ? "UI_CONTRACT_FIXTURE" : "REAL_PIPELINE", + pass: true, + results, + }), + ); + } catch (e) { + console.error(e.stack); + process.exitCode = 1; + } finally { + if (browser) await browser.close(); + if (server) server.kill(); + } +})(); diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 68b5fe0..5e4a958 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,41 +1,53 @@ -import React, { useEffect } from 'react' -import { Routes, Route, Navigate } from 'react-router-dom' -import { useAuthStore } from '@/stores/authStore' -import { LoginForm } from '@/components/LoginForm' +import React, { useEffect } from "react"; +import { Routes, Route, Navigate, Link, useLocation } from "react-router-dom"; +import { useAuthStore } from "@/stores/authStore"; +import { LoginForm } from "@/components/LoginForm"; +import { RegisterForm } from "@/components/RegisterForm"; +import { PipelineUpload } from "@/components/PipelineUpload"; +import { ExceptionApp } from "./exception"; // Protected Route Component interface ProtectedRouteProps { - children: React.ReactNode + children: React.ReactNode; } const ProtectedRoute: React.FC = ({ children }) => { - const { isAuthenticated, isLoading } = useAuthStore() - + const { isAuthenticated, isLoading } = useAuthStore(); + const location = useLocation(); + if (isLoading) { return (
- ) + ); } - - return isAuthenticated ? <>{children} : -} -// Dashboard Component (placeholder for now) + return isAuthenticated ? ( + <>{children} + ) : ( + + ); +}; + +// Invoice review entry point const Dashboard: React.FC = () => { - const { user, logout } = useAuthStore() - + const { user, logout } = useAuthStore(); + return (
- +
-

Dashboard Coming Soon

-

Your InvoiceFlow dashboard will be available here.

+

+ Review invoices with confidence +

+

+ Inspect extracted fields, matching evidence, and approve or + reject exceptions. +

+ + Open review queue +
+
- ) -} + ); +}; // Main App Component const App: React.FC = () => { - const { checkTokenExpiry, clearToken, loadUser, token } = useAuthStore() - + const { checkTokenExpiry, clearToken, loadUser, token } = useAuthStore(); + // Check token expiry on app load and periodically useEffect(() => { const checkAuth = () => { if (checkTokenExpiry()) { - clearToken() + clearToken(); } else if (token) { - loadUser().catch(() => clearToken()) + loadUser().catch(() => clearToken()); } - } - + }; + // Check immediately - checkAuth() - + checkAuth(); + // Check every 5 minutes - const interval = setInterval(checkAuth, 5 * 60 * 1000) - - return () => clearInterval(interval) - }, [checkTokenExpiry, clearToken, loadUser, token]) - + const interval = setInterval(checkAuth, 5 * 60 * 1000); + + return () => clearInterval(interval); + }, [checkTokenExpiry, clearToken, loadUser, token]); + return (
- } /> - + + + } + /> + } /> + + + + } + /> + - } + } /> - - } + } /> } />
- ) -} + ); +}; -export default App \ No newline at end of file +export default App; diff --git a/frontend/src/__tests__/App.test.tsx b/frontend/src/__tests__/App.test.tsx new file mode 100644 index 0000000..7a186d2 --- /dev/null +++ b/frontend/src/__tests__/App.test.tsx @@ -0,0 +1,54 @@ +import { describe, it, expect, vi } from "vitest"; +import { render, screen, fireEvent } from "@testing-library/react"; +import { MemoryRouter } from "react-router-dom"; +import App from "../App"; + +const state = { + isAuthenticated: true, + isLoading: false, + token: null, + user: { email: "reviewer@example.com" }, + logout: vi.fn(), + checkTokenExpiry: () => false, + clearToken: vi.fn(), + loadUser: vi.fn().mockResolvedValue(undefined), +}; +vi.mock("@/stores/authStore", () => ({ useAuthStore: () => state })); + +describe("review workflow entry point", () => { + it("opens the real review queue from the dashboard", async () => { + const fetchMock = vi.spyOn(globalThis, "fetch").mockResolvedValue({ + ok: true, + json: async () => ({ + items: [], + total: 0, + page: 1, + page_size: 20, + has_next: false, + has_prev: false, + }), + } as Response); + try { + render( + + + , + ); + fireEvent.click(screen.getByRole("link", { name: "Open review queue" })); + expect( + await screen.findByRole("heading", { name: "Exception Review Queue" }), + ).toBeInTheDocument(); + expect( + await screen.findByText( + "There are currently no invoices in the manual review queue.", + ), + ).toBeInTheDocument(); + expect(fetchMock).toHaveBeenCalledWith( + expect.stringContaining("/api/v1/review/queue"), + expect.any(Object), + ); + } finally { + fetchMock.mockRestore(); + } + }); +}); diff --git a/frontend/src/components/LoginForm.tsx b/frontend/src/components/LoginForm.tsx index 981e1ea..2ea5d0d 100644 --- a/frontend/src/components/LoginForm.tsx +++ b/frontend/src/components/LoginForm.tsx @@ -1,90 +1,89 @@ /** * Login form component with comprehensive validation and error handling */ -import React, { useState, useEffect } from 'react' -import { useNavigate, useLocation } from 'react-router-dom' -import { useForm } from 'react-hook-form' -import { Eye, EyeOff, LogIn, Loader2, AlertCircle } from 'lucide-react' -import { useAuth } from '@/stores/authStore' -import type { LoginFormData } from '@/types/auth' +import React, { useState, useEffect } from "react"; +import { useNavigate, useLocation } from "react-router-dom"; +import { useForm } from "react-hook-form"; +import { Eye, EyeOff, LogIn, Loader2, AlertCircle } from "lucide-react"; +import { useAuth } from "@/stores/authStore"; +import type { LoginFormData } from "@/types/auth"; interface LocationState { - from?: string + from?: string; } export const LoginForm: React.FC = () => { - const navigate = useNavigate() - const location = useLocation() - const { login, isLoading, error, clearError } = useAuth() - - const [showPassword, setShowPassword] = useState(false) - const [formError, setFormError] = useState(null) - - const from = (location.state as LocationState)?.from || '/dashboard' + const navigate = useNavigate(); + const location = useLocation(); + const { login, isLoading, error, clearError } = useAuth(); + + const [showPassword, setShowPassword] = useState(false); + const [formError, setFormError] = useState(null); + + const from = (location.state as LocationState)?.from || "/dashboard"; const { register, handleSubmit, formState: { errors, isValid, isDirty }, - reset, } = useForm({ - mode: 'onBlur', + mode: "onBlur", defaultValues: { - email: '', - password: '', + email: "", + password: "", }, - }) - - + }); // Clear errors when form changes useEffect(() => { if (isDirty) { - clearError() - setFormError(null) + clearError(); + setFormError(null); } - }, [isDirty, clearError]) + }, [isDirty, clearError]); // Handle form submission const onSubmit = async (data: LoginFormData) => { try { - setFormError(null) - await login(data) - + setFormError(null); + await login(data); + // Successful login - navigate to intended destination - navigate(from, { replace: true }) - + navigate(from, { replace: true }); } catch (loginError) { - const errorMessage = loginError instanceof Error - ? loginError.message - : 'Login failed. Please try again.' - - setFormError(errorMessage) + const errorMessage = + loginError instanceof Error + ? loginError.message + : "Login failed. Please try again."; + + setFormError(errorMessage); } - } + }; // Email validation const validateEmail = (email: string) => { - const emailRegex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i + const emailRegex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i; if (!emailRegex.test(email)) { - return 'Please enter a valid email address' + return "Please enter a valid email address"; } - return true - } + return true; + }; // Toggle password visibility const togglePasswordVisibility = () => { - setShowPassword(!showPassword) - } + setShowPassword(!showPassword); + }; - const displayError = formError || error + const displayError = formError || error; return (

Welcome Back

-

Sign in to your InvoiceFlow account

+

+ Sign in to your InvoiceFlow account +

{displayError && ( @@ -96,10 +95,17 @@ export const LoginForm: React.FC = () => {
)} -
+ {/* Email Field */}
-
{/* Password Field */}
-
@@ -179,8 +192,8 @@ export const LoginForm: React.FC = () => { focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 ${ isLoading || !isValid - ? 'bg-gray-400 cursor-not-allowed' - : 'bg-blue-600 hover:bg-blue-700' + ? "bg-gray-400 cursor-not-allowed" + : "bg-blue-600 hover:bg-blue-700" } `} > @@ -201,10 +214,10 @@ export const LoginForm: React.FC = () => { {/* Additional Options */}

- Don't have an account?{' '} + Don't have an account?{" "}

- - {/* Development Helper */} - {process.env.NODE_ENV === 'development' && ( -
-

Dev Helper: Email format required, any password accepted for demo

- -
- )}
- ) -} \ No newline at end of file + ); +}; diff --git a/frontend/src/components/PipelineUpload.tsx b/frontend/src/components/PipelineUpload.tsx new file mode 100644 index 0000000..c6000b3 --- /dev/null +++ b/frontend/src/components/PipelineUpload.tsx @@ -0,0 +1,92 @@ +import { FormEvent, useState } from "react"; +import { useAuthStore } from "@/stores/authStore"; +const base = ( + import.meta.env.VITE_EXCEPTION_API_URL || "http://localhost:8007" +).replace(/\/$/, ""); +export function PipelineUpload() { + const token = useAuthStore((s) => s.token); + const [message, setMessage] = useState(""); + const [busy, setBusy] = useState(false); + async function upload(event: FormEvent) { + event.preventDefault(); + const file = new FormData(event.currentTarget).get("file"); + if (!(file instanceof File) || file.size > 10 * 1024 * 1024) { + setMessage("Choose a PDF up to 10 MB."); + return; + } + setBusy(true); + try { + const body = new FormData(); + body.append("file", file); + const response = await fetch(`${base}/api/v1/ingest/upload`, { + method: "POST", + headers: { Authorization: `Bearer ${token}` }, + body, + }); + const data = await response.json(); + if (!response.ok) + throw Error( + typeof data.detail === "string" ? data.detail : "Upload failed.", + ); + setMessage( + `Accepted ${data.request_id}. Waiting for extraction and matching…`, + ); + for (let attempt = 0; attempt < 120; attempt++) { + await new Promise((resolve) => setTimeout(resolve, 500)); + const statusResponse = await fetch( + `${base}/api/v1/ingest/status/${encodeURIComponent(data.request_id)}`, + { headers: { Authorization: `Bearer ${token}` } }, + ); + if (!statusResponse.ok) + throw Error("Unable to check processing status."); + const status = await statusResponse.json(); + if (status.status === "FAILED") + throw Error(status.error || "PDF processing failed."); + if (status.status === "COMPLETED") { + setMessage( + `Invoice ${data.request_id} processed. Open the queue to review any exception. Extraction: ${data.extraction_method || "see service status"}.`, + ); + return; + } + } + throw Error( + `Invoice ${data.request_id} is still processing. Check the queue later.`, + ); + } catch (error) { + setMessage(error instanceof Error ? error.message : "Upload failed."); + } finally { + setBusy(false); + } + } + return ( +
+

Upload an invoice

+

+ Connected pipeline requires a text PDF with Vendor, Invoice, PO, Total + and Currency fields. Scanned documents require an OCR provider. Use + synthetic data for the local demo. +

+ + + + +

+ {message} +

+
+ ); +} diff --git a/frontend/src/components/RegisterForm.tsx b/frontend/src/components/RegisterForm.tsx new file mode 100644 index 0000000..e443547 --- /dev/null +++ b/frontend/src/components/RegisterForm.tsx @@ -0,0 +1,94 @@ +import { FormEvent, useState } from "react"; +import { Link, useNavigate } from "react-router-dom"; +import { useAuthStore } from "@/stores/authStore"; + +export function RegisterForm() { + const { register, isLoading } = useAuthStore(); + const navigate = useNavigate(); + const [error, setError] = useState(""); + async function submit(event: FormEvent) { + event.preventDefault(); + const form = Object.fromEntries(new FormData(event.currentTarget)); + if (form.password !== form.confirm) { + setError("Passwords must match."); + return; + } + try { + await register({ + email: String(form.email), + password: String(form.password), + full_name: String(form.full_name), + }); + navigate("/login"); + } catch (error) { + setError(error instanceof Error ? error.message : "Registration failed."); + } + } + return ( +
+
+

Create your account

+

+ Register with the connected InvoiceFlow service. +

+
+ + + + + {error && ( +

+ {error} +

+ )} + +
+ + Back to sign in + +
+
+ ); +} diff --git a/frontend/src/components/__tests__/LoginForm.test.tsx b/frontend/src/components/__tests__/LoginForm.test.tsx index c6b7a17..3a1c096 100644 --- a/frontend/src/components/__tests__/LoginForm.test.tsx +++ b/frontend/src/components/__tests__/LoginForm.test.tsx @@ -1,7 +1,7 @@ -import { describe, it, expect } from 'vitest' +import { describe, it, expect } from "vitest"; -describe('LoginForm', () => { - it('should pass basic test', () => { - expect(1 + 1).toBe(2) - }) -}) \ No newline at end of file +describe("LoginForm", () => { + it("should pass basic test", () => { + expect(1 + 1).toBe(2); + }); +}); diff --git a/frontend/src/exception/README.md b/frontend/src/exception/README.md index a7c8b2c..057f17c 100644 --- a/frontend/src/exception/README.md +++ b/frontend/src/exception/README.md @@ -56,6 +56,7 @@ src/exception/ ### Installation 1. **Install Dependencies** (if not already installed): + ```bash npm install @tanstack/react-query react-router-dom npm install @heroicons/react date-fns @@ -71,9 +72,10 @@ src/exception/ ### Integration 1. **Add to Main App Router**: + ```typescript import { ExceptionApp } from './exception'; - + function App() { return ( @@ -87,9 +89,10 @@ src/exception/ ``` 2. **Or Use Individual Components**: + ```typescript - import { QueuePage, DetailPage } from './exception'; - + import { QueuePage, DetailPage } from "./exception"; + // Use in your existing routing structure ``` @@ -100,6 +103,7 @@ src/exception/ The queue page displays all invoices requiring review with advanced filtering and sorting capabilities. **Features**: + - Pagination with configurable page sizes - Vendor name filtering - Date range filtering @@ -114,6 +118,7 @@ The queue page displays all invoices requiring review with advanced filtering an The detail page shows comprehensive invoice information and provides review controls. **Features**: + - Complete invoice details (original and extracted data) - Matching information and confidence scores - File information and download links @@ -135,7 +140,7 @@ const queryClient = new QueryClient({ queries: { retry: 3, staleTime: 30000, // 30 seconds - gcTime: 300000, // 5 minutes + gcTime: 300000, // 5 minutes }, }, }); @@ -149,10 +154,10 @@ Fetches paginated review queue with filtering. ```typescript const { data, isLoading, error, refetch } = useReviewQueue(1, 20, { - vendor_filter: 'Acme', - date_from: '2024-01-01', - sort_by: 'created_at', - sort_order: 'desc' + vendor_filter: "Acme", + date_from: "2024-01-01", + sort_by: "created_at", + sort_order: "desc", }); ``` @@ -173,11 +178,11 @@ const approveInvoice = useApproveInvoice(); const handleApprove = async () => { await approveInvoice.mutateAsync({ - invoiceId: 'uuid', + invoiceId: "uuid", request: { - reviewed_by: 'john.doe@company.com', - review_notes: 'Approved - matches PO' - } + reviewed_by: "john.doe@company.com", + review_notes: "Approved - matches PO", + }, }); }; ``` @@ -191,11 +196,11 @@ const rejectInvoice = useRejectInvoice(); const handleReject = async () => { await rejectInvoice.mutateAsync({ - invoiceId: 'uuid', + invoiceId: "uuid", request: { - reviewed_by: 'jane.smith@company.com', - review_notes: 'Rejected - amount mismatch' - } + reviewed_by: "jane.smith@company.com", + review_notes: "Rejected - amount mismatch", + }, }); }; ``` @@ -210,7 +215,7 @@ import { QueueTable } from './exception'; function MyQueuePage() { const [filters, setFilters] = useState({}); const { data, isLoading } = useReviewQueue(1, 20, filters); - + return ( { +const validateForm = (action: "approve" | "reject") => { const newErrors = {}; - + if (!formData.reviewed_by.trim()) { - newErrors.reviewed_by = 'Reviewer name is required'; + newErrors.reviewed_by = "Reviewer name is required"; } - - if (action === 'reject' && !formData.review_notes.trim()) { - newErrors.review_notes = 'Review notes are required for rejection'; + + if (action === "reject" && !formData.review_notes.trim()) { + newErrors.review_notes = "Review notes are required for rejection"; } - + setErrors(newErrors); return Object.keys(newErrors).length === 0; }; @@ -318,8 +325,8 @@ const approveInvoice = useMutation({ mutationFn: approveInvoiceApi, onSuccess: () => { // Invalidate queue to show updated status - queryClient.invalidateQueries(['review-queue']); - } + queryClient.invalidateQueries(["review-queue"]); + }, }); ``` @@ -362,7 +369,7 @@ if (error) { return (

Failed to load data

-
- +
- + {getStatusIcon(invoice.matched_status)} - {invoice.matched_status.replace('_', ' ')} + + {invoice.matched_status.replace("_", " ")} +
@@ -114,25 +135,41 @@ export function InvoiceViewer({ invoice }: InvoiceViewerProps) {
Vendor:
-
{invoice.vendor_name || '-'}
+
+ {invoice.vendor_name || "-"} +
-
Invoice Number:
-
{invoice.invoice_number || '-'}
+
+ Invoice Number: +
+
+ {invoice.invoice_number || "-"} +
-
Total Amount:
+
+ Total Amount: +
{formatAmount(invoice.total_amount)}
-
Invoice Date:
-
{formatDate(invoice.invoice_date)}
+
+ Invoice Date: +
+
+ {formatDate(invoice.invoice_date)} +
-
Due Date:
-
{formatDate(invoice.due_date)}
+
+ Due Date: +
+
+ {formatDate(invoice.due_date)} +
@@ -144,12 +181,34 @@ export function InvoiceViewer({ invoice }: InvoiceViewerProps) {
-
File Type:
-
{invoice.file_type || '-'}
+
+ File Type: +
+
+ {invoice.file_type || "-"} +
-
File Path:
-
{invoice.file_path || '-'}
+
+ File Path: +
+
+ {invoice.file_path ? ( + + ) : ( + "-" + )} + {documentError && ( +

+ {documentError} +

+ )} +
@@ -164,20 +223,36 @@ export function InvoiceViewer({ invoice }: InvoiceViewerProps) {
-
Extracted Vendor:
-
{invoice.extracted_vendor || '-'}
+
+ Extracted Vendor: +
+
+ {invoice.extracted_vendor || "-"} +
-
Extracted Amount:
-
{formatAmount(invoice.extracted_amount)}
+
+ Extracted Amount: +
+
+ {formatAmount(invoice.extracted_amount)} +
-
Extracted Invoice #:
-
{invoice.extracted_invoice_number || '-'}
+
+ Extracted Invoice #: +
+
+ {invoice.extracted_invoice_number || "-"} +
-
Extracted Date:
-
{formatDate(invoice.extracted_date)}
+
+ Extracted Date: +
+
+ {formatDate(invoice.extracted_date)} +
@@ -189,22 +264,28 @@ export function InvoiceViewer({ invoice }: InvoiceViewerProps) {
-
Confidence Score:
+
+ Confidence Score: +
- 0.8 - ? 'bg-green-100 text-green-800' - : (invoice.confidence_score || 0) > 0.6 - ? 'bg-yellow-100 text-yellow-800' - : 'bg-red-100 text-red-800' - }`}> + 0.8 + ? "bg-green-100 text-green-800" + : (invoice.confidence_score || 0) > 0.6 + ? "bg-yellow-100 text-yellow-800" + : "bg-red-100 text-red-800" + }`} + > {formatConfidence(invoice.confidence_score)}
{invoice.match_details && (
-
Match Details:
+
+ Match Details: + 
@@ -228,27 +309,39 @@ export function InvoiceViewer({ invoice }: InvoiceViewerProps) {
             
             

               

-                
Reviewed By:

+                

+                  Reviewed By:
+                

                 
{invoice.reviewed_by}

               

               

-                
Reviewed At:

-                
{formatDateTime(invoice.reviewed_at)}

+                

+                  Reviewed At:
+                

+                

+                  {formatDateTime(invoice.reviewed_at)}
+                

               

               

                 
Status:

                 

-                  
+                  
                     {getStatusIcon(invoice.matched_status)}
-                    {invoice.matched_status.replace('_', ' ')}
+                    
+                      {invoice.matched_status.replace("_", " ")}
+                    
                   
                 

               

             

-            
+
             {invoice.review_notes && (
               

-                
Review Notes:

+                

+                  Review Notes:
+                

                 

                   

                     {invoice.review_notes}
@@ -268,15 +361,19 @@ export function InvoiceViewer({ invoice }: InvoiceViewerProps) {
           

             

               
Created At:

-              
{formatDateTime(invoice.created_at)}

+              

+                {formatDateTime(invoice.created_at)}
+              

             

             

               
Updated At:

-              
{formatDateTime(invoice.updated_at)}

+              

+                {formatDateTime(invoice.updated_at)}
+
); -} \ No newline at end of file +} diff --git a/frontend/src/exception/components/Pagination.tsx b/frontend/src/exception/components/Pagination.tsx index 0519ecb..d281509 100644 --- a/frontend/src/exception/components/Pagination.tsx +++ b/frontend/src/exception/components/Pagination.tsx @@ -1 +1,52 @@ - \ No newline at end of file +interface PaginationProps { + page: number; + page_size: number; + total: number; + has_next: boolean; + has_prev: boolean; + onPageChange: (page: number) => void; +} + +export function Pagination({ + page, + page_size, + total, + has_next, + has_prev, + onPageChange, +}: PaginationProps) { + const pages = Math.max(1, Math.ceil(total / page_size)); + return ( + + ); +} diff --git a/frontend/src/exception/components/QueueTable.tsx b/frontend/src/exception/components/QueueTable.tsx index e55c35f..c7224a7 100644 --- a/frontend/src/exception/components/QueueTable.tsx +++ b/frontend/src/exception/components/QueueTable.tsx @@ -2,16 +2,15 @@ * Queue Table Component for displaying invoices needing review */ -import React, { useState } from 'react'; -import { format } from 'date-fns'; -import { - ChevronUpIcon, - ChevronDownIcon, +import { useState } from "react"; +import { format, parseISO } from "date-fns"; +import { + ChevronUpIcon, + ChevronDownIcon, EyeIcon, FunnelIcon, - XMarkIcon -} from '@heroicons/react/24/outline'; -import { InvoiceQueueItem, QueueFilters } from '../types'; +} from "@heroicons/react/24/outline"; +import { InvoiceQueueItem, QueueFilters } from "../types"; interface QueueTableProps { items: InvoiceQueueItem[]; @@ -21,22 +20,22 @@ interface QueueTableProps { onViewInvoice: (invoiceId: string) => void; } -export function QueueTable({ - items, - isLoading, - filters, - onFiltersChange, - onViewInvoice +export function QueueTable({ + items, + isLoading, + filters, + onFiltersChange, + onViewInvoice, }: QueueTableProps) { const [showFilters, setShowFilters] = useState(false); const [localFilters, setLocalFilters] = useState(filters); const handleSort = (field: string) => { - const newOrder = - filters.sort_by === field && filters.sort_order === 'desc' - ? 'asc' - : 'desc'; - + const newOrder = + filters.sort_by === field && filters.sort_order === "desc" + ? "asc" + : "desc"; + onFiltersChange({ ...filters, sort_by: field, @@ -58,30 +57,36 @@ export function QueueTable({ const getSortIcon = (field: string) => { if (filters.sort_by !== field) return null; - return filters.sort_order === 'desc' ? - : - ; + return filters.sort_order === "desc" ? ( + + ) : ( + + ); }; const formatAmount = (amount?: number) => { - if (!amount) return '-'; - return new Intl.NumberFormat('en-US', { - style: 'currency', - currency: 'USD', + if (amount == null) return "-"; + return new Intl.NumberFormat("en-US", { + style: "currency", + currency: "USD", }).format(amount); }; - const formatDate = (dateString?: string) => { - if (!dateString) return '-'; + const formatDate = (dateString?: string, calendarDate = false) => { + if (!dateString) return "-"; try { - return format(new Date(dateString), 'MMM dd, yyyy'); + // An invoice date is a calendar day, not a timestamp in the viewer's timezone. + const date = calendarDate + ? parseISO(dateString.slice(0, 10)) + : new Date(dateString); + return format(date, "MMM dd, yyyy"); } catch { - return '-'; + return "-"; } }; const formatConfidence = (score?: number) => { - if (!score) return '-'; + if (score == null) return "-"; return `${(score * 100).toFixed(1)}%`; }; @@ -90,9 +95,7 @@ export function QueueTable({ {/* Header with filters */}
-

- Review Queue -

+

Review Queue