A lightweight, modern sales management console built with React + Vite + Tailwind CSS for efficient lead management and opportunity conversion. This project demonstrates advanced React patterns, TypeScript implementation, and modern UI/UX practices.

🎯 Purpose: This project serves as a comprehensive technical demonstration showcasing modern frontend development practices, component architecture, and user experience design.

• 📋 Lead Management: Comprehensive lead listing with advanced filtering and sorting capabilities
• 🔍 Smart Search: Real-time search by name or company with instant results
• 📊 Lead Scoring: Visual score indicators with sorting by highest potential
• 📝 Inline Editing: Quick status updates and email validation directly in the interface
• 🔄 Lead Conversion: One-click conversion from leads to opportunities
• 📈 Opportunity Tracking: Dedicated opportunity management with stage tracking
• 💰 Inline Value Editing: Direct amount editing in opportunities table with currency formatting
• 🌍 Currency Internationalization: Automatic currency display based on selected language (BRL/USD)

• 🌓 Dark/Light Theme: Automatic theme switching with system preference detection
• 🌍 Internationalization: Multi-language support (English/Portuguese) with react-i18next
• 📱 Responsive Design: Seamless experience across desktop and mobile devices
• ⚡ Real-time Updates: Instant UI updates with optimistic rendering
• 🎭 Loading States: Elegant loading animations and error handling
• 💾 Persistent Filters: LocalStorage integration for filter and sort preferences

• ⚡ Lightning Fast: Vite-powered development with HMR (Hot Module Replacement)
• 🎯 Type Safety: Full TypeScript implementation with strict type checking
• 🎨 Modern UI: Radix UI components with Tailwind CSS styling
• 📦 Optimized Bundle: Tree-shaking and code splitting for minimal bundle size
• 🔧 Developer Experience: ESLint + Prettier configuration for code quality
• 🏗️ Modular Architecture: Component-based architecture with dedicated folders
• 🔄 Shared Resources: Centralized types, utilities, and constants
• 📝 Clean Code: English documentation and consistent code standards
• 🎓 Interactive Tutorial: Built-in guided tutorial system covering all features including lead conversion and value editing
• 📊 Export Functionality: Excel and CSV export capabilities for data analysis
• 🔍 Advanced Filtering: Multi-criteria filtering with persistent preferences
• 📱 Mobile-First: Responsive design optimized for all device sizes

src/
├── components/                    # Organized component library
│   ├── ui/                       # Base UI components (Radix + Tailwind)
│   ├── shared/                   # Shared utilities and types
│   │   ├── types.ts             # Common type definitions
│   │   ├── constants.ts         # Shared constants
│   │   ├── utils.ts             # Shared utility functions
│   │   └── index.ts             # Centralized exports
│   ├── kpi-cards/               # KPI dashboard components
│   │   ├── kpi-cards.tsx        # Main component
│   │   ├── types.ts             # Component-specific types
│   │   ├── utils.ts             # Component utilities
│   │   └── index.ts             # Component exports
│   ├── leads-table/             # Lead management components
│   │   ├── leads-table.tsx      # Main table component
│   │   ├── score-indicator.tsx  # Score visualization
│   │   ├── types.ts             # Lead table types
│   │   ├── utils.ts             # Table utilities
│   │   └── index.ts             # Component exports
│   ├── opportunities-table/     # Opportunity management
│   │   ├── opportunities-table.tsx    # Main component
│   │   ├── opportunities-header.tsx   # Table header
│   │   ├── empty-opportunities-state.tsx # Empty state
│   │   ├── editable-amount-cell.tsx   # Inline value editing
│   │   ├── types.ts             # Opportunity types
│   │   ├── utils.ts             # Opportunity utilities
│   │   └── index.ts             # Component exports
│   ├── lead-detail-sheet/       # Lead detail management
│   │   ├── lead-detail-sheet.tsx # Main sheet component
│   │   ├── lead-header.tsx      # Sheet header
│   │   ├── lead-form.tsx        # Form component
│   │   ├── sheet-actions.tsx    # Action buttons
│   │   ├── types.ts             # Sheet types
│   │   ├── utils.ts             # Sheet utilities
│   │   └── index.ts             # Component exports
│   ├── lead-import-dialog/      # Lead import functionality
│   │   ├── lead-import-dialog.tsx # Main dialog
│   │   ├── json-import-tab.tsx  # JSON import tab
│   │   ├── manual-import-tab.tsx # Manual import tab
│   │   ├── types.ts             # Import types
│   │   ├── utils.ts             # Import utilities
│   │   └── index.ts             # Component exports
│   └── language-switcher/       # Internationalization
│       ├── language-switcher.tsx # Language toggle
│       ├── types.ts             # Language types
│       ├── utils.ts             # Language utilities
│       └── index.ts             # Component exports
├── contexts/                    # React contexts
│   ├── leads-provider.tsx       # Lead state management
│   └── theme-provider.tsx       # Theme management
├── lib/                         # Utilities and configurations
│   ├── utils.ts                 # Helper functions
│   └── i18n.ts                  # Internationalization setup
├── types/                       # Global TypeScript definitions
└── App.tsx                      # Main application component

