A modern, responsive web application built with Next.js and React for the CRM system. Features a dark theme-only interface designed for optimal user experience and reduced eye strain.
- Node.js 18 or higher
- npm, yarn, pnpm, or bun package manager
- Backend API running on http://localhost:8000
- Install dependencies:
npm install
# or
yarn install
# or
pnpm install
# or
bun install- Configure environment variables:
# Create .env.local file
NEXT_PUBLIC_API_URL=http://localhost:8000- Start the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev- Open your browser: Navigate to http://localhost:3001 to see the application.
This application exclusively uses a dark theme designed to:
- Reduce eye strain during extended usage
- Provide better focus for data-intensive operations
- Create a professional, modern appearance
- Optimize for various lighting conditions
- Primary Background:
bg-gray-900(#111827) - Secondary Background:
bg-gray-800(#1F2937) - Card Background:
bg-gray-800(#1F2937) - Text Primary:
text-white(#FFFFFF) - Text Secondary:
text-gray-300(#D1D5DB) - Accent Blue:
text-blue-400(#60A5FA) - Success Green:
text-green-400(#34D399) - Warning Yellow:
text-yellow-400(#FBBF24) - Danger Red:
text-red-400(#F87171)
- Login Page (
/login): Secure JWT-based authentication - Protected Routes: Automatic redirect for unauthenticated users
- Role-based Access: Different interfaces based on user roles
- Overview statistics and KPIs
- Recent activity feed
- Quick action buttons
- Role-specific widgets
- Lead creation and editing
- Status tracking through sales pipeline
- Search and filtering capabilities
- Bulk operations support
- Lead-to-salesperson assignment interface
- Progress tracking and status updates
- Assignment history and notes
- Performance metrics
- Comprehensive business intelligence
- Lead conversion analytics
- Salesperson performance reports
- Geographic distribution analysis
- PDF export functionality
- Personal assignment dashboard
- Lead details and contact information
- Status update capabilities
- Location check-in/check-out
- View all sales team members
- Location tracking and status
- Performance overview
- Contact information
- Real-time salesperson locations
- Lead geographic distribution
- Proximity-based insights
- Interactive location pins
- New user registration workflow
- Role assignment interface
- Employee management tools
- Approval processes
- User management and role assignment
- System configuration
- Access control administration
- Audit logs and monitoring
- Next.js 15.3.3: React framework with App Router
- React 19: Latest React with concurrent features
- Tailwind CSS: Utility-first CSS framework
- Heroicons: High-quality SVG icons
- Lucide React: Additional icon library
- Leaflet: Interactive map functionality
- jsPDF: PDF generation and export
- Axios: HTTP client for API communication
- js-cookie: Client-side cookie management
- React Context API: Global state management
- AuthContext: User authentication state
- ThemeContext: Fixed dark theme configuration
- Local Component State: Component-specific state
- RESTful API: Communication with FastAPI backend
- JWT Authentication: Token-based security
- Axios Interceptors: Request/response handling
- Error Handling: Centralized error management
frontend/
├── app/ # Next.js App Router pages
│ ├── globals.css # Global styles and dark theme
│ ├── layout.js # Root layout component
│ ├── page.js # Home/landing page
│ ├── login/ # Authentication page
│ ├── dashboard/ # Main dashboard
│ ├── leads/ # Lead management
│ ├── assignments/ # Assignment interface
│ ├── reports/ # Analytics and reports
│ ├── salesperson/ # Salesperson dashboard
│ ├── salespersons/ # Team overview
│ ├── map/ # Interactive map
│ ├── hr/ # HR workflows
│ └── admin/ # Admin panel
├── components/ # Reusable React components
│ ├── Navbar.js # Navigation header
│ ├── ProtectedRoute.js # Route protection
│ ├── LoadingSpinner.js # Loading indicator
│ └── Toast.js # Notification system
├── contexts/ # React context providers
│ ├── AuthContext.js # Authentication state
│ └── ThemeContext.js # Dark theme config
├── lib/ # Utility functions
│ └── api.js # API client configuration
├── public/ # Static assets
└── package.json # Dependencies and scripts
# .env.local
NEXT_PUBLIC_API_URL=http://localhost:8000 # Backend API URLCustom dark theme configuration in tailwind.config.js:
- Extended color palette
- Custom component classes
- Responsive breakpoints
- Animation utilities
- App Router configuration
- Turbo mode enabled for faster development
- API route handling
- Image optimization
- Fixed dark theme navigation
- Role-based menu items
- User profile dropdown
- Logout functionality
- Authentication verification
- Role-based access control
- Automatic redirects
- Loading states
- Consistent loading indicator
- Dark theme styling
- Flexible sizing options
- Notification system
- Success/error messages
- Auto-dismiss functionality
- Dark theme design
- User authentication state
- Login/logout functions
- Token management
- User profile data
- Fixed dark theme provider
- Consistent theme values
- No toggle functionality (dark only)
/login- Authentication page
All other routes require authentication:
/dashboard- Main dashboard/leads- Lead management/assignments- Assignment interface/reports- Analytics and reports/salesperson- Salesperson dashboard/salespersons- Team overview/map- Interactive map/hr/onboarding- HR workflows/admin/users- Admin panel
Different user roles see different navigation items and have access to different features:
- Admin: Full access to all pages
- Executive: Dashboard, reports, and overview pages
- CRM: Lead and assignment management
- HR: User management and onboarding
- Salesperson: Personal dashboard and assignments
All components use consistent dark theme classes:
/* Background Colors */
.bg-gray-900 /* Primary background */
.bg-gray-800 /* Secondary background */
.bg-gray-700 /* Elevated surfaces */
/* Text Colors */
.text-white /* Primary text */
.text-gray-300 /* Secondary text */
.text-gray-400 /* Muted text */
/* Interactive Elements */
.bg-blue-600 /* Primary buttons */
.bg-green-600 /* Success actions */
.bg-red-600 /* Danger actions */
.bg-yellow-600 /* Warning actions */- Consistent padding and margins
- Rounded corners (
rounded-lg) - Shadow effects for depth
- Hover states for interactivity
- Focus states for accessibility
- Authentication: Login → JWT token → Stored in cookies
- Data Fetching: Components → API client → Backend → Response
- State Updates: API response → Context → Component re-render
- Error Handling: API errors → Toast notifications → User feedback
- Global auth state in AuthContext
- Page-level state in components
- Form state with controlled inputs
- Loading states for async operations
# Start development server
npm run dev
# Build for production
npm run build
# Start production server
npm run start
# Run linting
npm run lint- ESLint configuration for code quality
- Prettier for code formatting
- TypeScript support (JSDoc comments)
- Component prop validation
- Hot reload for rapid development
- Turbo mode for faster builds
- Browser dev tools integration
- React Developer Tools compatibility
- Mobile: 320px - 768px
- Tablet: 768px - 1024px
- Desktop: 1024px+
- Base styles for mobile devices
- Progressive enhancement for larger screens
- Touch-friendly interface elements
- Optimized navigation for mobile
- JWT token storage in secure cookies
- Automatic token expiration handling
- Protected route components
- Input validation and sanitization
- User submits credentials
- Backend validates and returns JWT
- Token stored in secure cookie
- Token included in API requests
- Automatic logout on token expiry
- Automatic code splitting
- Image optimization
- Static generation where possible
- Client-side routing
- Lazy loading for heavy components
- Skeleton screens during data fetching
- Progressive loading for large datasets
- Optimistic UI updates
# Create production build
npm run build
# Start production server
npm run start- Configure production API URL
- Set up environment variables
- Configure domain and SSL
- Set up monitoring and analytics
- Vercel (recommended for Next.js)
- Netlify
- AWS Amplify
- Traditional hosting with Node.js
- Check API URL configuration
- Verify backend is running
- Clear browser cookies/localStorage
- Check network connectivity
- Verify Tailwind CSS compilation
- Check for conflicting CSS classes
- Refresh browser cache
- Validate component structure
- Confirm backend server is running on port 8000
- Check CORS configuration
- Verify API endpoint URLs
- Review network tab in browser dev tools
- Use React Developer Tools for debugging
- Monitor network requests in browser
- Check console for JavaScript errors
- Verify component prop types
For frontend-specific issues:
- Check browser console for errors
- Verify API connectivity with backend
- Review component documentation
- Test with different browsers
Note: This application is designed exclusively with a dark theme to provide the best user experience for extended CRM usage.
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.