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! ๐Ÿ˜Š

Image of Timescale

Timescale โ€“ the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free โ†’

๐Ÿ‘‹ Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Communityโ€”every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple โ€œthank youโ€ goes a long wayโ€”express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay