askLio Frontend

A modern procurement request management frontend built with Vue 3 and Vite. This application allows users to create, view, update, filter, and delete procurement requests, with advanced features like PDF-based auto-fill and AI-powered commodity group classification.

Features

• Create, View, Update, Delete Procurement Requests
• Dynamic Order Lines: Add/remove multiple order lines per request
• Auto-Fill from PDF: Upload a PDF to extract and pre-fill request data
• Filtering: Filter requests by status, vendor, department, commodity group, title, and VAT ID
• Bootstrap Styling: Responsive, user-friendly UI
• AI Commodity Grouping: Commodity group is automatically assigned by backend AI
• FastAPI Backend Integration: Connects to a FastAPI backend via REST API

Getting Started

Prerequisites

• Node.js (v16+ recommended)
• npm

Installation

npm install

Development

Start the development server with hot reload:

npm run dev

Production Build

Compile and minify for production:

npm run build

Linting

Check code quality with ESLint:

npm run lint

Usage

• Home: View and filter all procurement requests
• Create Request: Fill out the form or upload a PDF to auto-fill fields
• Update Request: Edit existing requests
• Delete Request: Remove requests with confirmation
• Filter: Use the filter bar to quickly find requests by key fields

API Endpoints

The frontend expects a FastAPI backend running at http://localhost:8000 with endpoints:

• GET /requests — List all requests
• GET /requests/{id} — Get request details
• POST /requests — Create a new request
• PUT /requests/{id} — Update a request
• DELETE /requests/{id} — Delete a request
• POST /extract-pdf — Extract request data from a PDF

PDF Auto-Fill

To auto-fill a request, select a PDF file and click Auto-Fill from PDF. The file is sent to the backend, which returns extracted data to populate the form.

Commodity Group

Commodity group is assigned automatically by the backend AI and is not editable in the form.