SAP UI Clone

A pixel-perfect, open-source UI clone of SAP Business One and SAP S/4HANA for demo, testing, and educational purposes.

Features

• SAP Business One (B1) - Modern orange-themed interface

  • Journal Entry form
  • Modules navigation tree
  • Toolbar, menu bar, status bar
  • Color-coded status messages

• SAP S/4HANA (Fiori) - Blue Fiori-style interface

  • FB50 - Journal Entry
  • MIRO - Invoice Verification
  • FBL3N - G/L Account Line Items
  • SAP Easy Access tree

• Version Switcher - Toggle between B1 and S/4HANA versions

• PWA Support - Install as desktop app in Edge/Chrome

• Fully Interactive - Add rows, navigate, form validation

Quick Start

# Clone the repo
git clone https://github.com/mediar-ai/sap-ui-clone.git
cd sap-ui-clone

# Install dependencies
bun install  # or npm install

# Run development server
bun dev  # or npm run dev

# Open http://localhost:3000

Screenshots

SAP Business One

• Orange accent color (#e1692c)
• Modern, clean interface
• Left sidebar with modules tree

SAP S/4HANA

• Blue Fiori theme (#0a6ed1)
• Transaction-based navigation
• SAP Easy Access menu

Tech Stack

• Next.js 16 - React framework
• Tailwind CSS 4 - Styling
• Lucide React - Icons
• TypeScript - Type safety

Use Cases

• Demo Videos - Create marketing content showing SAP automation
• UI/UX Testing - Test automation scripts against realistic SAP UI
• Training - Learn SAP interface patterns
• Development - Build integrations with familiar UI reference

Project Structure

src/
├── app/
│   ├── page.tsx          # Home (B1 welcome screen)
│   ├── b1/journal/       # B1 Journal Entry
│   ├── fb50/             # S/4HANA Journal Entry
│   ├── miro/             # S/4HANA Invoice
│   └── fbl3n/            # S/4HANA G/L Line Items
├── components/
│   ├── SAPB1*.tsx        # Business One components
│   └── SAP*.tsx          # S/4HANA components
└── globals.css           # SAP-specific styles

Disclaimer

This is an unofficial UI mockup for educational and demo purposes only. SAP, SAP Business One, and S/4HANA are trademarks of SAP SE. This project is not affiliated with, endorsed by, or connected to SAP SE in any way.

License

MIT License - feel free to use for demos, testing, and learning.

---

Built with Mediar - AI-powered workflow automation for legacy enterprise software.