Customer CRM & Purchase History

Centralized customer directory, mobile lookup, birthdays & celebratory order history

{/* Search Bar */} {/* Customers Table */}

{customers.data.map((c) => ( ))}

Customer Name	Mobile Number	Email / Address	Birth & Anniversary	Total Invoices	History
{c.name}	{c.mobile}	{c.email \|\| 'No email registered'} {c.address \|\| 'No address details'}	{c.date_of_birth && DOB: {c.date_of_birth} } {c.anniversary_date && Anniversary: {c.anniversary_date} } {!c.date_of_birth && !c.anniversary_date && None recorded}	{c.invoices_count \|\| 0} Bills	View Orders

Edit Customer Details

Name * setData('name', e.target.value)} className="w-full rounded-xl border border-slate-200 dark:border-slate-800 dark:bg-slate-950 p-2.5 text-xs font-semibold text-slate-900 dark:text-white focus:outline-none" /> {errors.name && {errors.name}}

Mobile * setData('mobile', e.target.value)} className="w-full rounded-xl border border-slate-200 dark:border-slate-800 dark:bg-slate-950 p-2.5 text-xs font-semibold text-slate-900 dark:text-white focus:outline-none" /> {errors.mobile && {errors.mobile}}

Email setData('email', e.target.value)} className="w-full rounded-xl border border-slate-200 dark:border-slate-800 dark:bg-slate-950 p-2.5 text-xs font-semibold text-slate-900 dark:text-white focus:outline-none" /> {errors.email && {errors.email}}

Address

setData('address', e.target.value)}
                  rows={2}
                  className="w-full rounded-xl border border-slate-200 dark:border-slate-800 dark:bg-slate-950 p-2.5 text-xs font-semibold text-slate-900 dark:text-white focus:outline-none"
                />
              </div>

<div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-slate-700 dark:text-slate-300 font-semibold mb-1">Date of Birth</label>
                  <input
                    type="date"
                    value={data.date_of_birth}
                    onChange={e => setData('date_of_birth', e.target.value)}
                    className="w-full rounded-xl border border-slate-200 dark:border-slate-800 dark:bg-slate-950 p-2.5 text-xs font-semibold text-slate-900 dark:text-white focus:outline-none"
                  />
                </div>
                
                <div>
                  <label className="block text-slate-700 dark:text-slate-300 font-semibold mb-1">Anniversary</label>
                  <input
                    type="date"
                    value={data.anniversary_date}
                    onChange={e => setData('anniversary_date', e.target.value)}
                    className="w-full rounded-xl border border-slate-200 dark:border-slate-800 dark:bg-slate-950 p-2.5 text-xs font-semibold text-slate-900 dark:text-white focus:outline-none"
                  />
                </div>
              </div>

<div className="pt-3 border-t border-slate-200 dark:border-slate-800 flex justify-end space-x-3">
                <button
                  type="button"
                  onClick={() => { setShowEditModal(false); reset(); setEditingCustomer(null); }}
                  className="px-4 py-2.5 bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 rounded-xl text-slate-700 dark:text-slate-300 font-semibold transition-colors"
                >
                  Cancel
                </button>
                <button
                  type="submit"
                  disabled={processing}
                  className={`px-5 py-2.5 ${accentBg} text-white font-semibold rounded-xl shadow-md transition-all`}
                >
                  Save Changes
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </AuthenticatedLayout>
  );
}