ocr_frontend_route_map

Frontend Route Map

1. Router Definition (frontend/src/router/index.js)

Routes

Path	Name	Component	Meta
/login	Login	pages/LoginPage.vue	{ guest: true }
/ (layout parent)	—	views/Layout.vue	{ auth: true }
/ (child)	Dashboard	pages/DashboardPage.vue	—
/upload	Upload	pages/UploadPage.vue	{ roles: ['employee', 'admin'] }
/orders	OrderList	pages/OrderListPage.vue	—
/orders/:id	OrderDetail	pages/OrderDetailPage.vue	—
/admin	AdminPanel	pages/AdminPanelPage.vue	{ roles: ['admin'] }
/benchmark	Benchmark	pages/BenchmarkPage.vue (NOT YET CREATED)	—

router.beforeEach Guard (lines 57-78)

1. if (to.meta.auth && !authStore.user) → redirect to /login
2. if (to.meta.guest && authStore.user) → redirect to / (Dashboard)
3. if (to.meta.roles && authStore.user && !to.meta.roles.includes(authStore.user.role)) → redirect to / (Dashboard)
4. else → next()

---

2. Page-by-Page API Endpoint Calls

LoginPage.vue

Trigger	Endpoint	Method	Body
handleLogin()	/api/auth/login	POST	{ name, password }

— No status checks, no mode checks, no task_type checks.

---

DashboardPage.vue

Trigger	Endpoint	Method
onMounted	/api/stats?	GET
Tab switch	Filters displayOrders client-side by order.status	—

Status values used: uploading, processing, draft, pending_employee_review, employee_reviewed, pending_operator_review, operator_reviewed, imported, rejected, pending_retake

Pipeline keys: processing, pending_employee_review, pending_operator_review, operator_reviewed, imported

Mode checks: None. Task type checks: None.

---

UploadPage.vue

Trigger	Endpoint	Method	Body
handleUpload()	/api/ocr/upload	POST	FormData: files[], remark, employee_id, busno, store_name

— On success → redirect to /orders after 1.2s. — No status/mode/task_type checks.

---

OrderListPage.vue

Trigger	Endpoint	Method	Params
fetchOrders()	/api/orders	GET	?page=, ?per_page=20, ?status=, ?q=

Status tabs: all, pending_employee_review, pending_operator_review, operator_reviewed, imported

Role-aware default tab: employee→pending_employee_review, operator→pending_operator_review, others→all

canAct() check:

• employee: o.status === 'pending_employee_review'
• operator: o.status === 'pending_operator_review'
• admin: all

---

OrderDetailPage.vue

Data Loading

fetchOrder() → GET /api/orders/:id

Mode Computation

• status in ['processing', 'uploading'] → readonly
• status 'pending_employee_review' or 'draft' + role employee/admin → correct
• status 'pending_operator_review' + role operator/admin → review
• all others → readonly

Employee Correction (mode === ‘correct’)

API	Method	When
/api/items/:id	PUT	submitReview() — per-item save
/api/orders/:id/submit-employee	POST	submitReview() — final submit
localStorage ocr-draft-{id}	—	saveDraft() — auto-save

Operator Review (mode === ‘review’)

API	Method	When
/api/orders/:id/supplier-recommend	GET	loadSupplierRecommend()
/api/orders/:id	PUT	onSupplierChange() — update supplier
/api/orders/:id/approve	POST	approveOrder()
/api/orders/:id/reject	POST	rejectOrder()
/api/items/batch-match	PUT	openBatchMatch()
/api/orders/:id/split	POST	doSplit()

Admin Operations

API	Method	When
/api/orders/:id	PUT	resetOrder() → status 'pending_employee_review'
/api/orders/:id	DELETE	confirmDelete()
/api/ocr/retake/:id	POST	doRetake()

Sub-components API

Component	API	Method
ItemReviewCard.vue	/api/products/search?q=	GET
MatchDialog.vue	/api/products/search?q=	GET
CorrectionCard.vue	/api/products/search?q=	GET

AdminPanelPage.vue

API	Method
/api/stats/admin	GET
/api/orders	GET
/api/orders/:id	DELETE

Layout.vue

API	Method
/api/stats	GET

LogFloatingPanel.vue

API	Method	Params
/api/system/logs	GET	?name=app|ocr|match&lines=200

---

3. Mode Checks

Page	Mode	Condition
OrderDetailPage.vue	correct	status ∈ {pending_employee_review, draft} + role employee/admin
OrderDetailPage.vue	review	status === pending_operator_review + role operator/admin
OrderDetailPage.vue	readonly	All other statuses
ItemTable.vue	via prop	Passed from parent

4. Task Type Checks

None found. No task_type variable or checks exist anywhere in the frontend.

5. Complete API Endpoint Catalog

Endpoint	Methods	Used By
/api/auth/login	POST	LoginPage.vue
/api/stats	GET	Layout.vue, DashboardPage.vue
/api/stats/admin	GET	AdminPanelPage.vue
/api/orders	GET	OrderListPage.vue, AdminPanelPage.vue
/api/orders/:id	GET, PUT, DELETE	OrderDetailPage.vue, AdminPanelPage.vue
/api/orders/:id/approve	POST	OrderDetailPage.vue
/api/orders/:id/reject	POST	OrderDetailPage.vue
/api/orders/:id/submit-employee	POST	OrderDetailPage.vue
/api/orders/:id/split	POST	OrderDetailPage.vue
/api/orders/:id/supplier-recommend	GET	OrderDetailPage.vue
/api/items/:id	PUT	OrderDetailPage.vue
/api/items/batch-match	PUT	OrderDetailPage.vue
/api/products/search?q=	GET	CorrectionCard, MatchDialog, ItemReviewCard
/api/ocr/upload	POST	UploadPage.vue
/api/ocr/retake/:id	POST	OrderDetailPage.vue
/api/system/logs	GET	LogFloatingPanel.vue, LogViewer.vue