# 🏍️ Royal Enfield Approval Portal

A modern, enterprise-grade approval and request management system built with React, TypeScript, and Tailwind CSS.

## 📋 Table of Contents

- [Features](#features)
- [Tech Stack](#tech-stack)
- [Prerequisites](#prerequisites)
- [Installation](#installation)
- [Development](#development)
- [Project Structure](#project-structure)
- [Available Scripts](#available-scripts)
- [Configuration](#configuration)
- [Contributing](#contributing)

## ✨ Features

- **🔄 Dual Workflow System**
  - Custom Request Workflow with user-defined approvers
  - Claim Management Workflow (8-step predefined process)
  
- **📊 Comprehensive Dashboard**
  - Real-time statistics and metrics
  - High-priority alerts
  - Recent activity tracking
  
- **🎯 Request Management**
  - Create, track, and manage approval requests
  - Document upload and management
  - Work notes and audit trails
  - Spectator and stakeholder management
  
- **🎨 Modern UI/UX**
  - Responsive design (mobile, tablet, desktop)
  - Dark mode support
  - Accessible components (WCAG compliant)
  - Royal Enfield brand theming

- **🔔 Notifications**
  - Real-time toast notifications
  - SLA tracking and reminders
  - Approval status updates

## 🛠️ Tech Stack

- **Framework:** React 18.3+
- **Language:** TypeScript 5.6+
- **Build Tool:** Vite 5.4+
- **Styling:** Tailwind CSS 3.4+
- **UI Components:** shadcn/ui + Radix UI
- **Icons:** Lucide React
- **Notifications:** Sonner
- **State Management:** React Hooks (useState, useMemo)

## 📦 Prerequisites

- **Node.js:** >= 18.0.0
- **npm:** >= 9.0.0 (or yarn/pnpm)
- **Git:** Latest version

## 🚀 Installation

### Quick Start Checklist

- [ ] Clone the repository
- [ ] Install Node.js (>= 18.0.0) and npm (>= 9.0.0)
- [ ] Install project dependencies
- [ ] Set up environment variables (`.env.local`)
- [ ] Ensure backend API is running (optional for initial setup)
- [ ] Start development server

### 1. Clone the repository

\`\`\`bash
git clone <repository-url>
cd Re_Figma_Code
\`\`\`

### 2. Install dependencies

\`\`\`bash
npm install
\`\`\`

### 3. Set up environment variables

#### Option A: Automated Setup (Recommended - Unix/Linux/Mac)

Run the setup script to automatically create environment files:

\`\`\`bash
chmod +x setup-env.sh
./setup-env.sh
\`\`\`

This script will:
- Create `.env.example` with all required variables
- Create `.env.local` for local development
- Create `.env.production` with your production configuration (interactive)

#### Option B: Manual Setup (Windows or Custom Configuration)

**For Windows (PowerShell):**

1. Create `.env.local` file in the project root:

\`\`\`powershell
# Create .env.local file
New-Item -Path .env.local -ItemType File
\`\`\`

2. Add the following content to `.env.local`:

\`\`\`env
# Local Development Environment
VITE_API_BASE_URL=http://localhost:5000/api/v1
VITE_BASE_URL=http://localhost:5000

# Okta Authentication Configuration
VITE_OKTA_DOMAIN=your-okta-domain.okta.com
VITE_OKTA_CLIENT_ID=your-okta-client-id

# Push Notifications (Web Push / VAPID)
VITE_PUBLIC_VAPID_KEY=your-vapid-public-key
\`\`\`

**For Production:**

Create `.env.production` with production values:

\`\`\`env
# Production Environment
VITE_API_BASE_URL=https://your-backend-url.com/api/v1
VITE_BASE_URL=https://your-backend-url.com

# Okta Authentication Configuration
VITE_OKTA_DOMAIN=https://your-org.okta.com
VITE_OKTA_CLIENT_ID=your-production-client-id

# Push Notifications (Web Push / VAPID)
VITE_PUBLIC_VAPID_KEY=your-production-vapid-key
\`\`\`

#### Environment Variables Reference

| Variable | Description | Required | Default |
|----------|-------------|----------|---------|
| `VITE_API_BASE_URL` | Backend API base URL (with `/api/v1`) | Yes | `http://localhost:5000/api/v1` |
| `VITE_BASE_URL` | Base URL for direct file access (without `/api/v1`) | Yes | `http://localhost:5000` |
| `VITE_OKTA_DOMAIN` | Okta domain for SSO authentication | Yes* | - |
| `VITE_OKTA_CLIENT_ID` | Okta client ID for authentication | Yes* | - |
| `VITE_PUBLIC_VAPID_KEY` | Public VAPID key for web push notifications | No | - |

\*Required if using Okta authentication

### 4. Verify setup

Check that all required files exist:

\`\`\`bash
# Check environment file exists
ls -la .env.local  # Unix/Linux/Mac
# or
Test-Path .env.local  # Windows PowerShell
\`\`\`

## 💻 Development

### Prerequisites

Before starting development, ensure:

1. **Backend API is running:**
   - The backend should be running on `http://localhost:5000` (or your configured URL)
   - Backend API should be accessible at `/api/v1` endpoint
   - CORS should be configured to allow your frontend origin

2. **Environment variables are configured:**
   - `.env.local` file exists and contains valid configuration
   - All required variables are set (see [Environment Variables Reference](#environment-variables-reference))

3. **Node.js and npm versions:**
   - Verify Node.js version: `node --version` (should be >= 18.0.0)
   - Verify npm version: `npm --version` (should be >= 9.0.0)

### Start development server

\`\`\`bash
npm run dev
\`\`\`

The application will open at `http://localhost:5173` (Vite default port)

> **Note:** If port 5173 is in use, Vite will automatically use the next available port.

### Build for production

\`\`\`bash
npm run build
\`\`\`

### Preview production build

\`\`\`bash
npm run preview
\`\`\`

## 📁 Project Structure

\`\`\`
Re_Figma_Code/
├── src/
│   ├── components/
│   │   ├── ui/                      # Reusable UI components (40+)
│   │   ├── modals/                  # Modal components
│   │   ├── figma/                   # Figma-specific components
│   │   ├── Dashboard.tsx
│   │   ├── Layout.tsx
│   │   ├── ClaimManagementWizard.tsx
│   │   ├── NewRequestWizard.tsx
│   │   ├── RequestDetail.tsx
│   │   ├── ClaimManagementDetail.tsx
│   │   ├── MyRequests.tsx
│   │   └── ...
│   ├── utils/
│   │   ├── customRequestDatabase.ts
│   │   ├── claimManagementDatabase.ts
│   │   └── dealerDatabase.ts
│   ├── styles/
│   │   └── globals.css
│   ├── types/
│   │   └── index.ts               # TypeScript type definitions
│   ├── App.tsx
│   └── main.tsx
├── public/                          # Static assets
├── .vscode/                         # VS Code settings
├── index.html
├── vite.config.ts
├── tsconfig.json
├── tailwind.config.ts
├── postcss.config.js
├── eslint.config.js
├── .prettierrc
├── .gitignore
├── package.json
└── README.md
\`\`\`

## 📜 Available Scripts

| Script | Description |
|--------|-------------|
| `npm run dev` | Start development server |
| `npm run build` | Build for production |
| `npm run preview` | Preview production build |
| `npm run lint` | Run ESLint |
| `npm run lint:fix` | Fix ESLint errors |
| `npm run format` | Format code with Prettier |
| `npm run type-check` | Check TypeScript types |

## ⚙️ Configuration

### TypeScript Path Aliases

The project uses path aliases for cleaner imports:

\`\`\`typescript
import { Button } from '@/components/ui/button';
import { getDealerInfo } from '@/utils/dealerDatabase';
\`\`\`

Path aliases are configured in:
- `tsconfig.json` - TypeScript path mapping
- `vite.config.ts` - Vite resolver configuration

### Tailwind CSS Customization

Custom Royal Enfield colors are defined in `tailwind.config.ts`:

\`\`\`typescript
colors: {
  're-green': '#2d4a3e',
  're-gold': '#c9b037',
  're-dark': '#1a1a1a',
  're-light-green': '#8a9b8e',
}
\`\`\`

### Environment Variables

All environment variables must be prefixed with `VITE_` to be accessible in the app:

\`\`\`typescript
// Access environment variables
const apiUrl = import.meta.env.VITE_API_BASE_URL;
const baseUrl = import.meta.env.VITE_BASE_URL;
const oktaDomain = import.meta.env.VITE_OKTA_DOMAIN;
\`\`\`

**Important Notes:**
- Environment variables are embedded at build time, not runtime
- Changes to `.env` files require restarting the dev server
- `.env.local` takes precedence over `.env` in development
- `.env.production` is used when building for production (`npm run build`)

### Backend Integration

To connect to the backend API:

1. **Update API base URL** in `.env.local`:
   \`\`\`env
   VITE_API_BASE_URL=http://localhost:5000/api/v1
   \`\`\`

2. **Configure CORS** in your backend to allow your frontend origin

3. **Authentication:**
   - Configure Okta credentials in environment variables
   - Ensure backend validates JWT tokens from Okta

4. **API Services:**
   - API services are located in `src/services/`
   - All API calls use `axios` configured with base URL from environment

### Development vs Production

- **Development:** Uses `.env.local` (git-ignored)
- **Production:** Uses `.env.production` or environment variables set in deployment platform
- **Never commit:** `.env.local` or `.env.production` (use `.env.example` as template)

## 🔧 Troubleshooting

### Common Issues

#### Port Already in Use

If the default port (5173) is in use:

\`\`\`bash
# Option 1: Kill the process using the port
# Windows
netstat -ano | findstr :5173
taskkill /PID <PID> /F

# Unix/Linux/Mac
lsof -ti:5173 | xargs kill -9

# Option 2: Use a different port
npm run dev -- --port 3000
\`\`\`

#### Environment Variables Not Loading

1. Ensure variables are prefixed with `VITE_`
2. Restart the dev server after changing `.env` files
3. Check that `.env.local` exists in the project root
4. Verify no typos in variable names

#### Backend Connection Issues

1. Verify backend is running on the configured port
2. Check `VITE_API_BASE_URL` in `.env.local` matches backend URL
3. Ensure CORS is configured in backend to allow frontend origin
4. Check browser console for detailed error messages

#### Build Errors

\`\`\`bash
# Clear cache and rebuild
rm -rf node_modules/.vite
npm run build

# Check for TypeScript errors
npm run type-check
\`\`\`

### Getting Help

- Check browser console for errors
- Verify all environment variables are set correctly
- Ensure Node.js and npm versions meet requirements
- Review backend logs for API-related issues

## 🧪 Testing (Future Enhancement)

Add testing framework:

\`\`\`bash
npm install -D vitest @testing-library/react @testing-library/jest-dom
\`\`\`

## 🤝 Contributing

1. Follow the existing code style
2. Run `npm run lint:fix` before committing
3. Run `npm run type-check` to ensure type safety
4. Write meaningful commit messages

## 📝 License

Private - Royal Enfield Internal Use Only

## 👥 Team

Built by the Royal Enfield Development Team

---

**For support or questions, contact the development team.**