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! 😊

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs