Can we have a feature where we can edit the name of the todo item, provide another button to the left of complete and delete:

// src/App.js
import React, { useState, useEffect } from 'react';
import { db } from './db';

function App() {
  const [customers, setCustomers] = useState([]);
  const [selectedCustomer, setSelectedCustomer] = useState(null);
  const [input, setInput] = useState('');
  const [newCustomer, setNewCustomer] = useState('');
  const [editingCustomer, setEditingCustomer] = useState(null);
  const [editName, setEditName] = useState('');

  useEffect(() => {
    loadCustomers();
  }, []);

  const loadCustomers = async () => {
    try {
      const allCustomers = await db.customers.toArray();
      setCustomers(allCustomers);
      if (allCustomers.length > 0) {
        // Preserve the selected customer if possible
        const currentCustomer = allCustomers.find(
          (c) => c.id === selectedCustomer?.id
        );
        setSelectedCustomer(currentCustomer || null);
        // Do not automatically select the first customer
      } else {
        setSelectedCustomer(null);
      }
    } catch (error) {
      console.error('Error loading customers:', error);
    }
  };

  const addCustomer = async () => {
    if (newCustomer.trim()) {
      try {
        await db.customers.add({ name: newCustomer, todos: [] });
        await loadCustomers();
        setNewCustomer('');
      } catch (error) {
        console.error('Error adding customer:', error);
      }
    }
  };

  const startEditingCustomer = (customer) => {
    setEditingCustomer(customer);
    setEditName(customer.name);
  };

  const saveCustomerEdit = async () => {
    if (editName.trim() && editingCustomer) {
      try {
        await db.customers.update(editingCustomer.id, { name: editName });
        const updatedCustomer = { ...editingCustomer, name: editName };

        if (selectedCustomer && selectedCustomer.id === updatedCustomer.id) {
          setSelectedCustomer(updatedCustomer);
        }

        setCustomers((prevCustomers) =>
          prevCustomers.map((customer) =>
            customer.id === updatedCustomer.id ? updatedCustomer : customer
          )
        );

        setEditingCustomer(null);
        setEditName('');
      } catch (error) {
        console.error('Error updating customer:', error);
      }
    }
  };

  const toggleComplete = async (index) => {
    if (selectedCustomer) {
      try {
        const updatedTodos = selectedCustomer.todos.map((todo, i) =>
          i === index ? { ...todo, completed: !todo.completed } : todo
        );
        const updatedCustomer = { ...selectedCustomer, todos: updatedTodos };

        await db.customers.update(selectedCustomer.id, { todos: updatedTodos });

        setSelectedCustomer(updatedCustomer);

        setCustomers((prevCustomers) =>
          prevCustomers.map((customer) =>
            customer.id === updatedCustomer.id ? updatedCustomer : customer
          )
        );
      } catch (error) {
        console.error('Error toggling todo:', error);
      }
    }
  };

  const addTodo = async () => {
    if (input.trim() && selectedCustomer) {
      try {
        const updatedTodos = [
          ...selectedCustomer.todos,
          { text: input, completed: false },
        ];
        const updatedCustomer = { ...selectedCustomer, todos: updatedTodos };

        await db.customers.update(selectedCustomer.id, { todos: updatedTodos });

        setSelectedCustomer(updatedCustomer);

        setCustomers((prevCustomers) =>
          prevCustomers.map((customer) =>
            customer.id === updatedCustomer.id ? updatedCustomer : customer
          )
        );

        setInput('');
      } catch (error) {
        console.error('Error adding todo:', error);
      }
    }
  };

  const deleteTodo = async (index) => {
    if (window.confirm('Are you sure you want to delete this todo item?')) {
      if (selectedCustomer) {
        try {
          const updatedTodos = selectedCustomer.todos.filter(
            (_, i) => i !== index
          );
          const updatedCustomer = { ...selectedCustomer, todos: updatedTodos };

          await db.customers.update(selectedCustomer.id, {
            todos: updatedTodos,
          });

          setSelectedCustomer(updatedCustomer);

          setCustomers((prevCustomers) =>
            prevCustomers.map((customer) =>
              customer.id === updatedCustomer.id ? updatedCustomer : customer
            )
          );
        } catch (error) {
          console.error('Error deleting todo:', error);
        }
      }
    }
  };

  const deleteCustomer = async (customerId) => {
    if (window.confirm('Are you sure you want to delete this customer?')) {
      try {
        await db.customers.delete(customerId);
        await loadCustomers();
      } catch (error) {
        console.error('Error deleting customer:', error);
      }
    }
  };

  const selectCustomerById = async (id) => {
    if (id) {
      try {
        const customer = await db.customers.get(Number(id));
        setSelectedCustomer(customer);
      } catch (error) {
        console.error('Error selecting customer:', error);
      }
    } else {
      setSelectedCustomer(null);
    }
  };

  return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
      <div className="bg-white p-6 rounded-lg shadow-lg w-full max-w-md">
        <h1 className="text-2xl font-bold mb-4">Trackify:<br/>Seamlessly Track Every Deliverable</h1>
        <div className="mb-4">
          <label className="block text-gray-700">Add Customer:</label>
          <div className="flex mb-2">
            <input
              type="text"
              className="flex-grow p-2 border border-gray-300 rounded-l-lg"
              value={newCustomer}
              onChange={(e) => setNewCustomer(e.target.value)}
              placeholder="Enter customer name"
              onKeyDown={(e) => {
                if (e.key === 'Enter') {
                  e.preventDefault();
                  addCustomer();
                }
              }}
            />
            <button
              className="bg-blue-500 text-white p-2 rounded-r-lg hover:bg-blue-600"
              onClick={addCustomer}
            >
              Add
            </button>
          </div>
          {customers.length > 0 && (
            <>
              <label className="block text-gray-700">Select Customer:</label>
              <select
                className="w-full p-2 border border-gray-300 rounded-lg"
                value={selectedCustomer ? selectedCustomer.id : ''}
                onChange={(e) => selectCustomerById(e.target.value)}
              >
                <option value="">-- Select a customer --</option>
                {customers.map((customer) => (
                  <option key={customer.id} value={customer.id}>
                    {customer.name}
                  </option>
                ))}
              </select>
            </>
          )}
        </div>
        {selectedCustomer && (
          <div>
            <div className="flex mb-4">
              <input
                type="text"
                className="flex-grow p-2 border border-gray-300 rounded-l-lg"
                value={input}
                onChange={(e) => setInput(e.target.value)}
                placeholder="Add a new todo"
                onKeyDown={(e) => {
                  if (e.key === 'Enter') {
                    e.preventDefault();
                    addTodo();
                  }
                }}
              />
              <button
                className="bg-blue-500 text-white p-2 rounded-r-lg hover:bg-blue-600"
                onClick={addTodo}
              >
                Add
              </button>
            </div>
            <ul>
              {selectedCustomer.todos.map((todo, index) => (
                <li
                  key={`${selectedCustomer.id}-${index}-${todo.text}`}
                  className="flex items-center justify-between p-2 border-b border-gray-200"
                >
                  <span
                    className={`flex-grow ${
                      todo.completed ? 'line-through text-gray-500' : ''
                    }`}
                  >
                    {todo.text}
                  </span>
                  <div className="flex items-center">
                    <button
                      className="text-green-500 mr-2 hover:text-green-600"
                      onClick={() => toggleComplete(index)}
                    >
                      {todo.completed ? 'Undo' : 'Complete'}
                    </button>
                    <button
                      className="text-red-500 hover:text-red-600"
                      onClick={() => deleteTodo(index)}
                    >
                      Delete
                    </button>
                  </div>
                </li>
              ))}
            </ul>
          </div>
        )}
        <div className="mt-4">
          <h2 className="text-xl font-bold mb-2">Customers</h2>
          <ul>
            {customers.map((customer) => {
              const totalTodos = customer.todos.length;
              const pendingTodos = customer.todos.filter(
                (todo) => !todo.completed
              ).length;

              return (
                <li
                  key={customer.id}
                  className="flex items-center justify-between p-2 border-b border-gray-200"
                >
                  {editingCustomer && editingCustomer.id === customer.id ? (
                    <div className="flex items-center flex-grow mr-2">
                      <input
                        type="text"
                        className="flex-grow p-1 border border-gray-300 rounded"
                        value={editName}
                        onChange={(e) => setEditName(e.target.value)}
                        onKeyDown={(e) => {
                          if (e.key === 'Enter') {
                            e.preventDefault();
                            saveCustomerEdit();
                          }
                        }}
                      />
                      <button
                        className="text-green-500 ml-2 hover:text-green-600"
                        onClick={saveCustomerEdit}
                      >
                        Save
                      </button>
                    </div>
                  ) : (
                    <>
                      <span>
                        {customer.name}{' '}
                        <span className="text-gray-500">
                          ({totalTodos} total, {pendingTodos} pending)
                        </span>
                      </span>
                      <div>
                        <button
                          className="text-blue-500 mr-2 hover:text-blue-600"
                          onClick={() => startEditingCustomer(customer)}
                        >
                          Edit
                        </button>
                        <button
                          className="text-red-500 hover:text-red-600"
                          onClick={() => deleteCustomer(customer.id)}
                        >
                          Delete
                        </button>
                      </div>
                    </>
                  )}
                </li>
              );
            })}
          </ul>
        </div>
      </div>
    </div>
  );
}

export default App;