Re_Figma_Code/SETUP_INSTRUCTIONS.md

# 🎯 Quick Setup Instructions

## ✅ Project Setup Complete!

Your Royal Enfield Approval Portal has been configured with industry-standard React development tools and structure.

---

## 🚀 Quick Start (5 Minutes)

### Option 1: Automated Migration (Recommended)

**For Windows PowerShell:**
```powershell
# 1. Run the migration script
.\migrate-files.ps1

# 2. Install dependencies
npm install

# 3. Start development server
npm run dev
```

### Option 2: Manual Migration

**If you prefer manual control:**

```bash
# 1. Create src directories
mkdir src\components src\utils src\styles

# 2. Move files
move App.tsx src\
move components src\
move utils src\
move styles src\

# 3. Install dependencies
npm install

# 4. Start development server
npm run dev
```

---

## 📦 What Was Created

### Core Configuration ✅
- ✅ `package.json` - 50+ dependencies installed
- ✅ `vite.config.ts` - Build tool (fast, modern)
- ✅ `tsconfig.json` - TypeScript settings
- ✅ `tailwind.config.ts` - Styling configuration
- ✅ `eslint.config.js` - Code quality rules
- ✅ `.prettierrc` - Code formatting

### Project Structure ✅
```
Re_Figma_Code/
├── src/                    ← NEW! All code goes here
│   ├── main.tsx           ← Entry point (created)
│   ├── App.tsx            ← Move here
│   ├── components/        ← Move here
│   ├── utils/             ← Move here
│   ├── styles/            ← Move here
│   └── types/             ← Type definitions (created)
├── public/                ← Static assets
├── index.html             ← HTML entry
└── [config files]         ← All created
```

### VS Code Setup ✅
- ✅ `.vscode/settings.json` - Auto-format, Tailwind IntelliSense
- ✅ `.vscode/extensions.json` - Recommended extensions

---

## 🔧 After Running Setup

### 1. Fix Imports in App.tsx

**Update these imports:**
```typescript
// OLD (relative paths)
import { Layout } from './components/Layout';
import { Dashboard } from './components/Dashboard';
import { toast } from 'sonner@2.0.3';

// NEW (path aliases)
import { Layout } from '@/components/Layout';
import { Dashboard } from '@/components/Dashboard';
import { toast } from 'sonner';
```

### 2. Update Component Imports

**In all component files, change:**
```typescript
// OLD
import { Button } from './ui/button';
import { Card } from '../ui/card';

// NEW
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
```

### 3. Verify Everything Works

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

# Check for linting issues
npm run lint

# Format code
npm run format

# Build for production (test)
npm run build
```

---

## 🎨 Development Workflow

### Daily Development
```bash
npm run dev          # Start dev server (http://localhost:3000)
```

### Code Quality
```bash
npm run lint         # Check for issues
npm run lint:fix     # Auto-fix issues
npm run format       # Format code with Prettier
```

### Building
```bash
npm run build        # Production build
npm run preview      # Preview production build
```

---

## 🆘 Troubleshooting

### Issue: "Module not found"
**Solution:**
```bash
# Clear cache and reinstall
rm -rf node_modules package-lock.json
npm install
```

### Issue: "@/ path alias not working"
**Solution:**
1. Restart VS Code
2. Press `Ctrl+Shift+P` → "TypeScript: Restart TS Server"

### Issue: "Tailwind classes not applying"
**Solution:**
1. Check `src/main.tsx` imports `'./styles/globals.css'`
2. Restart dev server: `Ctrl+C` then `npm run dev`

### Issue: Build errors
**Solution:**
```bash
npm run type-check   # See TypeScript errors
npm run lint         # See ESLint errors
```

---

## 📚 Important Files

### Environment Variables
Copy and edit `.env.example`:
```bash
cp .env.example .env
```

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

### Type Definitions
Use types from `src/types/index.ts`:
```typescript
import type { Request, DealerInfo, Priority } from '@/types';

const request: Request = { /* ... */ };
```

---

## ✨ New Features Available

### 1. Path Aliases
```typescript
import { Button } from '@/components/ui/button';
import { getDealerInfo } from '@/utils/dealerDatabase';
import type { Request } from '@/types';
```

### 2. Code Quality Tools
- **ESLint** - Catches bugs and enforces best practices
- **Prettier** - Consistent code formatting
- **TypeScript** - Type safety and IntelliSense

### 3. Optimized Build
- **Code splitting** - Faster load times
- **Tree shaking** - Smaller bundle size
- **Source maps** - Easy debugging

### 4. Development Experience
- **Hot Module Replacement** - Instant updates
- **Fast Refresh** - Preserve component state
- **Better Error Messages** - Easier debugging

---

## 🎯 Next Steps

1. ✅ Run migration script or move files manually
2. ✅ Install dependencies: `npm install`
3. ✅ Update imports to use `@/` aliases
4. ✅ Fix sonner import
5. ✅ Start dev server: `npm run dev`
6. ✅ Test all features work
7. ✅ Commit changes to git

---

## 📖 Documentation

- **README.md** - Comprehensive project documentation
- **MIGRATION_GUIDE.md** - Detailed migration steps
- **package.json** - All available scripts

---

## 🤝 Team Guidelines

### Code Style
- Use path aliases (`@/`) for all imports
- Format code before committing (`npm run format`)
- Fix linting issues (`npm run lint:fix`)
- Write TypeScript types (avoid `any`)

### Git Commits
```bash
git add .
git commit -m "feat: add new feature"
git commit -m "fix: resolve bug"
git commit -m "docs: update documentation"
```

---

## ✅ Success Checklist

- [ ] Dependencies installed (`npm install`)
- [ ] Files migrated to `src/`
- [ ] Imports updated to use `@/`
- [ ] Sonner import fixed
- [ ] Dev server runs (`npm run dev`)
- [ ] No console errors
- [ ] Application loads correctly
- [ ] All features work
- [ ] Build succeeds (`npm run build`)

---

**🎉 You're all set! Happy coding!**

For detailed help, see `MIGRATION_GUIDE.md` or `README.md`