Re_Figma_Code/README.md

# 🏍️ 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

### 1. Clone the repository

\`\`\`bash
git clone <repository-url>
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>
    <App />
  </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.**