• Node.js 18+
• pnpm (recommended) or npm

# Clone the repository
git clone <repository-url>
cd mini-seller

# Install dependencies
pnpm install

# Start development server
pnpm dev

pnpm dev              # Start development server (http://localhost:3000)
pnpm build            # Build for production
pnpm preview          # Preview production build
pnpm test             # Run unit tests
pnpm test:watch       # Run tests in watch mode
pnpm test:coverage    # Run tests with coverage report
pnpm test:ui          # Run tests with UI interface
pnpm lint             # Run ESLint
pnpm lint:fix         # Fix ESLint issues automatically
pnpm type-check       # Run TypeScript compiler
pnpm format           # Format code with Prettier

1. Start the development server: pnpm dev
2. Open your browser: Navigate to http://localhost:3000
3. Take the tutorial: Click the "Start Tutorial" button to learn the interface
4. Import sample data: Use the import functionality to add leads
5. Explore features: Try filtering, searching, and converting leads to opportunities

The project includes focused unit tests for core functionality:

# Run all tests
pnpm test

# Run tests in watch mode
pnpm test --watch

Test Coverage:

• ✅ Utility functions (src/components/shared/utils.test.ts) - 32 tests
• ✅ Score indicator component (src/components/leads-table/score-indicator.test.tsx) - 8 tests
• Total: 40 unit tests

The test suite focuses on:

• Core utility functions (validation, formatting, filtering)
• Component rendering and behavior
• Business logic validation
• Simple, maintainable test cases

# Check for linting issues
npm run lint:check

# Fix linting issues automatically
npm run lint:fix

# Format code with Prettier
npm run format

# Check TypeScript types
npm run type-check

## 📊 Data Structure

