Retail VM Auditor: Multi-Branch Compliance Suite (branch-vm-audit-system)

Live Web Demo: https://reda1472.github.io/branch-vm-audit-system/

---

1. Project Title

Retail VM Auditor: Multi-Branch Visual Merchandising Compliance & Audit Suite (branch-vm-audit-system)

2. One-Line Description

A production-grade retail store compliance platform for conducting visual merchandising audits across multi-branch store networks, computing weighted department scores, and generating executive audit reports.

3. Project Purpose

Demonstrates real-world retail store operations experience across branch networks (Mansoura, Tanta, Damanhour, Cairo) paired with frontend web engineering. Implements weighted scoring algorithms, interactive audit checklists (Pass / Partial / Fail), action item ticketing, and executive PDF/Print report generation.

4. Live Demo

• Live Interactive Dashboard: https://reda1472.github.io/branch-vm-audit-system/
• Deployment: Continuous delivery via GitHub Pages.

5. Screenshots

(Real interface captures from the running application)

Multi-Branch Compliance Grid	Interactive Inspection Checklist
Real-time performance ranking across Cairo, Mansoura, Tanta, and Damanhour branches	Weighted category checklist with Pass, Partial, and Fail compliance toggles

Executive Branch Audit Report	Native Arabic RTL & Dark Scheme
Printable executive compliance summary with inspector signatures	Bilingual Arabic interface with Cairo typography and smooth theme toggle

6. Features

• Multi-Branch Network Matrix: Tracks compliance scores across Flagship and Regional branches (New Cairo, Mansoura 1/2/3, Tanta Mall, Damanhour Mall).
• Weighted Compliance Formula: Evaluates Window Facades (25%), Entrance Tables (20%), Wall Bays & Folding Standards (30%), Lighting Calibration (15%), and POS Signage (10%).
• Interactive Checklists & Action Items: Real-time Pass (100%), Partial (60%), and Fail (0%) states with corrective action item ticketing.
• Printable Executive Audit Report: Formatted summary sheets ready for regional retail directors.
• First-Class Arabic RTL & Theming: Full English & Arabic translations with persistent dark and light modes.
• 100% Synthetic Data: Bundled with realistic store scores, inspector notes, and branch networks.

7. Tech Stack

• Architecture: Vanilla JavaScript (ES6+), Modular State Pattern.
• Styling: CSS3 Custom Properties, CSS Logical Properties for RTL, Flexbox/Grid.
• Fonts: Inter, Cairo, JetBrains Mono.

8. Architecture

┌────────────────────────────────────────────────────────┐
│             Multi-Branch Compliance Grid               │
│          (Cairo, Mansoura, Tanta, Damanhour)           │
└──────────────────────────┬─────────────────────────────┘
                           │
┌──────────────────────────▼─────────────────────────────┐
│                 Audit Calculation Engine               │
│       ├── Weighted Category Scores (Window, Walls, Lux)│
│       ├── Interactive Inspection Checklist Toggles     │
│       └── Action Item Ticketing System                 │
└──────────────────────────┬─────────────────────────────┘
                           │
┌──────────────────────────▼─────────────────────────────┐
│                 Executive Report Exporter              │
│      ├── Scorecard Radar & Grade Badges                │
│      └── Printable Branch Audit Summary                │
└────────────────────────────────────────────────────────┘

9. Project Structure

branch-vm-audit-system/
├── css/
│   ├── themes.css              # Dark & light design system tokens
│   ├── main.css                # Base reset and typography
│   ├── audit.css               # Scorecard grid & checklist styling
│   └── rtl.css                 # Dedicated Arabic RTL alignments
├── js/
│   ├── data.js                 # Synthetic branch network & checklist
│   ├── i18n.js                 # English / Arabic translation engine
│   ├── theme.js                # Theme switcher & OS listener
│   └── app.js                  # Weighted scoring & audit controller
├── index.html                  # Interactive Compliance Hub
├── LICENSE                     # MIT License
├── .gitignore
└── README.md                   # Full 17-point standard documentation

10. Installation

# Clone the repository
git clone https://github.com/reda1472/branch-vm-audit-system.git

# Navigate into the project directory
cd branch-vm-audit-system

11. Environment Variables

No build tools or environment variables required. Pure client-side application.

12. Development Commands

# Serve locally using Python HTTP server
python -m http.server 8000

# Open browser at http://localhost:8000

13. Production Build

Zero build steps required. Code is optimized for static deployment.

14. Usage

• Click any branch card in the top grid to load its audit scorecard.
• Toggle inspection checklist items (Pass / Partial / Fail).
• Click "Print Audit Report" to generate the official executive audit document.

15. Roadmap

• Multi-branch performance scorecard.
• Weighted category audit algorithm.
• Interactive inspection checklist.
• Printable executive audit summary.
• Photo attachment upload simulation.

16. Known Limitations

• Runs entirely client-side with persistent LocalStorage state.

17. License

Distributed under the MIT License. See LICENSE for details.