🎬 AV Planning Tool by Jagatab.UK

https://github.com/sreejagatab/plantool

📋 Table of Contents

• 🎯 Overview
• ✨ Key Features
• 🛠️ Technology Stack
• 🚀 Live Demo
• 🔧 Installation
• 📁 Project Structure
• 🎯 Usage Guide
• 💰 Pricing Engine
• 🎨 UI/UX Features
• ♿ Accessibility
• 🌐 WordPress Integration
• 📱 Responsive Design
• 🔒 Security Features
• ⚡ Performance
• 🧪 Testing
• 🚀 Deployment
• 🔧 Configuration
• 📊 Analytics & Tracking
• 🔌 API Integration
• 🎨 Customization
• 📝 Documentation
• 🤝 Contributing
• 📄 License
• 🆘 Support

🎯 Overview

The AV Planning Tool is a state-of-the-art, professional-grade web application designed specifically for audiovisual event planning and quote generation. Built with modern web technologies, it provides a comprehensive solution for AV companies, event planners, and venue managers to create detailed, accurate quotes for audiovisual equipment and services.

🎪 Perfect For:

• AV Rental Companies - Streamline quote generation and equipment planning
• Event Planners - Get accurate AV estimates for client proposals
• Venue Managers - Provide instant AV quotes to event organizers
• Corporate Event Teams - Plan internal events with professional AV setups
• Wedding Planners - Include AV services in comprehensive event packages

✨ Key Features

🧙‍♂️ Intelligent Wizard Interface

• 7-Step Guided Process: Intuitive step-by-step quote generation
• Smart Navigation: Progress tracking with ability to jump between completed steps
• Auto-Save Functionality: Never lose progress with automatic form data persistence
• Validation Engine: Real-time form validation with helpful error messages
• Progress Indicators: Visual feedback on completion status

💰 Advanced Pricing Engine

• Dynamic Calculations: Real-time pricing based on multiple variables
• Seasonal Adjustments: Automatic pricing for peak seasons and holidays
• Guest Count Scaling: Intelligent pricing tiers based on event size
• Complexity Analysis: Pricing adjustments for technical requirements
• Day-of-Week Premiums: Weekend and special day pricing
• Event Type Modifiers: Different pricing for in-person, virtual, and hybrid events

📦 Three-Tier Package System

• Essential Package ($2,500 base): Perfect for small events (up to 100 guests)
• Recommended Package ($4,500 base): Ideal for medium events (up to 300 guests)
• Premium Package ($7,500 base): Complete solution for large events (up to 500+ guests)

🎛️ Comprehensive Equipment Database

• Audio Equipment: Microphones, speakers, mixing consoles, amplifiers
• Visual Equipment: Projectors, screens, LED walls, cameras
• Lighting Systems: Stage lighting, ambient lighting, special effects
• Streaming Technology: Live streaming equipment and platforms
• Accessories: Cables, stands, power distribution, backup equipment

📄 Professional Quote Generation

• PDF Export: Branded, professional quotes with detailed breakdowns
• Equipment Specifications: Detailed technical information for each item
• Pricing Transparency: Clear breakdown of costs and adjustments
• Terms & Conditions: Customizable legal terms and service agreements
• Company Branding: Logo, colors, and contact information integration

🔗 Sharing & Collaboration

• Email Integration: Direct email sharing with customizable messages
• Social Media Sharing: LinkedIn, Twitter, Facebook integration
• Link Generation: Shareable links for quote reviews
• Download Options: Multiple export formats (PDF, print-friendly)

🛠️ Technology Stack

Frontend Framework

• React 18.x - Modern component-based architecture
• TypeScript 5.x - Type safety and enhanced developer experience
• Vite 7.x - Lightning-fast build tool and development server

Styling & UI

• Tailwind CSS 3.x - Utility-first CSS framework
• Framer Motion - Smooth animations and micro-interactions
• Lucide React - Beautiful, customizable icons
• Custom CSS Components - Specialized styling for AV industry needs

Form Management

• React Hook Form - Performant form handling with validation
• Custom Validation - Industry-specific validation rules
• Real-time Feedback - Instant validation and error messaging

PDF Generation

• jsPDF - Client-side PDF generation
• html2canvas - HTML to canvas conversion for complex layouts
• Custom Templates - Professional quote layouts

State Management

• React Hooks - Modern state management patterns
• localStorage - Persistent form data across sessions
• Custom Hooks - Reusable business logic

Build & Deployment

• ES Modules - Modern JavaScript module system
• Code Splitting - Optimized bundle sizes
• Tree Shaking - Eliminate unused code
• Asset Optimization - Compressed images and fonts