### Lead Object
```typescript
interface Lead {
  id: string
  name: string
  company: string
  email: string
  source: string
  score: number
  status: 'new' | 'contacted' | 'qualified' | 'lost'
}

interface Opportunity {
  id: string;
  name: string;
  stage: string;
  amount?: number;
  accountName: string;
  createdAt: string;
}

• Dynamic Filtering: Filter by status with real-time updates
• Advanced Search: Search across name and company fields
• Smart Sorting: Sort by score (descending) for priority management
• Bulk Operations: Handle 100+ leads efficiently
• Lead Import: JSON and manual lead import functionality
• Score Visualization: Color-coded score indicators with progress bars
• Data Export: Export filtered leads to Excel (.xlsx) or CSV formats
• Always-Visible Import: Import button available in leads table for easy access

• Comprehensive Coverage: Step-by-step tutorial covering all features
• Lead Conversion Guide: Tutorial step for converting leads to opportunities
• Value Editing Tutorial: Guided tour of inline amount editing functionality
• Conditional Steps: Tutorial adapts based on available UI elements
• Visual Highlights: Spotlight effect on tutorial targets
• Progress Tracking: Clear indication of tutorial progress
• Skip Functionality: Users can skip or restart the tutorial anytime
• Multi-language Support: Tutorial content available in Portuguese and English

• Slide-over Design: Non-intrusive detail view
• Inline Editing: Direct status and email editing
• Email Validation: Real-time email format validation
• Save/Cancel Actions: Proper state management with error handling
• Form Validation: Comprehensive form validation with error messages

• One-click Conversion: Seamless lead-to-opportunity workflow from lead detail panel
• Automatic Data Mapping: Smart field mapping during conversion
• Stage Management: Opportunity pipeline tracking
• Inline Amount Editing: Click-to-edit functionality for opportunity values
• Currency Formatting: Automatic currency formatting based on language (R$ for Portuguese, $ for English)
• Input Validation: Real-time validation for numeric values with proper formatting
• Persistent Data: Automatic saving to localStorage with optimistic updates
• Empty State Handling: Elegant empty states with import suggestions

• Click-to-Edit Interface: Intuitive double-click activation for amount editing
• Real-time Validation: Instant feedback for invalid input with visual indicators
• Keyboard Navigation: Enter to save, Escape to cancel editing
• Currency Input Handling: Smart parsing of currency symbols and decimal separators
• Optimistic Updates: Immediate UI feedback with background persistence
• Error Recovery: Automatic rollback on save failures with user notification

• Dynamic Currency Display: Automatic currency formatting based on selected language
• Regional Number Formatting: Proper decimal and thousand separators per locale
• Language-Aware Validation: Input validation adapts to regional number formats
• Tutorial Localization: Complete tutorial experience in multiple languages
• Conditional UI Elements: Smart display of import buttons based on data state

• LocalStorage Persistence: Automatic data persistence across sessions
• JSON Fallback: Initial data loading from JSON files
• State Management: Centralized state with React Context
• Real-time Updates: Instant UI updates with optimistic rendering
• Currency Localization: Dynamic currency formatting using Intl.NumberFormat
• Input Sanitization: Proper validation and formatting for monetary values

• Color Palette: Carefully crafted color system with CSS custom properties
• Typography: Responsive typography scale with proper hierarchy
• Spacing: Consistent spacing system using Tailwind's spacing scale
• Components: Reusable component library built on Radix UI primitives
• Animations: Smooth transitions and micro-interactions

Supported languages:

• 🇺🇸 English (default)
• 🇧🇷 Portuguese

Easily extensible for additional languages through the public/locales/ directory.

• ESLint: Configured for React, TypeScript, and React Hooks
• Prettier: Automatic code formatting with consistent style
• VSCode Integration: Auto-format on save and lint fixes
• Batch Scripts: Windows-compatible scripts for easy linting

The project includes VSCode configuration files:

• .vscode/settings.json: Editor settings for consistent formatting
• .vscode/extensions.json: Recommended extensions for optimal development

• React Hooks validation
• Unused variables detection
• Console statement warnings
• Consistent code style enforcement
• TypeScript best practices

• Bundle Size: Optimized for minimal bundle size
• Loading Time: Fast initial load with code splitting
• Runtime Performance: Efficient rendering with React 18 features
• Memory Usage: Optimized for handling large datasets

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

This project is licensed under a Custom Technical Assessment License - see the LICENSE.md file for details.

⚠️ Important: This project is intended exclusively for technical assessment purposes in job application processes. Commercial use, redistribution, or any other use is strictly prohibited.

• Built with modern React patterns and best practices
• Inspired by contemporary sales management tools
• Designed for developer experience and user satisfaction

Made with ❤️ for efficient sales management