{"id":46033032,"url":"https://github.com/akshayjadhav2002/lead-management-frontend","last_synced_at":"2026-03-01T04:24:54.505Z","repository":{"id":333122639,"uuid":"1129926689","full_name":"akshayjadhav2002/lead-management-frontend","owner":"akshayjadhav2002","description":"lead-managment angular application","archived":false,"fork":false,"pushed_at":"2026-01-17T12:31:50.000Z","size":247,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-01-17T23:14:13.466Z","etag":null,"topics":["angular","angularjs","lead-generation","open-source","typescript"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/akshayjadhav2002.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-01-07T19:28:49.000Z","updated_at":"2026-01-17T12:35:05.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/akshayjadhav2002/lead-management-frontend","commit_stats":null,"previous_names":["akshayjadhav2002/lead-management-frontend"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/akshayjadhav2002/lead-management-frontend","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akshayjadhav2002%2Flead-management-frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akshayjadhav2002%2Flead-management-frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akshayjadhav2002%2Flead-management-frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akshayjadhav2002%2Flead-management-frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/akshayjadhav2002","download_url":"https://codeload.github.com/akshayjadhav2002/lead-management-frontend/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akshayjadhav2002%2Flead-management-frontend/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29960248,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-01T01:47:18.291Z","status":"online","status_checked_at":"2026-03-01T02:00:07.437Z","response_time":124,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angularjs","lead-generation","open-source","typescript"],"created_at":"2026-03-01T04:24:53.927Z","updated_at":"2026-03-01T04:24:54.486Z","avatar_url":"https://github.com/akshayjadhav2002.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Lead Management Application\r\n\r\nA 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.\r\n\r\n![Angular](https://img.shields.io/badge/Angular-18+-red?logo=angular)\r\n![Bootstrap](https://img.shields.io/badge/Bootstrap-5.3-purple?logo=bootstrap)\r\n![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-blue?logo=typescript)\r\n![License](https://img.shields.io/badge/License-MIT-green)\r\n\r\n## 📋 Table of Contents\r\n\r\n- [Features](#features)\r\n- [Screenshots](#screenshots)\r\n- [Tech Stack](#tech-stack)\r\n- [Prerequisites](#prerequisites)\r\n- [Installation](#installation)\r\n- [Project Structure](#project-structure)\r\n- [Configuration](#configuration)\r\n- [Running the Application](#running-the-application)\r\n- [Building for Production](#building-for-production)\r\n- [API Integration](#api-integration)\r\n- [Components Overview](#components-overview)\r\n- [Styling Guide](#styling-guide)\r\n- [Contributing](#contributing)\r\n- [License](#license)\r\n\r\n## ✨ Features\r\n\r\n### Core Functionality\r\n- 🎯 **Lead Management** - Create, view, edit, and delete leads\r\n- 📊 **Dashboard** - Visual overview of key metrics and statistics\r\n- 📈 **Reports** - Generate and download Excel reports with custom date ranges\r\n- 👥 **User Management** - Admin panel for managing sub-users\r\n- 🔐 **Role-Based Access** - Different permissions for Admin, Manager, and User roles\r\n- 📱 **Responsive Design** - Works seamlessly on desktop, tablet, and mobile devices\r\n\r\n### Advanced Features\r\n- 🔍 **Advanced Search \u0026 Filter** - Filter leads by status, source, and search terms\r\n- 📑 **Pagination** - Efficient data navigation with customizable page sizes\r\n- 📥 **Excel Export** - Download detailed reports in Excel format\r\n- 🎨 **Modern UI/UX** - Clean, minimalistic design with professional aesthetics\r\n- ⚡ **Fast Performance** - Optimized for speed and efficiency\r\n- 🌓 **Professional Color Scheme** - Carefully chosen color palette for readability\r\n\r\n## 📸 Screenshots\r\n\r\n### Dashboard\r\n![Dashboard](docs/screenshots/dashboard.png)\r\n\r\n### Leads Management\r\n![Leads](docs/screenshots/leads.png)\r\n\r\n### Reports\r\n![Reports](docs/screenshots/reports.png)\r\n\r\n### Profile\r\n![Profile](docs/screenshots/profile.png)\r\n\r\n## 🛠 Tech Stack\r\n\r\n### Frontend\r\n- **Angular 18+** - Modern web framework\r\n- **TypeScript 5.0+** - Type-safe JavaScript\r\n- **Bootstrap 5.3** - CSS framework for responsive design\r\n- **Bootstrap Icons** - Icon library\r\n- **RxJS** - Reactive programming\r\n\r\n### Development Tools\r\n- **Angular CLI** - Command-line interface for Angular\r\n- **Node.js 18+** - JavaScript runtime\r\n- **npm** - Package manager\r\n\r\n## 📦 Prerequisites\r\n\r\nBefore you begin, ensure you have the following installed:\r\n\r\n- **Node.js** (v18.0.0 or higher)\r\n- **npm** (v9.0.0 or higher)\r\n- **Angular CLI** (v18.0.0 or higher)\r\n\r\nTo check your versions:\r\n```bash\r\nnode --version\r\nnpm --version\r\nng version\r\n```\r\n\r\n## 🚀 Installation\r\n\r\n### 1. Clone the Repository\r\n```bash\r\ngit clone https://github.com/yourusername/lead-management-app.git\r\ncd lead-management-app\r\n```\r\n\r\n### 2. Install Dependencies\r\n```bash\r\nnpm install\r\n```\r\n\r\n### 3. Install Angular CLI (if not already installed)\r\n```bash\r\nnpm install -g @angular/cli\r\n```\r\n\r\n### 4. Configure Environment\r\nCreate environment files in `src/environments/`:\r\n\r\n**environment.ts** (Development)\r\n```typescript\r\nexport const environment = {\r\n  production: false,\r\n  apiUrl: 'http://localhost:3000/api',\r\n  apiKey: 'your-dev-api-key'\r\n};\r\n```\r\n\r\n**environment.prod.ts** (Production)\r\n```typescript\r\nexport const environment = {\r\n  production: true,\r\n  apiUrl: 'https://api.yourapp.com',\r\n  apiKey: 'your-prod-api-key'\r\n};\r\n```\r\n\r\n## 📁 Project Structure\r\n\r\n```\r\nlead-management-app/\r\n├── src/\r\n│   ├── app/\r\n│   │   ├── components/\r\n│   │   │   ├── dashboard/\r\n│   │   │   │   ├── dashboard.component.ts\r\n│   │   │   │   ├── dashboard.component.html\r\n│   │   │   │   └── dashboard.component.css\r\n│   │   │   ├── leads/\r\n│   │   │   │   ├── leads.component.ts\r\n│   │   │   │   ├── leads.component.html\r\n│   │   │   │   └── leads.component.css\r\n│   │   │   ├── reports/\r\n│   │   │   │   ├── reports.component.ts\r\n│   │   │   │   ├── reports.component.html\r\n│   │   │   │   └── reports.component.css\r\n│   │   │   ├── profile/\r\n│   │   │   │   ├── profile.component.ts\r\n│   │   │   │   ├── profile.component.html\r\n│   │   │   │   └── profile.component.css\r\n│   │   │   ├── sidebar/\r\n│   │   │   │   ├── sidebar.component.ts\r\n│   │   │   │   ├── sidebar.component.html\r\n│   │   │   │   └── sidebar.component.css\r\n│   │   │   └── footer/\r\n│   │   │       ├── footer.component.ts\r\n│   │   │       ├── footer.component.html\r\n│   │   │       └── footer.component.css\r\n│   │   ├── services/\r\n│   │   │   ├── auth.service.ts\r\n│   │   │   ├── lead.service.ts\r\n│   │   │   ├── report.service.ts\r\n│   │   │   └── user.service.ts\r\n│   │   ├── models/\r\n│   │   │   ├── lead.model.ts\r\n│   │   │   ├── user.model.ts\r\n│   │   │   └── report.model.ts\r\n│   │   ├── guards/\r\n│   │   │   └── auth.guard.ts\r\n│   │   ├── interceptors/\r\n│   │   │   └── auth.interceptor.ts\r\n│   │   └── app.routes.ts\r\n│   ├── assets/\r\n│   │   ├── images/\r\n│   │   └── styles/\r\n│   ├── environments/\r\n│   │   ├── environment.ts\r\n│   │   └── environment.prod.ts\r\n│   ├── styles.css\r\n│   └── index.html\r\n├── angular.json\r\n├── package.json\r\n├── tsconfig.json\r\n└── README.md\r\n```\r\n\r\n## ⚙️ Configuration\r\n\r\n### Bootstrap Integration\r\n\r\nAdd Bootstrap CSS to `angular.json`:\r\n```json\r\n\"styles\": [\r\n  \"node_modules/bootstrap/dist/css/bootstrap.min.css\",\r\n  \"src/styles.css\"\r\n]\r\n```\r\n\r\n### Global Styles\r\n\r\nAdd to `src/styles.css`:\r\n```css\r\n/* Import Bootstrap */\r\n@import '~bootstrap/dist/css/bootstrap.min.css';\r\n\r\n/* Global Variables */\r\n:root {\r\n  --primary: #4f46e5;\r\n  --success: #10b981;\r\n  --danger: #ef4444;\r\n  --text-dark: #111827;\r\n  --text-muted: #6b7280;\r\n}\r\n\r\n/* Global Resets */\r\n* {\r\n  margin: 0;\r\n  padding: 0;\r\n  box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\r\n  background-color: #f8f9fa;\r\n}\r\n```\r\n\r\n## 🏃 Running the Application\r\n\r\n### Development Server\r\n```bash\r\nng serve\r\n```\r\nNavigate to `http://localhost:4200/`. The application will automatically reload if you change any source files.\r\n\r\n### Development with Custom Port\r\n```bash\r\nng serve --port 4300\r\n```\r\n\r\n### Open Browser Automatically\r\n```bash\r\nng serve --open\r\n```\r\n\r\n## 🏗 Building for Production\r\n\r\n### Build Command\r\n```bash\r\nng build --configuration production\r\n```\r\n\r\nThe build artifacts will be stored in the `dist/` directory.\r\n\r\n### Build with Base HREF\r\n```bash\r\nng build --base-href /your-app/\r\n```\r\n\r\n### Production Optimization\r\nThe production build includes:\r\n- Ahead-of-Time (AOT) compilation\r\n- Tree shaking\r\n- Minification\r\n- Dead code elimination\r\n- Bundle optimization\r\n\r\n## 🔌 API Integration\r\n\r\n### Setting Up Services\r\n\r\n**1. Lead Service (`lead.service.ts`)**\r\n```typescript\r\nimport { Injectable } from '@angular/core';\r\nimport { HttpClient } from '@angular/common/http';\r\nimport { Observable } from 'rxjs';\r\nimport { environment } from '../environments/environment';\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class LeadService {\r\n  private apiUrl = `${environment.apiUrl}/leads`;\r\n\r\n  constructor(private http: HttpClient) {}\r\n\r\n  getLeads(): Observable\u003cany[]\u003e {\r\n    return this.http.get\u003cany[]\u003e(this.apiUrl);\r\n  }\r\n\r\n  createLead(lead: any): Observable\u003cany\u003e {\r\n    return this.http.post\u003cany\u003e(this.apiUrl, lead);\r\n  }\r\n\r\n  updateLead(id: number, lead: any): Observable\u003cany\u003e {\r\n    return this.http.put\u003cany\u003e(`${this.apiUrl}/${id}`, lead);\r\n  }\r\n\r\n  deleteLead(id: number): Observable\u003cany\u003e {\r\n    return this.http.delete\u003cany\u003e(`${this.apiUrl}/${id}`);\r\n  }\r\n}\r\n```\r\n\r\n**2. Replace Sample Data**\r\n\r\nIn each component, replace the sample data with actual API calls:\r\n\r\n```typescript\r\n// Before (Sample Data)\r\nthis.dataSource = [/* sample data */];\r\n\r\n// After (API Integration)\r\nthis.leadService.getLeads().subscribe({\r\n  next: (leads) =\u003e {\r\n    this.dataSource = leads;\r\n    this.updatePaginatedData();\r\n  },\r\n  error: (error) =\u003e {\r\n    console.error('Failed to load leads:', error);\r\n  }\r\n});\r\n```\r\n\r\n## 📦 Components Overview\r\n\r\n### Dashboard Component\r\n- Displays key metrics and statistics\r\n- Shows revenue, converted leads, and sub-users count\r\n- Provides quick access to important data\r\n\r\n### Leads Component\r\n- Complete lead management interface\r\n- Search, filter, and sort functionality\r\n- Pagination for large datasets\r\n- Action buttons for view, edit, and delete operations\r\n\r\n### Reports Component\r\n- Generate custom date-range reports\r\n- Download Excel files\r\n- View download history\r\n- Filter by user and date range\r\n\r\n### Profile Component\r\n- User profile information\r\n- Admin panel for sub-user management\r\n- Logout functionality\r\n- Role-based UI rendering\r\n\r\n### Sidebar Component\r\n- Navigation menu\r\n- Active route highlighting\r\n- Responsive mobile design\r\n- Clean, professional styling\r\n\r\n## 🎨 Styling Guide\r\n\r\n### Color Palette\r\n```css\r\nPrimary: #4f46e5 (Indigo)\r\nSuccess: #10b981 (Green)\r\nDanger: #ef4444 (Red)\r\nText Dark: #111827\r\nText Muted: #6b7280\r\nBorder: #e5e7eb\r\nBackground: #f9fafb\r\n```\r\n\r\n### Design Principles\r\n- **Minimalistic** - Clean and clutter-free interface\r\n- **Professional** - Enterprise-grade aesthetics\r\n- **Consistent** - Uniform spacing and typography\r\n- **Accessible** - High contrast and readable text\r\n- **Responsive** - Mobile-first approach\r\n\r\n### Custom CSS Classes\r\n```css\r\n.btn-gradient - Gradient button style\r\n.status-badge - Status indicator badges\r\n.role-badge - User role badges\r\n.avatar-circle - User avatar circles\r\n.card - Enhanced card styling\r\n```\r\n\r\n## 🤝 Contributing\r\n\r\nWe welcome contributions! Please follow these steps:\r\n\r\n1. Fork the repository\r\n2. Create a feature branch (`git checkout -b feature/AmazingFeature`)\r\n3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)\r\n4. Push to the branch (`git push origin feature/AmazingFeature`)\r\n5. Open a Pull Request\r\n\r\n### Coding Standards\r\n- Follow Angular style guide\r\n- Use TypeScript strict mode\r\n- Write unit tests for new features\r\n- Maintain consistent formatting\r\n- Document complex logic\r\n\r\n## 📝 License\r\n\r\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\r\n\r\n## 👥 Authors\r\n\r\n- **Your Name** - *Initial work* - [YourGitHub](https://github.com/yourusername)\r\n\r\n## 🙏 Acknowledgments\r\n\r\n- Angular Team for the amazing framework\r\n- Bootstrap Team for the CSS framework\r\n- All contributors who help improve this project\r\n\r\n## 📞 Support\r\n\r\nFor support, email support@yourapp.com or open an issue in the GitHub repository.\r\n\r\n## 🗺 Roadmap\r\n\r\n- [ ] Add authentication with JWT\r\n- [ ] Implement real-time notifications\r\n- [ ] Add data visualization charts\r\n- [ ] Create mobile app version\r\n- [ ] Add email templates\r\n- [ ] Implement advanced analytics\r\n- [ ] Add export to PDF functionality\r\n- [ ] Multi-language support\r\n\r\n---\r\n\r\n**Made with ❤️ using Angular and Bootstrap**\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakshayjadhav2002%2Flead-management-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fakshayjadhav2002%2Flead-management-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakshayjadhav2002%2Flead-management-frontend/lists"}