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

11 KiB
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

  • 🔄 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 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 ```

  1. 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:

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