DEV Community

Cover image for πŸš€ Day 4: Lead & Opportunities Module and Analytics with Dynamic Charts
Ashish prajapati
Ashish prajapati

Posted on

πŸš€ Day 4: Lead & Opportunities Module and Analytics with Dynamic Charts

Hi everyone! πŸ‘‹ Welcome to Day 4 of my CRM development journey in PHP and MySQL. Today, I'm diving into one of the core modulesβ€”Leads & Opportunitiesβ€”and exploring the Analytics Section to provide data insights. Here’s what I accomplished:


πŸ—‚οΈ Folder Structure

Here’s how I’ve organized the new files and features:

Client Folder Structure

  • add_leads.php: A user-friendly form for adding new leads with proper validation.

Admin Folder Structure

  • display_lead.php: Displays all registered leads in a sortable table with pagination.
  • analytics.php: A centralized analytics page to visualize lead-related data.
  • Charts Folder:
    • monthly_lead_count.php: Displays a chart showing the number of leads created per month.
    • lead_status_distro.php: Visualizes the distribution of lead statuses (e.g., new, contacted, converted).
    • lead_chart.php: Powers the dropdown feature for switching between different chart types.

✍️ Today’s Goals and Features

1️⃣ Lead Registration

I started by creating the Lead Registration Page (add_leads.php) where users can fill in details like name, email, phone number, company, position, and lead source. This form includes:

  • Proper validation for required fields.
  • Integration with the database to store leads dynamically.

2️⃣ Display Leads

In the admin panel, I developed display_lead.php to showcase all the registered leads. Key features include:

  • Sortable Table: Sort by name, company, or lead status.
  • Search Functionality: Quickly find leads using a search bar.
  • Pagination: Handles large data sets efficiently.

3️⃣ Analytics Dashboard

The analytics page (analytics.php) provides a visual representation of lead-related data. I used Chart.js to create the following:

  • Monthly Lead Count: A line or bar chart showing the number of leads added each month.
  • Lead Status Distribution: A pie or donut chart showing the breakdown of lead statuses.
  • Dynamic Chart Types: Users can switch between different chart types (e.g., line, bar, pie, radar) using a dropdown menu.

This feature offers flexibility for users to view data in the format they prefer.


πŸ”‘ What I Learned Today

  1. Dropdown Integration with Chart.js: I learned how to dynamically update chart types based on user input from a dropdown menu.
  2. Lead Management: Building CRUD operations for leads and organizing them efficiently.
  3. Data Visualization Best Practices: Creating charts that are both visually appealing and informative.

πŸ“Έ Images

  • Lead Registration Page:

Image description

  • Lead Display Table:

Image description

  • Analytics Dashboard:

Image description

  • Types of charts

Line Chart

Image description

Radar

Image description

monthly lead count (Bar Chart)

Image description


πŸ’‘ Key Takeaway

Day 4 was all about connecting data input (Lead Registration) with data visualization (Analytics). The dropdown-powered dynamic charts were the highlight, providing flexibility for users to analyze data effectively.


Stay tuned for Day 5, where I’ll work on Sales Tracking and fine-tune the UI/UX for the CRM! Let me know your thoughts or suggestions below! 😊

Top comments (0)