🚀 Live Demo

Development Server: http://localhost:5174

To start the application locally:

npm install
npm run dev

The application will be available at the URL shown in your terminal (typically port 5174).

🎮 Demo Features to Try:

1. Complete Wizard Flow - Go through all 7 steps
2. Dynamic Pricing - Change guest count and see real-time price updates
3. Package Comparison - Compare different package options
4. PDF Generation - Generate and download professional quotes
5. Responsive Design - Test on different screen sizes
6. Accessibility - Try keyboard navigation and screen reader support

🔧 Installation

Prerequisites

• Node.js 18.0 or higher
• npm 9.0 or higher
• Modern Browser (Chrome 90+, Firefox 88+, Safari 14+, Edge 90+)

Quick Start

# Clone the repository
git clone https://github.com/your-repo/av-planner.git
cd av-planner

# Install dependencies
npm install

# Start development server
npm run dev

# Open browser to http://localhost:5174

Available Scripts

# Development
npm run dev              # Start development server
npm run build           # Build for production
npm run build:check     # Build with TypeScript checking
npm run build:wordpress # Build WordPress integration
npm run preview         # Preview production build
npm run lint           # Run ESLint

# Testing
npm test               # Run test suite (when implemented)
npm run test:e2e       # Run end-to-end tests (when implemented)

Environment Setup

Create a .env file in the root directory:

# Company Information
VITE_COMPANY_NAME="Your AV Company"
VITE_CONTACT_EMAIL="[email protected]"
VITE_PHONE="(555) 123-4567"
VITE_WEBSITE="https://yourcompany.com"

# API Configuration (optional)
VITE_API_URL="https://api.yourcompany.com"
VITE_ANALYTICS_ID="GA-XXXXXXXXX"

# Feature Flags
VITE_ENABLE_ANALYTICS=true
VITE_ENABLE_CHAT=false
VITE_DEBUG_MODE=false

📁 Project Structure

av-planner/
├── 📁 public/                    # Static assets
│   ├── vite.svg                 # Favicon
│   └── images/                  # Equipment images
├── 📁 src/
│   ├── 📁 components/           # React components
│   │   ├── 📁 wizard/          # Main wizard components
│   │   │   ├── WizardContainer.tsx
│   │   │   ├── StepIndicator.tsx
│   │   │   └── NavigationButtons.tsx
│   │   ├── 📁 steps/           # Individual step components
│   │   │   ├── WelcomeStep.tsx
│   │   │   ├── EventBasicsStep.tsx
│   │   │   ├── EventTypeStep.tsx
│   │   │   ├── AVRequirementsStep.tsx
│   │   │   ├── PackageSelectionStep.tsx
│   │   │   ├── CustomizationStep.tsx
│   │   │   └── SummaryStep.tsx
│   │   ├── 📁 ui/              # Reusable UI components
│   │   │   ├── PricingCard.tsx
│   │   │   ├── EquipmentVisualizer.tsx
│   │   │   ├── BudgetEstimator.tsx
│   │   │   └── Tooltip.tsx
│   │   └── 📁 export/          # Export functionality
│   │       ├── PDFGenerator.tsx
│   │       └── ShareModal.tsx
│   ├── 📁 data/                # Business data
│   │   ├── packages.js         # Package definitions
│   │   ├── equipment.js        # Equipment database
│   │   └── pricing.js          # Pricing logic
│   ├── 📁 hooks/               # Custom React hooks
│   │   ├── useWizard.ts        # Wizard state management
│   │   └── usePricing.ts       # Pricing calculations
│   ├── 📁 utils/               # Utility functions
│   │   ├── calculations.ts     # Business calculations
│   │   └── formatters.ts       # Data formatting
│   ├── 📁 types/               # TypeScript definitions
│   │   └── index.ts           # Type definitions
│   ├── App.tsx                # Main application component
│   ├── main.tsx               # Application entry point
│   └── index.css              # Global styles
├── 📁 scripts/                # Build and deployment scripts
│   └── build-wordpress.js     # WordPress integration builder
├── �� wordpress-integration/   # WordPress plugin (generated)
│   ├── 📁 av-planner-plugin/  # Complete WordPress plugin
│   ├── 📁 shortcode/          # Shortcode integration
│   └── 📁 theme-integration/   # Theme integration files
├── 📄 package.json            # Dependencies and scripts
├── 📄 tsconfig.json           # TypeScript configuration
├── 📄 tailwind.config.js      # Tailwind CSS configuration
├── 📄 vite.config.ts          # Vite configuration
├── 📄 WORDPRESS_INTEGRATION.md # WordPress setup guide
└── 📄 README.md               # This file