CRM Web App Development

import React, { useState } from 'react';
import './App.css';

const App = () => {
  const [customers, setCustomers] = useState([]);
  const [formData, setFormData] = useState({
    name: '',
    phone: '',
    whatsapp: '',
    location: '',
    remarks: ''
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    setCustomers([...customers, formData]);
    setFormData({
      name: '',
      phone: '',
      whatsapp: '',
      location: '',
      remarks: ''
    });
  };

  const sendWhatsAppMessage = (customer) => {
    const message = `Hi ${customer.name}, here is the brochure based on your remarks: ${customer.remarks}`;
    window.open(`https://wa.me/${customer.whatsapp}?text=${encodeURIComponent(message)}`, '_blank');
  };

  return (
    <div className="min-h-screen bg-gray-100 p-8">
      <h1 className="text-3xl font-bold text-center text-blue-600 mb-8">CRM Management System</h1>
      <div className="max-w-4xl mx-auto">
        <form onSubmit={handleSubmit} className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-8">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="name">
                Name
              </label>
              <input
                className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                id="name"
                type="text"
                name="name"
                value={formData.name}
                onChange={handleChange}
                placeholder="Customer Name"
                required
              />
            </div>
            <div>
              <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="phone">
                Phone Number
              </label>
              <input
                className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                id="phone"
                type="text"
                name="phone"
                value={formData.phone}
                onChange={handleChange}
                placeholder="Phone Number"
                required
              />
            </div>
            <div>
              <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="whatsapp">
                WhatsApp Number
              </label>
              <input
                className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                id="whatsapp"
                type="text"
                name="whatsapp"
                value={formData.whatsapp}
                onChange={handleChange}
                placeholder="WhatsApp Number"
                required
              />
            </div>
            <div>
              <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="location">
                Location
              </label>
              <input
                className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                id="location"
                type="text"
                name="location"
                value={formData.location}
                onChange={handleChange}
                placeholder="Location"
                required
              />
            </div>
          </div>
          <div className="mt-4">
            <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="remarks">
              Remarks
            </label>
            <textarea
              className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
              id="remarks"
              name="remarks"
              value={formData.remarks}
              onChange={handleChange}
              placeholder="Remarks"
              required
            />
          </div>
          <div className="flex items-center justify-center mt-6">
            <button
              className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
              type="submit"
            >
              Add Customer
            </button>
          </div>
        </form>
        <div className="bg-white shadow-md rounded px-8 pt-6 pb-8">
          <h2 className="text-2xl font-bold text-center text-blue-600 mb-6">Customer List</h2>
          <div className="overflow-x-auto">
            <table className="min-w-full bg-white">
              <thead>
                <tr>
                  <th className="py-3 px-6 text-left bg-blue-600 text-white">Name</th>
                  <th className="py-3 px-6 text-left bg-blue-600 text-white">Phone</th>
                  <th className="py-3 px-6 text-left bg-blue-600 text-white">WhatsApp</th>
                  <th className="py-3 px-6 text-left bg-blue-600 text-white">Location</th>
                  <th className="py-3 px-6 text-left bg-blue-600 text-white">Remarks</th>
                  <th className="py-3 px-6 text-left bg-blue-600 text-white">Action</th>
                </tr>
              </thead>
              <tbody>
                {customers.map((customer, index) => (
                  <tr key={index} className="hover:bg-gray-100">
                    <td className="py-4 px-6 border-b border-gray-200">{customer.name}</td>
                    <td className="py-4 px-6 border-b border-gray-200">{customer.phone}</td>
                    <td className="py-4 px-6 border-b border-gray-200">{customer.whatsapp}</td>
                    <td className="py-4 px-6 border-b border-gray-200">{customer.location}</td>
                    <td className="py-4 px-6 border-b border-gray-200">{customer.remarks}</td>
                    <td className="py-4 px-6 border-b border-gray-200">
                      <button
                        className="bg-green-500 hover:bg-green-700 text-white font-bold py-1 px-2 rounded focus:outline-none focus:shadow-outline"
                        onClick={() => sendWhatsAppMessage(customer)}
                      >
                        Send Brochure
                      </button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <footer className="mt-8 text-center text-gray-600">
        © 2025 CRM Management System. All rights reserved.
      </footer>
    </div>
  );
};

export default App;