Re_Figma_Code/MIGRATION_GUIDE.md

# 🔄 Migration Guide - Project Setup Complete

## ✅ What Has Been Created

### Configuration Files ✓
- ✅ `package.json` - Dependencies and scripts
- ✅ `tsconfig.json` - TypeScript configuration
- ✅ `tsconfig.node.json` - Node TypeScript config
- ✅ `vite.config.ts` - Vite build configuration
- ✅ `tailwind.config.ts` - Tailwind CSS configuration
- ✅ `postcss.config.js` - PostCSS configuration
- ✅ `eslint.config.js` - ESLint configuration
- ✅ `.prettierrc` - Prettier configuration
- ✅ `.gitignore` - Git ignore rules
- ✅ `.env.example` - Environment variables template
- ✅ `index.html` - HTML entry point

### VS Code Configuration ✓
- ✅ `.vscode/settings.json` - Editor settings
- ✅ `.vscode/extensions.json` - Recommended extensions

### Documentation ✓
- ✅ `README.md` - Comprehensive project documentation
- ✅ `MIGRATION_GUIDE.md` - This file

### Source Files Created ✓
- ✅ `src/main.tsx` - Application entry point
- ✅ `src/vite-env.d.ts` - Vite environment types
- ✅ `src/types/index.ts` - TypeScript type definitions

---

## 🚀 Next Steps - File Migration

### Step 1: Install Dependencies

\`\`\`bash
npm install
\`\`\`

This will install all required packages (~5 minutes).

### Step 2: Migrate Files to src Directory

You need to manually move the existing files to the `src` directory:

#### A. Move App.tsx
\`\`\`bash
# Windows Command Prompt
move App.tsx src\\App.tsx

# Or manually drag and drop in VS Code
\`\`\`

#### B. Move Components Directory
\`\`\`bash
# Windows Command Prompt
move components src\\components

# Or manually drag and drop in VS Code
\`\`\`

#### C. Move Utils Directory
\`\`\`bash
# Windows Command Prompt
move utils src\\utils

# Or manually drag and drop in VS Code
\`\`\`

#### D. Move Styles Directory
\`\`\`bash
# Windows Command Prompt
move styles src\\styles

# Or manually drag and drop in VS Code
\`\`\`

### Step 3: Update Import Paths

After moving files, you'll need to update import statements to use path aliases.

#### Example Changes:

**Before:**
\`\`\`typescript
import { Layout } from './components/Layout';
import { Dashboard } from './components/Dashboard';
\`\`\`

**After:**
\`\`\`typescript
import { Layout } from '@/components/Layout';
import { Dashboard } from '@/components/Dashboard';
\`\`\`

**Files that need updating:**
1. `src/App.tsx` - Update all component imports
2. All files in `src/components/` - Update relative imports
3. All modal files in `src/components/modals/`

### Step 4: Fix Sonner Import

In `src/App.tsx`, update the sonner import:

**Before:**
\`\`\`typescript
import { toast } from 'sonner@2.0.3';
\`\`\`

**After:**
\`\`\`typescript
import { toast } from 'sonner';
\`\`\`

### Step 5: Start Development Server

\`\`\`bash
npm run dev
\`\`\`

The app should open at `http://localhost:3000`

---

## 🔍 Common Issues & Solutions

### Issue 1: Module not found errors

**Problem:** TypeScript can't find modules after migration.

