feat: Add SAP ERP single-page application for RL agent training

[aliraza556]

Overview

This PR implements a complete SAP ERP single-page application for RL agent training, submitted for the $1,000 bounty.

🎯 Bounty Requirements - All Complete ✅

1. Dashboard Landing ✅

• KPI Widgets: 4 hero cards showing total procurement value (€317K), open POs (3), pending approvals (4), and approval rate (50%)
• Trend Indicators: +12.5% and +5.2% vs last period
• Critical Tasks: Widget showing high-priority approvals
• Recent Activity: Latest purchase orders with status badges
• All data sourced from useDojoState hook

2. Procurement Workflow ✅

• List View: 6 purchase orders with filtering and selection
• Advanced Filters: By status (Draft, Pending, Approved, etc.) and vendor search
• Detail View: Complete PO info with line items table, vendor details, dates
• Stateful Actions:
  • ✅ Approve/Reject buttons with state persistence
  • ✅ Comment system with timestamps
  • ✅ Real-time status updates
  • ✅ Updates related tasks automatically
  • ✅ All changes tracked in audit log

3. User Tasks Inbox ✅

• Approval Queue: 7 tasks across different types (PO, Travel, Expense, Time Off)
• Status Management: Toggle between Pending, In Progress, Completed, Cancelled
• Priority Indicators: Color-coded badges (Low, Medium, High, Critical)
• Progress Chips: Visual status tracking
• Empty States: Friendly messages when no tasks found
• Quick Actions: Start Review, Approve, Cancel buttons
• Navigation: Jump to related purchase orders

4. Search + Navigation ✅

• Global Search: Persistent search box in header
• Smart Query: Searches POs, tasks, vendors, descriptions, departments
• Live Results: Real-time dropdown with categorized results
• Sidebar Navigation: Active highlighting, badge notifications (2 pending POs, 4 pending tasks)
• User Profile: Shows Klaus Weber, Finance Manager

5. Audit Trail ✅

• Activity Log: Complete history of 12+ actions
• Timeline View: Grouped by date (24.10.2025, 23.10.2025, etc.)
• Action Types: Create, approve, reject, comment, status change
• Metadata: JSON format for RL verification
• Statistics: Total activities, approvals, rejections, today's count
• Visual Indicators: Color-coded action icons

🛠️ Technical Implementation

Stack

• Framework: Vite 7 + React 19 + TypeScript 5.8
• State: @chakra-dev/dojo-hooks only (no Redux, Zustand, etc.)
• Styling: Tailwind CSS 4
• Icons: Lucide React
• UI Components: Radix UI (Dialog, Select, Tabs)
• Build: Single HTML file (308.99 kB, 89.64 kB gzipped)

Key Features

• ✅ No authentication - boots directly as Klaus Weber
• ✅ Fully offline - rich seed data included
• ✅ Responsive design - optimized for 1280px and 1440px
• ✅ Lean dependencies - only 14 runtime packages
• ✅ Type-safe - Full TypeScript strict mode
• ✅ Zero errors - Builds and lints cleanly

Code Quality

• 📁 26 files created
• 📝 ~2,500 lines of clean, typed code
• 🧩 13 React components with proper separation
• 📊 10+ TypeScript interfaces
• ✅ 0 build errors
• ✅ 0 lint errors
• ✅ 0 TypeScript errors

🎨 Design

• Theme: Professional SAP-inspired design with blue accent (#00a9e0)
• Layout: Dark sidebar + white content area
• Status Colors: Semantic badges (green/yellow/red/blue)
• Typography: Clean, readable fonts
• UX: Smooth transitions, hover states, empty states

📸 Screenshots

Dashboard showing KPI widgets and critical tasks:

Procurement workflow with filters and PO detail:

Tasks inbox with priority badges:

Audit trail with timeline view:

🧪 Testing

• ✅ All features manually tested
• ✅ State management verified via window.dojo.state
• ✅ Approve/reject workflow tested
• ✅ Comment system tested
• ✅ Filters and search tested
• ✅ Navigation between sections tested
• ✅ Audit trail tracking verified

📦 Project Structure

  sap/app/
  ├── src/
  │ ├── components/
  │ │ ├── common/ # Header, Sidebar, StatusBadge
  │ │ ├── dashboard/ # Dashboard + KPICard
  │ │ ├── procurement/ # Full PO workflow (4 components)
  │ │ ├── tasks/ # Tasks inbox
  │ │ └── audit/ # Audit trail
  │ ├── context/ # AppProvider with useDojoState
  │ ├── lib/ # types, seedData, utils
  │ └── App.tsx, main.tsx, index.css
  └── [config files]

🚀 Getting Started

cd sap/app
pnpm install
pnpm dev    # http://localhost:5173
pnpm build   # Single-file output

🏆 Ready for Bounty

This submission is complete and ready for the $1,000 bounty payout. All requirements met and exceeded with professional-quality code and design.

Closes #1

[aliraza556]

@0xnirmal Please review this PR.

[aliraza556]

@0xnirmal Please review the Loom Demo:

https://www.loom.com/share/9385e208b2bc4e11a56855648cde36fb

[0xnirmal]

@0xnirmal Please review the Loom Demo:

https://www.loom.com/share/9385e208b2bc4e11a56855648cde36fb

Will review. Expect feedback by EOD tomorrow!

[aliraza556]

@0xnirmal Thanks! I’ll wait for your feedback. 😊

[0xnirmal]

@0xnirmal Thanks! I’ll wait for your feedback. 😊

Quick loom feedback - styles need to be in line with the real SAP product. Do some research on what it looks like and make sure your SPA will generalize well to the real SAP product.

[aliraza556]

@0xnirmal Got it! Could you share any reference or resource for the real SAP product design so I can match the styles properly?

[0xnirmal]

@0xnirmal Got it! Could you share any reference or resource for the real SAP product design so I can match the styles properly?

The responsibility is on you to do the research and understand the workflow.

Our bar is an experienced SAP user should not be able to tell the difference between your front end and the real thing

[aliraza556]

@0xnirmal I’ve redesigned the SAP application based on the previous feedback to better match the real SAP product. Please review the demo below and share your feedback — I’ll push the updated code afterward.

https://www.loom.com/share/bd6e5dea31744a53baa131b8c702885b

[alex-fung]

hey @aliraza556, thank you for the quick turn around – I believe the product you have is based on an old design, here is how the new UI looks, for example:

You can see more details here https://www.sap.com/products/business-suite/product-tour.html in order to understand how it should look when targeting the functionality requirements in: #1

[0xnirmal]

hey @aliraza556, thank you for the quick turn around – I believe the product you have is based on an old design, here is how the new UI looks, for example:

You can see more details here https://www.sap.com/products/business-suite/product-tour.html in order to understand how it should look when targeting the functionality requirements in: #1

Hey @aliraza556 - just checking in on timeline here, how long do you think it'll take to uplift the UI for this?

[aliraza556]

hey @aliraza556, thank you for the quick turn around – I believe the product you have is based on an old design, here is how the new UI looks, for example:

You can see more details here https://www.sap.com/products/business-suite/product-tour.html in order to understand how it should look when targeting the functionality requirements in: #1

Hey @aliraza556 - just checking in on timeline here, how long do you think it'll take to uplift the UI for this?

@0xnirmal I’m on it — I’ll create a new UI, almost ready within 3 days.