laxmanhalaki/Re_Figma_Code
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
02182daa65
Re_Figma_Code/README.md

412 lines
11 KiB
Markdown
Raw Blame History

# 🏍️ 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.**
Reference in New Issue View Git Blame Copy Permalink