**Solution:**
1. Restart VS Code TypeScript server: `Ctrl+Shift+P` → "TypeScript: Restart TS Server"
2. Clear node_modules and reinstall:
   \`\`\`bash
   rm -rf node_modules package-lock.json
   npm install
   \`\`\`

### Issue 2: Path alias not working

**Problem:** `@/` imports show errors.

**Solution:**
1. Check `tsconfig.json` paths configuration
2. Check `vite.config.ts` resolve.alias configuration
3. Restart VS Code

### Issue 3: Tailwind classes not applying

**Problem:** Styles not working after migration.

**Solution:**
1. Ensure `globals.css` is imported in `src/main.tsx`
2. Check `tailwind.config.ts` content paths
3. Restart dev server: `Ctrl+C` then `npm run dev`

### Issue 4: Build errors

**Problem:** TypeScript compilation errors.

**Solution:**
1. Run type check: `npm run type-check`
2. Fix any TypeScript errors shown
3. Run build again: `npm run build`

---

## 📋 Migration Checklist

Use this checklist to track your migration progress:

### Files Migration
- [ ] Installed dependencies (`npm install`)
- [ ] Moved `App.tsx` to `src/`
- [ ] Moved `components/` to `src/components/`
- [ ] Moved `utils/` to `src/utils/`
- [ ] Moved `styles/` to `src/styles/`
- [ ] Created `src/main.tsx` (already done)

### Import Updates
- [ ] Updated imports in `src/App.tsx`
- [ ] Updated imports in `src/components/Layout.tsx`
- [ ] Updated imports in `src/components/Dashboard.tsx`
- [ ] Updated imports in all other component files
- [ ] Fixed `sonner` import in `App.tsx`

### Testing
- [ ] Dev server starts successfully (`npm run dev`)
- [ ] Application loads at `http://localhost:3000`
- [ ] No console errors
- [ ] Dashboard displays correctly
- [ ] Navigation works
- [ ] New request wizard works
- [ ] Claim management wizard works

### Code Quality
- [ ] ESLint passes (`npm run lint`)
- [ ] TypeScript compiles (`npm run type-check`)
- [ ] Code formatted (`npm run format`)
- [ ] Build succeeds (`npm run build`)

### Environment
- [ ] Created `.env` from `.env.example`
- [ ] Updated environment variables if needed
- [ ] VS Code extensions installed

---

## 🎯 After Migration

### 1. Clean Up Old Files

After confirming everything works in `src/`:
\`\`\`bash
# Delete old documentation files from root (optional)
# Keep only if you want them at root level
\`\`\`

### 2. Commit Changes

\`\`\`bash
git add .
git commit -m "feat: migrate to standard React project structure with Vite"
\`\`\`

### 3. Update Team

Inform team members about:
- New project structure
- Updated npm scripts
- Path alias usage (`@/`)
- Required VS Code extensions

---

## 📚 Additional Resources

### Documentation
- [Vite Documentation](https://vitejs.dev/)
- [React TypeScript Cheatsheet](https://react-typescript-cheatsheet.netlify.app/)
- [Tailwind CSS Docs](https://tailwindcss.com/docs)
- [shadcn/ui Components](https://ui.shadcn.com/)

### Scripts Reference
\`\`\`bash
npm run dev          # Start development server
npm run build        # Build for production
npm run preview      # Preview production build
npm run lint         # Check for linting errors
npm run lint:fix     # Auto-fix linting errors
npm run format       # Format code with Prettier
npm run type-check   # Check TypeScript types
\`\`\`

---

## 💡 Tips for Development

### 1. Use Path Aliases
\`\`\`typescript
// Good ✓
import { Button } from '@/components/ui/button';
import { getDealerInfo } from '@/utils/dealerDatabase';

// Avoid ✗
import { Button } from '../../../components/ui/button';
\`\`\`

### 2. Type Safety
\`\`\`typescript
// Import types
import type { Request, DealerInfo } from '@/types';

// Use them in your components
const request: Request = { ... };
\`\`\`

### 3. Code Formatting
Set up auto-format on save in VS Code (already configured in `.vscode/settings.json`)

### 4. Commit Conventions
Use conventional commits:
- `feat:` for new features
- `fix:` for bug fixes
- `docs:` for documentation
- `style:` for formatting changes
- `refactor:` for code refactoring

---

## ❓ Need Help?

If you encounter issues:
1. Check this migration guide
2. Check the main README.md
3. Review error messages carefully
4. Check VS Code Problems panel
5. Restart VS Code TypeScript server
6. Clear node_modules and reinstall

---

**Migration prepared by the Development Team**
**Date: 2024**