https://github.com/akshayjadhav2002/lead-management-frontend
lead-managment angular application
https://github.com/akshayjadhav2002/lead-management-frontend
angular angularjs lead-generation open-source typescript
Last synced: 5 months ago
JSON representation
lead-managment angular application
- Host: GitHub
- URL: https://github.com/akshayjadhav2002/lead-management-frontend
- Owner: akshayjadhav2002
- Created: 2026-01-07T19:28:49.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2026-01-17T12:31:50.000Z (6 months ago)
- Last Synced: 2026-01-17T23:14:13.466Z (6 months ago)
- Topics: angular, angularjs, lead-generation, open-source, typescript
- Language: HTML
- Homepage:
- Size: 241 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Lead Management Application
A modern, professional lead management system built with Angular 18+ and Bootstrap 5. This application provides a complete solution for managing sales leads, tracking conversions, and generating reports with a clean, minimalistic user interface.
## 📋 Table of Contents
- [Features](#features)
- [Screenshots](#screenshots)
- [Tech Stack](#tech-stack)
- [Prerequisites](#prerequisites)
- [Installation](#installation)
- [Project Structure](#project-structure)
- [Configuration](#configuration)
- [Running the Application](#running-the-application)
- [Building for Production](#building-for-production)
- [API Integration](#api-integration)
- [Components Overview](#components-overview)
- [Styling Guide](#styling-guide)
- [Contributing](#contributing)
- [License](#license)
## ✨ Features
### Core Functionality
- 🎯 **Lead Management** - Create, view, edit, and delete leads
- 📊 **Dashboard** - Visual overview of key metrics and statistics
- 📈 **Reports** - Generate and download Excel reports with custom date ranges
- 👥 **User Management** - Admin panel for managing sub-users
- 🔐 **Role-Based Access** - Different permissions for Admin, Manager, and User roles
- 📱 **Responsive Design** - Works seamlessly on desktop, tablet, and mobile devices
### Advanced Features
- 🔍 **Advanced Search & Filter** - Filter leads by status, source, and search terms
- 📑 **Pagination** - Efficient data navigation with customizable page sizes
- 📥 **Excel Export** - Download detailed reports in Excel format
- 🎨 **Modern UI/UX** - Clean, minimalistic design with professional aesthetics
- ⚡ **Fast Performance** - Optimized for speed and efficiency
- 🌓 **Professional Color Scheme** - Carefully chosen color palette for readability
## 📸 Screenshots
### Dashboard
### Leads Management
### Reports
### Profile
## 🛠 Tech Stack
### Frontend
- **Angular 18+** - Modern web framework
- **TypeScript 5.0+** - Type-safe JavaScript
- **Bootstrap 5.3** - CSS framework for responsive design
- **Bootstrap Icons** - Icon library
- **RxJS** - Reactive programming
### Development Tools
- **Angular CLI** - Command-line interface for Angular
- **Node.js 18+** - JavaScript runtime
- **npm** - Package manager
## 📦 Prerequisites
Before you begin, ensure you have the following installed:
- **Node.js** (v18.0.0 or higher)
- **npm** (v9.0.0 or higher)
- **Angular CLI** (v18.0.0 or higher)
To check your versions:
```bash
node --version
npm --version
ng version
```
## 🚀 Installation
### 1. Clone the Repository
```bash
git clone https://github.com/yourusername/lead-management-app.git
cd lead-management-app
```
### 2. Install Dependencies
```bash
npm install
```
### 3. Install Angular CLI (if not already installed)
```bash
npm install -g @angular/cli
```
### 4. Configure Environment
Create environment files in `src/environments/`:
**environment.ts** (Development)
```typescript
export const environment = {
production: false,
apiUrl: 'http://localhost:3000/api',
apiKey: 'your-dev-api-key'
};
```
**environment.prod.ts** (Production)
```typescript
export const environment = {
production: true,
apiUrl: 'https://api.yourapp.com',
apiKey: 'your-prod-api-key'
};
```
## 📁 Project Structure
```
lead-management-app/
├── src/
│ ├── app/
│ │ ├── components/
│ │ │ ├── dashboard/
│ │ │ │ ├── dashboard.component.ts
│ │ │ │ ├── dashboard.component.html
│ │ │ │ └── dashboard.component.css
│ │ │ ├── leads/
│ │ │ │ ├── leads.component.ts
│ │ │ │ ├── leads.component.html
│ │ │ │ └── leads.component.css
│ │ │ ├── reports/
│ │ │ │ ├── reports.component.ts
│ │ │ │ ├── reports.component.html
│ │ │ │ └── reports.component.css
│ │ │ ├── profile/
│ │ │ │ ├── profile.component.ts
│ │ │ │ ├── profile.component.html
│ │ │ │ └── profile.component.css
│ │ │ ├── sidebar/
│ │ │ │ ├── sidebar.component.ts
│ │ │ │ ├── sidebar.component.html
│ │ │ │ └── sidebar.component.css
│ │ │ └── footer/
│ │ │ ├── footer.component.ts
│ │ │ ├── footer.component.html
│ │ │ └── footer.component.css
│ │ ├── services/
│ │ │ ├── auth.service.ts
│ │ │ ├── lead.service.ts
│ │ │ ├── report.service.ts
│ │ │ └── user.service.ts
│ │ ├── models/
│ │ │ ├── lead.model.ts
│ │ │ ├── user.model.ts
│ │ │ └── report.model.ts
│ │ ├── guards/
│ │ │ └── auth.guard.ts
│ │ ├── interceptors/
│ │ │ └── auth.interceptor.ts
│ │ └── app.routes.ts
│ ├── assets/
│ │ ├── images/
│ │ └── styles/
│ ├── environments/
│ │ ├── environment.ts
│ │ └── environment.prod.ts
│ ├── styles.css
│ └── index.html
├── angular.json
├── package.json
├── tsconfig.json
└── README.md
```
## ⚙️ Configuration
### Bootstrap Integration
Add Bootstrap CSS to `angular.json`:
```json
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
]
```
### Global Styles
Add to `src/styles.css`:
```css
/* Import Bootstrap */
@import '~bootstrap/dist/css/bootstrap.min.css';
/* Global Variables */
:root {
--primary: #4f46e5;
--success: #10b981;
--danger: #ef4444;
--text-dark: #111827;
--text-muted: #6b7280;
}
/* Global Resets */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background-color: #f8f9fa;
}
```
## 🏃 Running the Application
### Development Server
```bash
ng serve
```
Navigate to `http://localhost:4200/`. The application will automatically reload if you change any source files.
### Development with Custom Port
```bash
ng serve --port 4300
```
### Open Browser Automatically
```bash
ng serve --open
```
## 🏗 Building for Production
### Build Command
```bash
ng build --configuration production
```
The build artifacts will be stored in the `dist/` directory.
### Build with Base HREF
```bash
ng build --base-href /your-app/
```
### Production Optimization
The production build includes:
- Ahead-of-Time (AOT) compilation
- Tree shaking
- Minification
- Dead code elimination
- Bundle optimization
## 🔌 API Integration
### Setting Up Services
**1. Lead Service (`lead.service.ts`)**
```typescript
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { environment } from '../environments/environment';
@Injectable({ providedIn: 'root' })
export class LeadService {
private apiUrl = `${environment.apiUrl}/leads`;
constructor(private http: HttpClient) {}
getLeads(): Observable {
return this.http.get(this.apiUrl);
}
createLead(lead: any): Observable {
return this.http.post(this.apiUrl, lead);
}
updateLead(id: number, lead: any): Observable {
return this.http.put(`${this.apiUrl}/${id}`, lead);
}
deleteLead(id: number): Observable {
return this.http.delete(`${this.apiUrl}/${id}`);
}
}
```
**2. Replace Sample Data**
In each component, replace the sample data with actual API calls:
```typescript
// Before (Sample Data)
this.dataSource = [/* sample data */];
// After (API Integration)
this.leadService.getLeads().subscribe({
next: (leads) => {
this.dataSource = leads;
this.updatePaginatedData();
},
error: (error) => {
console.error('Failed to load leads:', error);
}
});
```
## 📦 Components Overview
### Dashboard Component
- Displays key metrics and statistics
- Shows revenue, converted leads, and sub-users count
- Provides quick access to important data
### Leads Component
- Complete lead management interface
- Search, filter, and sort functionality
- Pagination for large datasets
- Action buttons for view, edit, and delete operations
### Reports Component
- Generate custom date-range reports
- Download Excel files
- View download history
- Filter by user and date range
### Profile Component
- User profile information
- Admin panel for sub-user management
- Logout functionality
- Role-based UI rendering
### Sidebar Component
- Navigation menu
- Active route highlighting
- Responsive mobile design
- Clean, professional styling
## 🎨 Styling Guide
### Color Palette
```css
Primary: #4f46e5 (Indigo)
Success: #10b981 (Green)
Danger: #ef4444 (Red)
Text Dark: #111827
Text Muted: #6b7280
Border: #e5e7eb
Background: #f9fafb
```
### Design Principles
- **Minimalistic** - Clean and clutter-free interface
- **Professional** - Enterprise-grade aesthetics
- **Consistent** - Uniform spacing and typography
- **Accessible** - High contrast and readable text
- **Responsive** - Mobile-first approach
### Custom CSS Classes
```css
.btn-gradient - Gradient button style
.status-badge - Status indicator badges
.role-badge - User role badges
.avatar-circle - User avatar circles
.card - Enhanced card styling
```
## 🤝 Contributing
We welcome contributions! Please follow these steps:
1. Fork the repository
2. Create a feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
### Coding Standards
- Follow Angular style guide
- Use TypeScript strict mode
- Write unit tests for new features
- Maintain consistent formatting
- Document complex logic
## 📝 License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## 👥 Authors
- **Your Name** - *Initial work* - [YourGitHub](https://github.com/yourusername)
## 🙏 Acknowledgments
- Angular Team for the amazing framework
- Bootstrap Team for the CSS framework
- All contributors who help improve this project
## 📞 Support
For support, email support@yourapp.com or open an issue in the GitHub repository.
## 🗺 Roadmap
- [ ] Add authentication with JWT
- [ ] Implement real-time notifications
- [ ] Add data visualization charts
- [ ] Create mobile app version
- [ ] Add email templates
- [ ] Implement advanced analytics
- [ ] Add export to PDF functionality
- [ ] Multi-language support
---
**Made with ❤️ using Angular and Bootstrap**