🏍️ Royal Enfield Approval Portal

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

📋 Table of Contents

• Features
• Tech Stack
• Prerequisites
• Installation
• Development
• Project Structure
• Available Scripts
• Configuration
• 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

1. Clone the repository

```bash git clone cd Re_Figma_Code ```

2. Install dependencies

```bash npm install ```

3. Set up environment variables

```bash cp .env.example .env ```

Edit .env with your configuration:

```env VITE_API_BASE_URL=http://localhost:5000/api VITE_APP_NAME=Royal Enfield Approval Portal ```

4. Move files to src directory

```bash

Create src directory structure

mkdir -p src/components src/utils src/styles src/types

Move existing files (you'll need to do this manually or run the migration script)

The structure should match the project structure below

```

💻 Development

Start development server

```bash npm run dev ```

The application will open at http://localhost:3000

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'; ```

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 const apiUrl = import.meta.env.VITE_API_BASE_URL; ```

🔧 Next Steps

1. File Migration

Move existing files to the src directory:

```bash

Move App.tsx

mv App.tsx src/

Move components

mv components src/

Move utils

mv utils src/

Move styles

mv styles src/ ```

2. Create main.tsx entry point

Create src/main.tsx:

```typescript import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import './styles/globals.css';

ReactDOM.createRoot(document.getElementById('root')!).render( <React.StrictMode> </React.StrictMode> ); ```

3. Update imports

Update all import paths to use the @/ alias:

```typescript // Before import { Button } from './components/ui/button';

// After import { Button } from '@/components/ui/button'; ```

4. Backend Integration

When ready to connect to a real API:

1. Create src/services/api.ts for API calls
2. Replace mock databases with API calls
3. Add authentication layer
4. Implement error handling

🧪 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.